/* =============================================================================
   footer.css — site-wide footer component
   Reusable across every page. Fills the empty <footer class="site-footer">
   that already exists as the last child of .content-area on every page
   (see css/layout.css) — no new structural wrapper or width rule is added
   here, so the footer automatically shares the exact same horizontal
   bounds (24px mobile padding; sidebar-offset + 72px margin on desktop)
   as every other piece of page content. That is what "same content width
   used throughout the site" means in practice on this codebase.

   Reuses, rather than reinvents:
     - Typography  — 14px/Regular Gray-200/White is the same scale used by
                      .nav-list a (nav.css) and body copy throughout.
     - Logo style  — .site-footer__logo copies .header-desktop__logo
                      (header-desktop.css) verbatim: 16px/500/white,
                      0.02em letter-spacing, 0.7 opacity on hover.
     - Divider     — .site-footer__divider copies .faq__divider (faq.css),
                      the one divider pattern already established sitewide:
                      1px solid Gray-300, no border, no shadow.
     - Row layout  — desktop columns use display:flex + justify-content:
                      space-between, the same technique .header-desktop
                      uses for its own two-zone row (header-desktop.css).
     - Nav links   — Column 2 reuses .nav-list (nav.css) directly, unchanged.

   No new colors, gradients, border-radius, or shadow are introduced.

   Component ownership:
     .site-footer__divider       — 1px top divider + secondary-bar divider
     .site-footer__divider--contact — extra mobile-only divider between the
                                    nav column and the contact column
     .site-footer__columns       — 3-column row (desktop) / stacked (mobile)
     .site-footer__col           — one column; --brand modifier tightens its internal gap
     .site-footer__logo          — wordmark, matches header-desktop__logo
     .site-footer__description   — one-line description under the logo;
                                    also carries .gradient-text (globals.css)
                                    for the pink-to-grey fill
     .site-footer__contact-list  — Email / Phone / Instagram list (col 3)
     .site-footer__email         — underlined text-link treatment, Grey 100, Semibold
     .site-footer__phone         — Semibold, Grey 100 — matches .site-footer__email
                                    exactly (color, weight, size, hover)
     .site-footer__social        — Instagram row wrapper; label uses
                                    .gradient-text (globals.css), Semibold
     .site-footer__social-icon   — Instagram icon; inline <svg> with an
                                    inline <linearGradient> fill (see below —
                                    not .icon-mask/mask-image any more)
     .site-footer__bottom        — secondary bar: copyright + legal links
     .site-footer__copyright
     .site-footer__legal         — Privacy / Cookie / Terms list
   ============================================================================= */


/* ── Divider ──────────────────────────────────────────────────────────────────
 * Identical values to .faq__divider (css/components/faq.css) — the one
 * divider style already used on the site. Reused verbatim, just renamed
 * to this component's own class.
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-300); /* #858585 — matches .faq__divider */
  border: none;
  margin: 0;
}

/* ── Contact divider (mobile only) ───────────────────────────────────────────
 * Extra divider between the nav column and the contact column, inserted as
 * a direct child of .site-footer__columns so it automatically picks up
 * that container's own `gap` for spacing — no separate margin needed here.
 * Hidden on desktop: columns become a side-by-side row there
 * (.site-footer__columns' own @media block above), where a horizontal
 * rule between two columns wouldn't read correctly.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .site-footer__divider--contact {
    display: none;
  }
}


/* ── Column row ───────────────────────────────────────────────────────────────
 * Mobile: stacked column groups — tightened from 48px to a more compact
 * 24px gap (and padding from 32px to 24px each side) as part of the footer
 * density pass, so the footer occupies noticeably less vertical space on
 * mobile. Desktop is unchanged (its own @media override below keeps the
 * original generous 64px values — a deliberate desktop spec, not part of
 * this mobile-density pass).
 * Desktop: a flex row with justify-content: space-between — the same
 * technique .header-desktop uses for its own logo/CTA row — giving each
 * column generous, balanced whitespace without hardcoding pixel widths.
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                 /* 24px — was 48px (var(--space-12)) */
  padding-top: var(--space-6);         /* 24px — was 32px (var(--space-8)) */
  padding-bottom: var(--space-6);      /* 24px — was 32px (var(--space-8)) */
}

@media (min-width: 1024px) {
  .site-footer__columns {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);              /* 64px generous gap between columns */
    padding-top: var(--space-16);      /* 64px — generous vertical padding per spec */
    padding-bottom: var(--space-16);   /* 64px */
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                 /* 16px — matches .nav-list's own internal gap */
  margin: 0;
  padding: 0;
}

/* Column 1 (logo + description) — no max-width here on purpose: the
   description is a single short sentence (~58 characters) and must stay
   on one line per spec. Flex items default to their max-content width, so
   leaving this unconstrained is what keeps it from wrapping; capping it
   (e.g. to a round 320px) would force an unwanted second line. */
