/* ─────────────────────────────────────────
   common.css — shared header & footer styles
   Depends on: variables.css (colour tokens + semantic aliases)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   HEADER
   Default: logo centered, nav hidden
   Hover:   logo moves left, nav appears right
   data-theme="light": dark text on light sections
───────────────────────────────────────── */
    header {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      z-index: 1000;
      height: var(--header-height);
      background: transparent;
      transition:
        background      0.7s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }


    /* Inner container */
    .header-inner {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 var(--side-padding);
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
    }

    /* Logo — centered by default, moves left on hover */
    .header-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      transition:
        left      0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .header-logo-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 100px;
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 1px 1px 20px 2px rgba(16, 128, 185, 0.12);
      overflow: hidden;
      flex-shrink: 0;
    }

    .header-logo img {
      width: 32px;
      height: 32px;
      display: block;
    }

    header:hover .header-logo {
      left: var(--side-padding);
      transform: translateX(0);
    }

    /* Nav — hidden by default, appears on the right on hover */
    .header-nav {
      position: absolute;
      right: var(--side-padding);
      display: flex;
      align-items: center;
      gap: 40px;
      opacity: 0;
      pointer-events: none;
      transform: translateX(8px);
      transition:
        opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    header:hover .header-nav {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    /* Links */
    .header-nav a {
      color: var(--color-white);
      text-decoration: none;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      position: relative;
      transition: color 0.3s ease;
      -webkit-background-clip: text;
      background-clip: text;
    }

    .header-nav a:hover {
      color: transparent;
      background-image: linear-gradient(90deg, var(--color-sky-blue), var(--color-aqua-mint));
      -webkit-text-fill-color: transparent;
    }

    /* Underline: grows from left to right */
    .header-nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-sky-blue), var(--color-aqua-mint));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .header-nav a:hover::after { transform: scaleX(1); }

    /* Adaptive color on light sections */
    header[data-theme="light"] .header-nav a {
      color: var(--color-black);
      -webkit-text-fill-color: var(--color-black);
    }
    header[data-theme="light"] .header-nav a:hover {
      color: transparent;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(90deg, var(--color-sky-blue), var(--color-aqua-mint));
    }

    /* ── Mobile (incl. phones in landscape — short height) ── */
    /* Nav is hidden; logo stays centered */
    @media (max-width: 768px), (max-height: 599.98px) {
      :root { --side-padding: 24px; }

      .header-nav {
        display: none;
      }

      .header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      header:hover .header-logo {
        left: 50%;
        transform: translateX(-50%);
      }

      .header-inner { justify-content: center; }
    }


    /* ─────────────────────────────────────────
       FOOTER
       Mobile-first:  single column
       Tablet ≥768px: 2-column grid
       Desktop ≥1024px: full 120px padding
    ───────────────────────────────────────── */

    /* ── Mobile (default) ── */
    footer {
      border-top: 1px solid rgba(255,255,255,.06);
      padding: 48px 24px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .footer-logo-mark {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }

    .footer-logo-name {
      font-family: var(--font-alt);
      font-size: 20px;
      font-weight: 400;
      color: var(--color-white);
    }

    .footer-tagline {
      font-size: 14px;
      color: var(--color-cursive);
    }

    /* Links — in a column on mobile */
    .footer-nav {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .footer-nav-col {
      display: contents; /* both columns merge into a single flow */
    }

    /* Link hover animation similar to .header-nav a:
       blue→aqua gradient on text + left-to-right growing underline */
    .footer-nav-col a {
      display: inline-block;       /* so ::after fits the text width */
      align-self: flex-start;       /* underline fits the word width, not the entire column */
      font-size: 16px;
      font-weight: 400;
      color: var(--color-white);
      text-decoration: none;
      position: relative;
      transition: color 0.3s ease;
      -webkit-background-clip: text;
      background-clip: text;
    }

    .footer-nav-col a:hover {
      color: transparent;
      background-image: linear-gradient(90deg, var(--color-sky-blue), var(--color-aqua-mint));
      -webkit-text-fill-color: transparent;
    }

    .footer-nav-col a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-sky-blue), var(--color-aqua-mint));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .footer-nav-col a:hover::after { transform: scaleX(1); }

    .footer-copy {
      font-size: 14px;
      color: var(--color-cursive);
    }

    /* ── Tablet ≥768px (excl. phones in landscape — short height) ── */
    @media (min-width: 768px) and (min-height: 600px) {
      footer {
        padding: 60px 48px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 60px;
        row-gap: 40px;
      }

      .footer-brand {
        grid-column: 1;
        grid-row: 1 / 3;    /* spans both rows on the left */
        justify-content: space-between;
      }

      .footer-nav {
        grid-column: 2;
        grid-row: 1;
        flex-direction: row;
        gap: 60px;
      }

      .footer-nav-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .footer-copy {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
      }
    }

    /* ── Desktop ≥1024px ── */
    @media (min-width: 1024px) and (min-height: 600px) {
      footer {
        padding: 60px 120px;
        column-gap: 120px;
      }

      .footer-nav {
        gap: 80px;
      }
    }