/*
 * Code Blue Security — Responsive Stylesheet
 * ============================================
 * Breakpoints:
 *   1200px  — large desktop cap
 *   1024px  — tablet landscape / small laptop
 *    768px  — tablet portrait / large mobile
 *    480px  — mobile landscape / large phone
 *    375px  — small phone (iPhone SE etc.)
 *
 * Browser targets: Chrome, Firefox, Safari, Edge, Samsung Internet
 * Device targets:  Desktop, iPad (all sizes), Android tablets, iPhone, Android phones
 */

/* ═══════════════════════════════════════════════════════════════
   BASE — cross-browser resets & touch improvements
═══════════════════════════════════════════════════════════════ */

/* Prevent text size inflation on orientation change (iOS/Android) */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Tap highlight — remove on mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling — respects prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Touch targets — minimum 44px for interactive elements */
.btn-primary,
.btn-secondary,
.nav-cta,
.newsletter-btn {
    min-height: 44px;
}

/* Prevent overflow-x on all pages */
body, html {
    max-width: 100%;
    overflow-x: hidden;
}

/* Image safety net */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* Input zoom prevention on iOS (requires font-size >= 16px) */
input, textarea, select {
    font-size: 16px !important;
}
/* Override back for desktop where smaller is fine */
@media (min-width: 769px) {
    input, textarea, select {
        font-size: inherit !important;
    }
    .newsletter-input,
    .codeblue-field input,
    .codeblue-field textarea {
        font-size: 13px !important;
    }
}

/* backdrop-filter fallback for Firefox < 103 and older browsers */
@supports not (backdrop-filter: blur(1px)) {
    nav.site-nav {
        background: rgba(6, 13, 31, 0.97) !important;
    }
}

/* -webkit-background-clip fallback */
.stat-num,
.hero-title .line-blue,
.hero-title .line-red {
    /* Ensure gradient text works cross-browser */
    -webkit-background-clip: text;
    background-clip: text;
}