.site-footer__col--brand {
  gap: var(--space-2);                 /* 8px between logo and description — matches label→value spacing elsewhere (e.g. .contact__value) */
}


/* ── Logo (Column 1) ─────────────────────────────────────────────────────────
 * Copied verbatim from .header-desktop__logo (header-desktop.css) — same
 * wordmark treatment, reused rather than redefined.
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__logo {
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__logo:hover {
  opacity: 0.7;                        /* matches .header-desktop__logo:hover */
}


/* ── Description (Column 1) ──────────────────────────────────────────────────
 * Same 14px/Regular/Gray-100 scale used for supporting copy throughout
 * the site (e.g. .contact__heading, .artwork-story__body).
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__description {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;
  color: var(--color-gray-100);        /* #B8B8B8 — fallback for browsers without background-clip: text support; see .gradient-text override below */
  line-height: 1.5rem;                 /* 24px */
  margin: 0;
}

/*
 * Applies the sitewide .gradient-text utility (globals.css) — the same
 * pink-to-grey --gradient-accent treatment already defined there — to this
 * sentence only. A compound selector is required rather than relying on
 * the plain .gradient-text rule alone: both this class and .gradient-text
 * set `color` at equal (single-class) specificity, and this file loads
 * after globals.css, so without this override this rule's own `color:
 * var(--color-gray-100)` above would win the cascade and silently cancel
 * the gradient's transparent fill in browsers that key off `color` rather
 * than -webkit-text-fill-color. Font-size, weight, and line-height are
 * untouched — only the text fill changes.
 */
.site-footer__description.gradient-text {
  color: transparent;
}


/* ── Navigation (Column 2) ───────────────────────────────────────────────────
 * No rules needed here — the <ul> reuses .nav-list (nav.css) directly,
 * unmodified: 14px/Regular/Gray-200 links, 16px gap, white on hover.
 * ─────────────────────────────────────────────────────────────────────────── */


/* ── Contact list (Column 3) ─────────────────────────────────────────────────
 * Same visual values as .nav-list (nav.css), written out here rather than
 * sharing the class since this list isn't page navigation (different
 * semantics/aria), but the type scale, color, spacing, and hover state
 * are identical on purpose.
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                 /* 12px — was 16px (var(--space-4)); tightened for the footer density pass */
  margin: 0;
  padding: 0;
}

.site-footer__contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                 /* 8px — icon-to-label gap, matches .contact__value-row */
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px — matches .nav-list a */
  font-weight: 400;
  color: var(--color-gray-200);        /* matches .nav-list a */
  text-decoration: none;
  transition: color 200ms ease-out, opacity 200ms ease-out; /* shared hover-animation timing, matches .artwork-card__cta's desktop hover transition */
}

.site-footer__contact-list a:hover {
  color: var(--color-white);           /* matches .nav-list a:hover — still the Phone link's only hover treatment */
}

/* Shared focus-visible ring for every link in this list (Email, Phone,
   Instagram) — matches the sitewide pattern (.btn-action:focus-visible in
   contact.css). Previously undefined for this list entirely. */
.site-footer__contact-list a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Email ────────────────────────────────────────────────────────────────
 * Styled as the same underlined text-link pattern recently introduced for
 * .artwork-card__cta on the Artwork Detail page: a subtle underline, no
 * icon/arrow, Grey 100 — now Semibold instead of Regular, per the latest
 * pass. href is already a real mailto: link (unchanged — it always was).
 * Two classes needed to outrank the plain ".site-footer__contact-list a"
 * rule above regardless of source order.
 * ───────────────────────────────────────────────────────────────────────── */
