/* ============================================================
   layout.css — Navigation, footer, page shell, grid patterns
   Scanmatics Website — Royal Blue & Cream startup aesthetic
   All colours use CSS custom properties from base.css
   ============================================================ */

@layer layout {

  /* ============================================================
     SITE HEADER & NAVIGATION — Glassy dark nav
     ============================================================ */

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: oklch(10% 0.05 var(--hue-primary) / 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-block-end: 1px solid var(--color-border);
    box-shadow: 0 1px 0 var(--color-border),
                0 4px 24px oklch(0% 0 0 / 0.25);
    transition: background var(--duration-base) var(--ease-out);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-block: var(--space-sm);
  }

  /* ── Logo ── */
  .nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-logo-mark {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background-color: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .nav-logo-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.3 3.8 64 64' fill='none'%3E%3Cg stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M19.2,20.2 A16,16,0,0,1,24.8,20.2 L23.9,25.2 A11,11,0,0,1,29.3,27.8 L32.6,24.0 A16,16,0,0,1,36.1,28.3 L31.7,30.7 A11,11,0,0,1,33.0,36.5 L38.0,36.8 A16,16,0,0,1,36.7,42.2 L32.1,40.3 A11,11,0,0,1,28.4,44.9 L31.3,49.0 A16,16,0,0,1,26.3,51.4 L25.0,46.6 A11,11,0,0,1,19.0,46.6 L17.7,51.4 A16,16,0,0,1,12.7,49.0 L15.6,44.9 A11,11,0,0,1,11.9,40.3 L7.3,42.2 A16,16,0,0,1,6.0,36.8 L11.0,36.5 A11,11,0,0,1,12.3,30.7 L7.9,28.3 A16,16,0,0,1,11.4,24.0 L14.7,27.8 A11,11,0,0,1,20.1,25.2 Z'/%3E%3Ccircle cx='22' cy='36' r='7'/%3E%3Cpath d='M36,28 L46,28'/%3E%3Cpath d='M38,37 L50,37'/%3E%3Cpath d='M32,46 L44,46'/%3E%3C/g%3E%3Ccircle cx='46' cy='28' r='3' fill='%23000'/%3E%3Ccircle cx='50' cy='37' r='3' fill='%23000'/%3E%3Ccircle cx='44' cy='46' r='3' fill='%23000'/%3E%3C/svg%3E") 56% center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.3 3.8 64 64' fill='none'%3E%3Cg stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M19.2,20.2 A16,16,0,0,1,24.8,20.2 L23.9,25.2 A11,11,0,0,1,29.3,27.8 L32.6,24.0 A16,16,0,0,1,36.1,28.3 L31.7,30.7 A11,11,0,0,1,33.0,36.5 L38.0,36.8 A16,16,0,0,1,36.7,42.2 L32.1,40.3 A11,11,0,0,1,28.4,44.9 L31.3,49.0 A16,16,0,0,1,26.3,51.4 L25.0,46.6 A11,11,0,0,1,19.0,46.6 L17.7,51.4 A16,16,0,0,1,12.7,49.0 L15.6,44.9 A11,11,0,0,1,11.9,40.3 L7.3,42.2 A16,16,0,0,1,6.0,36.8 L11.0,36.5 A11,11,0,0,1,12.3,30.7 L7.9,28.3 A16,16,0,0,1,11.4,24.0 L14.7,27.8 A11,11,0,0,1,20.1,25.2 Z'/%3E%3Ccircle cx='22' cy='36' r='7'/%3E%3Cpath d='M36,28 L46,28'/%3E%3Cpath d='M38,37 L50,37'/%3E%3Cpath d='M32,46 L44,46'/%3E%3C/g%3E%3Ccircle cx='46' cy='28' r='3' fill='%23000'/%3E%3Ccircle cx='50' cy='37' r='3' fill='%23000'/%3E%3Ccircle cx='44' cy='46' r='3' fill='%23000'/%3E%3C/svg%3E") 56% center / contain no-repeat;
  }

  .nav-logo-text {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-heading);
    letter-spacing: -0.03em;
  }

  .nav-logo-text span {
    color: inherit;
  }

  /* ── Desktop nav links ── */
  .nav-links {
    display: none;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
  }

  .nav-links a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-text-steel);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }

  .nav-links a:hover {
    color: var(--color-text);
    background-color: oklch(26% 0.05 var(--hue-primary) / 0.6);
  }

  .nav-links a[aria-current="page"] {
    color: var(--color-accent-light);
    background-color: var(--color-accent-subtle);
  }

  /* ── Nav CTA ── */
  .nav-cta {
    display: inline-flex;
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  /* ── Mobile menu toggle ── */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
  }

  .nav-toggle:hover {
    background-color: oklch(22% 0.05 var(--hue-primary) / 0.6);
    border-color: oklch(35% 0.05 var(--hue-primary) / 0.6);
  }

  .nav-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
  }

  /* ── Mobile menu drawer ── */
  .nav-mobile {
    display: none;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-sm);
    border-block-start: 1px solid var(--color-border);
  }

  .nav-mobile.is-open {
    display: flex;
  }

  .nav-mobile a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-steel);
    font-size: var(--text-base);
    font-weight: 500;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }

  .nav-mobile a:hover {
    color: var(--color-text);
    background-color: oklch(22% 0.05 var(--hue-primary) / 0.6);
  }

  .nav-mobile a[aria-current="page"] {
    color: var(--color-accent-light);
    background-color: var(--color-accent-subtle);
  }

  .nav-mobile .btn-primary {
    margin-inline: var(--space-md);
    margin-block-start: var(--space-xs);
    text-align: center;
    display: block;
  }

  /* ── Desktop breakpoint: show links, hide toggle ── */
  @media (min-width: 68rem) {
    .nav-links    { display: flex; margin-inline-start: auto; }
    .nav-cta      { margin-inline-start: 0; }
    .nav-toggle   { display: none; }
    .nav-mobile   { display: none !important; }
  }


  /* ============================================================
     SITE FOOTER — Deep dark with cream/blue accents
     ============================================================ */

  .site-footer {
    background-color: var(--color-bg-footer);
    color: var(--color-text-steel);
    padding-block-start: var(--space-3xl);
    padding-block-end: var(--space-xl);
    margin-block-start: auto;
    border-block-start: 1px solid var(--color-border-mid);
  }

  .footer-grid {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .footer-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 60rem) {
    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  .footer-brand p {
    margin-block-start: var(--space-sm);
    font-size: var(--text-sm);
    line-height: 1.7;
    max-width: 30ch;
    color: var(--color-text-steel);
  }

  .footer-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: var(--space-md);
  }

  .footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .footer-links a {
    color: var(--color-text-steel);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .footer-links a:hover {
    color: var(--color-accent-light);
  }

  .footer-bottom {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid oklch(20% 0.05 var(--hue-primary) / 0.5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-steel);
  }

  .footer-bottom-links {
    display: flex;
    gap: var(--space-md);
    list-style: none;
  }

  .footer-bottom-links a {
    color: var(--color-text-steel);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .footer-bottom-links a:hover {
    color: var(--color-accent-light);
  }


  /* ============================================================
     PAGE SHELLS & LAYOUT PATTERNS
     ============================================================ */

  /* ── Main site layout ── */
  .site-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .site-main {
    flex: 1;
  }

  /* ── Page hero (inner pages) — gradient mesh + dot grid ── */
  .page-hero {
    background:
      linear-gradient(
        160deg,
        oklch(10% 0.05 var(--hue-primary)) 0%,
        oklch(15% 0.05 var(--hue-primary)) 50%,
        oklch(12% 0.06 calc(var(--hue-primary) + 10)) 100%
      );
    padding-block: var(--space-4xl);
    position: relative;
    overflow: hidden;
  }

  /* Dot grid overlay */
  .page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      oklch(63% 0.05 var(--hue-primary) / 0.12) 1px,
      transparent 1px
    );
    background-size: 28px 28px;
    pointer-events: none;
  }

  /* Ambient primary glow orb — animated */
  .page-hero::after {
    content: '';
    position: absolute;
    top: -12rem;
    right: -8rem;
    width: 38rem;
    height: 38rem;
    background: radial-gradient(
      circle,
      oklch(58% 0.26 var(--hue-primary) / 0.09) 0%,
      oklch(70% 0.18 var(--hue-tertiary) / 0.04) 40%,
      transparent 70%
    );
    pointer-events: none;
    animation: pulse-glow 8s ease-in-out infinite;
  }

  .page-hero .container { position: relative; z-index: 1; }

  .page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-light);
    margin-block-end: var(--space-md);
  }

  .page-hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
    flex-shrink: 0;
  }

  .page-hero h1 {
    color: var(--color-text-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 18ch;
  }

  .page-hero p {
    color: var(--color-text-steel);
    font-size: var(--text-lg);
    max-width: 52ch;
    margin-block-start: var(--space-md);
  }

  .page-hero .hero-actions {
    margin-block-start: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  /* ── Two-column content layout ── */
  .two-col {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (min-width: 48rem) {
    .two-col {
      grid-template-columns: 1fr 1fr;
    }

    .two-col.two-col--wide {
      grid-template-columns: 3fr 2fr;
    }

    .two-col.two-col--reverse > :first-child {
      order: 2;
    }
  }

  /* ── Three-column grid ── */
  .three-col {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .three-col { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .three-col { grid-template-columns: repeat(3, 1fr); }
  }

  /* ── Four-column grid ── */
  .four-col {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .four-col { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 60rem) {
    .four-col { grid-template-columns: repeat(4, 1fr); }
  }

  /* ── Article layout with sidebar ── */
  .article-layout {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (min-width: 60rem) {
    .article-layout {
      grid-template-columns: 1fr 16rem;
    }
  }

  /* ── Sticky sidebar ── */
  .sidebar-sticky {
    position: sticky;
    top: calc(4rem + var(--space-xl));
  }
}