/* CSS custom properties fallback for IE (graceful degradation) */
@supports not (color: var(--navy)) {
    body { background: #060d1f; color: #f0f4ff; }
    nav { background: #060d1f; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET LANDSCAPE  —  1024px and below
   (iPad Pro landscape, small laptops, Surface)
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {

    /* Nav */
    nav {
        padding: 18px 32px;
    }

    .nav-links {
        gap: 24px;
    }

    .nav-links a {
        font-size: 12px;
    }

    /* Hero */
    .hero {
        padding: 110px 32px 80px;
    }

    .hero-inner {
        gap: 48px;
    }

    /* Stats */
    .stats-bar {
        padding: 40px 32px;
    }

    .stats-inner {
        padding: 0;
    }

    .stat-item {
        padding: 0 24px;
    }

    /* Services */
    .services {
        padding: 100px 32px;
    }

    .section-header {
        margin: 0 auto 60px;
        padding: 0;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Threat Intel */
    .threat-section {
        padding: 100px 32px;
    }

    .threat-inner {
        gap: 60px;
    }

    /* Blog */
    .blog-section {
        padding: 100px 32px;
    }

    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .blog-card--featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* CTA */
    .cta-section {
        padding: 100px 32px;
    }

    /* Footer */
    footer {
        padding: 60px 32px 40px;
    }

    .footer-inner {
        gap: 40px;
    }

    /* Container */
    .container {
        padding: 0 32px;
    }

    /* Blog archive */
    .blog-archive-layout {
        grid-template-columns: 1fr 280px;
        gap: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET PORTRAIT  —  768px and below
   (iPad mini/Air portrait, Android tablets, large phones landscape)
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

    /* ── Nav ── */
    nav {
        padding: 16px 20px;
        position: fixed;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(6, 13, 31, 0.98);
        border-bottom: 1px solid rgba(26, 107, 255, 0.15);
        padding: 16px 20px 20px;
        flex-direction: column;
        gap: 0;
        z-index: 99;
        /* Safari needs explicit backdrop */
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        padding: 14px 0;
        font-size: 15px;
        color: var(--white-dim);
    }

    /* Show hamburger */
    .nav-hamburger {
        display: flex;
    }

    /* ── Hero ── */
    .hero {
        min-height: auto;
        padding: 100px 20px 60px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-desc {
        max-width: 100%;
        font-size: 16px;
    }

    .hero-actions {
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 14px 24px;
        font-size: 12px;
    }

    /* Hide the ECG monitor card on tablet portrait to keep hero clean */
    .hero-visual {
        display: none;
    }

    /* ── Stats ── */
    .stats-bar {
        padding: 36px 20px;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-item {
        padding: 16px 12px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
    }

    .stat-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stat-item:last-child,
    .stat-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

    /* ── Section shared ── */
    .section-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 48px;
        padding: 0 20px;
    }

    .section-title {
        font-size: clamp(26px, 5vw, 36px);
    }

    /* ── Services ── */
    .services {
        padding: 72px 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 32px 24px;
    }

    /* ── Threat Intel ── */
    .threat-section {
        padding: 72px 20px;
    }

    .threat-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Truncate terminal on tablet to avoid overflow */
    .terminal-body {
        padding: 18px;
        font-size: 12px;
    }

    /* ── Blog ── */
    .blog-section {
        padding: 72px 20px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-card--featured {
        grid-row: auto;
        padding: 28px;
    }

    .blog-card {
        padding: 24px;
    }

    .blog-newsletter {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
        gap: 24px;
    }

    .newsletter-input-wrap {
        width: 100%;
    }

    .newsletter-input {
        width: 100%;
        flex: 1;
    }

    /* ── CTA ── */
    .cta-section {
        padding: 80px 20px;
    }

    .cta-title {
        font-size: clamp(28px, 6vw, 44px);
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-actions .btn-primary,
    .cta-actions .btn-secondary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        text-align: center;
    }

    /* ── Footer ── */
    footer {
        padding: 48px 20px 32px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* ── Blog archive ── */
    .container {
        padding: 0 20px;
    }

    .blog-archive-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        display: none;
    }

    .blog-card--list {
        grid-template-columns: 1fr;
    }

    .blog-card--list .blog-card-thumb {
        height: 200px;
        overflow: hidden;
    }

    .blog-card--list .blog-card-thumb img {
        height: 100%;
        object-fit: cover;
    }

    /* ── Single post ── */
    .single-post {
        padding: 0 0 60px;
    }

    .post-header {
        padding: 40px 0 28px;
    }

    .post-author-bar {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav-next {
        text-align: left;
        align-items: flex-start;
    }

    .post-cta-strip {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Standard pages ── */
    .standard-page,
    .single-post-page,
    .blog-archive-page,
    .error-404-page {
        padding-top: 100px;
    }

    .page-content-wrap {
        padding: 40px 0 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LARGE  —  480px and below
   (Most phones in portrait: iPhone 14, Pixel 7, Samsung S series)
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {

    /* ── Nav ── */
    nav {
        padding: 14px 16px;
    }

    .logo-text {
        font-size: 15px;
    }

    /* Hide ECG SVG on very small screens to save space */
    .nav-logo svg {
        display: none;
    }

    .nav-cta {
        padding: 8px 14px;
        font-size: 11px;
    }

    /* ── Hero ── */
    .hero {
        padding: 90px 16px 52px;
    }

    .hero-eyebrow {
        font-size: 10px;
    }

    .hero-title {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.05;
    }

    .hero-desc {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 15px 20px;
    }

    /* ── Stats ── */
    .stats-bar {
        padding: 28px 16px;
    }

    /* Stack to 1-col on very small phones */
    .stats-inner {
        grid-template-columns: 1fr !important;
    }

    .stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 16px 0;
    }

    .stat-item:last-child {
        border-bottom: none !important;
    }

    .stat-num {
        font-size: 28px !important;
    }

    /* ── Sections ── */
    .services {
        padding: 60px 16px;
    }

    .threat-section {
        padding: 60px 16px;
    }

    .blog-section {
        padding: 60px 16px;
    }

    .cta-section {
        padding: 64px 16px;
    }

    .section-header {
        padding: 0;
    }

    /* ── Service cards ── */
    .service-card {
        padding: 28px 20px;
    }

    .service-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
    }

    .service-title {
        font-size: 18px;
    }

    /* ── Terminal ── */
    .terminal {
        font-size: 11px;
    }

    .terminal-body {
        padding: 14px;
        font-size: 11px;
        line-height: 1.6;
    }

    /* ── Blog ── */
    .blog-card--featured {
        padding: 20px;
    }

    .blog-card {
        padding: 20px;
    }

    .blog-card--featured .blog-card-title {
        font-size: 20px;
    }

    .blog-newsletter {
        padding: 20px 16px;
    }

    .newsletter-input-wrap {
        flex-direction: column;
        gap: 8px;
    }

    .newsletter-input {
        border-right: 1px solid rgba(26, 107, 255, 0.2);
    }

    .newsletter-btn {
        width: 100%;
        padding: 14px;
    }

    /* ── CTA ── */
    .cta-title {
        font-size: clamp(24px, 7vw, 36px);
    }

    .cta-desc {
        font-size: 15px;
    }

    /* ── Footer ── */
    footer {
        padding: 40px 16px 28px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand {
        grid-column: 1;
    }

    /* ── Post content ── */
    .post-content {
        font-size: 16px;
    }

    .post-content h2 {
        font-size: 22px;
    }

    .post-content h3 {
        font-size: 18px;
    }

    .post-content pre {
        padding: 16px;
        font-size: 12px;
    }

    .post-content blockquote {
        font-size: 16px;
    }

    .container {
        padding: 0 16px;
    }

    /* 404 page */
    .error-404-page .container {
        padding: 120px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL PHONE  —  375px and below
   (iPhone SE, older Androids)
═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 375px) {

    .hero-title {
        font-size: 30px;
    }

    .logo-text {
        font-size: 14px;
    }

    .nav-cta {
        display: none; /* hide CTA button, menu handles conversion on very small screens */
    }

    .blog-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .section-title {
        font-size: 24px;
    }

    .stats-inner {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONES  —  short viewport, wide
   (iPhone in landscape, small Android landscape)
═══════════════════════════════════════════════════════════════ */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .hero {
        min-height: auto;
        padding: 80px 24px 48px;
    }

    nav {
        padding: 10px 20px;
    }

    .hero-title {
        font-size: clamp(28px, 5vw, 40px);
    }

    .hero-visual {
        display: none;
    }

    .cta-section {
        padding: 60px 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HIGH-DPI / RETINA  —  crisp rendering
═══════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    /* Slightly thinner borders look better on retina */
    nav {
        border-bottom-width: 0.5px;
    }

    .monitor-card::before,
    .service-card::before,
    .blog-card-accent {
        /* Already pixel-perfect due to CSS, no changes needed */
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT  —  basic print styles
═══════════════════════════════════════════════════════════════ */
@media print {

    body {
        background: #fff;
        color: #000;
    }

    nav,
    .hero-visual,
    .glow-red,
    .glow-blue,
    .cta-section,
    .blog-newsletter,
    footer {
        display: none;
    }

    .hero {
        padding: 40px 0;
        min-height: auto;
    }

    .hero-title,
    .section-title {
        color: #000;
        -webkit-text-fill-color: #000;
    }

    a {
        color: #1a6bff;
    }

    .post-content {
        color: #333;
        font-size: 12pt;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BROWSER-SPECIFIC FIXES
═══════════════════════════════════════════════════════════════ */

/* Safari — fix flex gap on older iOS */
@supports (-webkit-touch-callout: none) {
    .hero-actions {
        gap: 12px;
    }

    /* Safari ignores gap on some flex containers — use margin fallback */
    .nav-links li + li {
        margin-left: 0;
    }

    /* Fix sticky footer in Safari */
    .sidebar-cta {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Firefox — scrollbar styling */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(26, 107, 255, 0.3) rgba(6, 13, 31, 0.5);
    }
}

/* Chrome/Edge — scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(6, 13, 31, 0.8);
}

::-webkit-scrollbar-thumb {
    background: rgba(26, 107, 255, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 107, 255, 0.6);
}

/* Samsung Internet — ensure transforms work */
.service-card,
.blog-card,
.btn-primary {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Edge Legacy — gradient text fallback */
@supports (-ms-ime-align: auto) {
    .stat-num {
        background: none !important;
        -webkit-text-fill-color: var(--blue-bright) !important;
        color: var(--blue-bright) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS & ACCESSIBILITY
   Visible focus rings for keyboard navigation on all browsers
═══════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 3px;
}

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-cta:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(26, 107, 255, 0.2);
}

/* Skip to content link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--blue);
    color: var(--white);
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 13px;
    z-index: 9999;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NAV SCROLL STATE
   Applied via JS when user scrolls past hero
═══════════════════════════════════════════════════════════════ */
nav.nav--scrolled {
    background: rgba(6, 13, 31, 0.98);
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}