.site-footer__contact-list .site-footer__email {
  color: var(--color-gray-100);        /* #B8B8B8 — was inherited gray-200 */
  font-weight: 600;                    /* Semibold — was inherited 400 (Regular) */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Phone ────────────────────────────────────────────────────────────────
 * Now matches .site-footer__email exactly — color, weight, size, and hover
 * — so it reads as part of the same contact block instead of visually
 * weaker. Previously only font-weight was overridden here, leaving color
 * inherited from the plain ".site-footer__contact-list a" rule above
 * (Grey 200, a step darker/more muted than Email's Grey 100) — that
 * mismatch was the actual bug. Size (14px), font-family, and letter-
 * spacing were already identical via that same shared base rule and
 * needed no change. No underline, unlike Email — that's a deliberate
 * difference (Email is styled as a text link; Phone reads as plain
 * contact info), not part of the "weaker" complaint.
 * ───────────────────────────────────────────────────────────────────────── */
.site-footer__contact-list .site-footer__phone {
  color: var(--color-gray-100);        /* #B8B8B8 — was inherited gray-200; now matches .site-footer__email */
  font-weight: 600;                    /* Semibold — was inherited 400 (Regular) */
}

/* ── Instagram ────────────────────────────────────────────────────────────
 * Label text uses .gradient-text (globals.css) — the same pink-to-grey
 * --gradient-accent treatment as the Column 1 tagline — applied via the
 * compound override below for the same cascade-order reason documented on
 * .site-footer__description.gradient-text above.
 *
 * The icon was previously a .icon-mask (globals.css) span with
 * mask-image: url("../../assets/icons/icon instagram.svg") driving a
 * var(--gradient-accent) background — the same technique later found to
 * silently fail for the artwork-nav chevrons: this project has no dev
 * server, pages are opened via file://, and the icon filename contains a
 * space ("icon instagram.svg"), which is an unreliable combination for a
 * CSS-triggered external file fetch. When the mask failed to load, the
 * span painted nothing, showing the page's near-black background through
 * it — exactly the "Instagram icon renders black" symptom reported here.
 *
 * Fixed the same way the chevrons were: inlined the icon directly in the
 * page markup (same path data as assets/icons/icon instagram.svg — no new
 * icon drawn), removing the external-fetch step entirely. The gradient
 * fill itself is now a real inline SVG <linearGradient> (x1/y1 0% to x2/y2
 * 100% = a top-left-to-bottom-right diagonal, the geometric equivalent of
 * --gradient-accent's 135deg for a square icon), with its two <stop>
 * colors set via CSS classes below reading the same --color-rose-400 /
 * --color-gray-200 tokens --gradient-accent itself is built from — so the
 * icon and the "Instagram" label are driven by the identical color tokens,
 * not just a visual approximation. Label is Semibold, per an earlier pass.
 * ───────────────────────────────────────────────────────────────────────── */
.site-footer__contact-list .site-footer__social.gradient-text {
  color: transparent;
}

.site-footer__contact-list .site-footer__social {
  font-weight: 600;                    /* Semibold — was inherited 400 (Regular) */
}

.site-footer__social-icon {
  width: 24px;                         /* matches the site's icon system (icon phone.svg, icon whatsapp.svg, etc.) */
  height: 24px;
  flex-shrink: 0;
}

/* The gradient's two stops — same tokens --gradient-accent (tokens.css) is
   built from, so the icon fill is a genuine match with the label's
   gradient-text fill, not a separate hardcoded gradient. */
.site-footer__social-icon-stop-start {
  stop-color: var(--color-rose-400);
}

.site-footer__social-icon-stop-end {
  stop-color: var(--color-gray-200);
}

/* Email, Phone, and Instagram all share this opacity-based hover (rather
   than the plain color:white swap on the bare ".site-footer__contact-list
   a" rule above) — matches the existing .site-footer__logo hover pattern
   elsewhere in this file. Opacity works regardless of whether the
   underlying fill is a flat color or a background-clip/SVG gradient, so
   it's the one hover mechanism that behaves identically across all three
   — the same "single, well-balanced contact group" the resting-state
   color/weight match above is for. Phone joined this rule as part of the
   Email/Phone parity fix; it previously fell through to the plain
   color:white hover instead. */
.site-footer__contact-list a.site-footer__email:hover,
.site-footer__contact-list a.site-footer__phone:hover,
.site-footer__contact-list a.site-footer__social:hover {
  opacity: 0.7;
}

/* ── Secondary bar ────────────────────────────────────────────────────────────
 * Copyright (left on desktop) + legal links (right on desktop).
 * Mobile: both stack, legal links become a vertical list.
 * ─────────────────────────────────────────────────────────────────────────── */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                 /* 12px — was 16px (var(--space-4)); between copyright and legal links on mobile */
  padding-top: var(--space-4);         /* 16px — was 24px (var(--space-6)); below the secondary divider */
  padding-bottom: var(--space-4);      /* 16px — was 24px (var(--space-6)); bottom breathing room */
}

@media (min-width: 1024px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;    /* copyright left, legal links right */
  }
}

.site-footer__copyright {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;
  color: var(--color-gray-100);        /* #B8B8B8 */
  margin: 0;
}

.site-footer__legal {
  list-style: none;
  display: flex;
  flex-direction: column;              /* mobile: vertical list, per spec */
  gap: var(--space-3);                 /* 12px — was 16px (var(--space-4)); between stacked legal links on mobile */
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .site-footer__legal {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);               /* 24px — same fixed horizontal gap used for the Contact page's WhatsApp/Phone row */
  }
}

.site-footer__legal a {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px */
  font-weight: 400;
  color: var(--color-gray-200);        /* matches .nav-list a */
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: var(--color-white);           /* matches .nav-list a:hover */
}