/* ==========================================================================
   VELORA FOOTER — LAYER 2  (site-wide footer redesign)  2026-07-22
   Rebuilds the default Astra footer into the "candlelit spice table" system:
   warm near-black surface, a cropped girih seam in gold at the top edge, a
   visible cream wordmark, gold-disc social icons, a tidy multi-column link
   index, and a refined baseline bar.

   CSS-only: the Astra markup is fixed, so everything here is layout + colour +
   type over the existing DOM. Scoped to `.site-footer` — nothing leaks.
   Reversible: delete this whole file / its <link>.
   Tokens (--v-ink, --v-gold, --v-cream, --v-pine, --v-on-ink*) come from
   velora-global.css, loaded earlier.
   ========================================================================== */

/* ---------- Shell + top girih seam --------------------------------------- */
.site-footer#colophon{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* a faint warm lift so the slab isn't dead-flat black */
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(231,167,60,.10), transparent 60%),
    var(--v-ink) !important;
  padding-block: clamp(3.25rem, 5.5vw, 5.5rem) 0 !important;
}
/* Cropped, faded girih lattice woven across the top seam (the "zari thread").
   One motif, edge-cropped and masked to nothing — texture, not wallpaper. */
.site-footer#colophon::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:190px; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%3E%3Cg%20fill='none'%20stroke='%23e7a73c'%20stroke-width='1'%3E%3Cpolygon%20points='17.6,0%2042.4,0%2060,17.6%2060,42.4%2042.4,60%2017.6,60%200,42.4%200,17.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:58px 58px;
  opacity:.08;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
  pointer-events:none;
}
/* Gold hairline that reads as the seam itself. */
.site-footer#colophon::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(231,167,60,.55) 18%, rgba(242,189,87,.85) 50%, rgba(231,167,60,.55) 82%, transparent);
  pointer-events:none;
}

/* ---------- Layout: constrain + rebalance the two columns ---------------- */
/* Astra renders both footer rows as a "content grid" that pins the inner
   container to a narrow (~742px) track. Drop it back to a plain block so our
   own max-width container can breathe to the full brand width. */
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap{
  display:block !important;
  background:transparent !important;
}
.site-footer .ast-builder-grid-row-container-inner{
  width:100%; max-width:1180px; margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.5rem);
}
.site-footer .site-primary-footer-inner-wrap.ast-builder-grid-row{
  width:100% !important;
  grid-template-columns:minmax(230px, 0.85fr) minmax(0, 1.6fr) !important;
  gap:clamp(2rem, 5vw, 4.5rem) !important;
  align-items:start !important;
  justify-items:stretch !important;
  padding-block: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem);
}

/* ---------- Brand column (logo · tagline · social · giving) -------------- */
.site-footer .site-footer-primary-section-1{
  display:flex; flex-direction:column; gap:1.5rem;
}
.site-footer .site-footer-primary-section-1 .footer-widget-area-inner{ margin:0; }

/* Logo: make it cream + visible (the widget img isn't .custom-logo, so the
   global filter never reached it), left-aligned, sensible size. */
.site-footer #block-19 figure.wp-block-image{ margin:0; text-align:left; }
.site-footer #block-19 img{
  width:150px !important; height:auto !important;
  filter:var(--v-logo-cream);
  opacity:.96;
}
/* Woven tagline beneath the wordmark (brand copy, verbatim from PRODUCT.md). */
.site-footer #block-19 figure.wp-block-image::after{
  content:"Saffron green tea, woven by hand — one blend, made in small batches.";
  display:block; max-width:30ch;
  margin-top:1.1rem;
  font-family:"Spectral",Georgia,serif;
  font-size:.92rem; line-height:1.6; font-style:italic;
  color:var(--v-on-ink-dim);
}

/* Social: horizontal row of gold-outline discs that fill on hover. */
.site-footer .wp-block-social-links{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap;
  justify-content:flex-start !important;
  gap:.65rem !important; margin:0 !important; padding:0 !important;
}
.site-footer .wp-social-link{
  margin:0 !important; padding:0 !important; background:none !important;
}
.site-footer .wp-social-link a.wp-block-social-link-anchor{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  border:1px solid rgba(231,167,60,.40);
  border-radius:50%;
  background:transparent;
  transition:background-color .35s var(--v-ease), border-color .35s var(--v-ease),
             transform .35s var(--v-ease);
}
.site-footer .wp-social-link svg{
  width:18px; height:18px;
  fill:var(--v-cream) !important;
  transition:fill .35s var(--v-ease);
}
.site-footer .wp-social-link a.wp-block-social-link-anchor:hover,
.site-footer .wp-social-link a.wp-block-social-link-anchor:focus-visible{
  background:var(--v-gold);
  border-color:var(--v-gold);
  transform:translateY(-2px);
}
.site-footer .wp-social-link a.wp-block-social-link-anchor:hover svg,
.site-footer .wp-social-link a.wp-block-social-link-anchor:focus-visible svg{
  fill:var(--v-ink) !important;
}

/* Giving microline — pinned under the social row (brand's 1% promise). */
.site-footer .site-footer-primary-section-1 .footer-widget-area:last-of-type::after{
  content:"1% of profits support at-risk academics.";
  display:block; margin-top:1.35rem; max-width:28ch;
  font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.06em;
  color:var(--v-on-ink-dim);
}

/* ---------- Link index (the 12-item nav → tidy 3 columns) ---------------- */
.site-footer .site-footer-primary-section-2{ padding-top:.2rem; }
/* One quiet label to title the index (single kicker, not per-section grammar) */
.site-footer .site-footer-primary-section-2 .footer-widget-area::before{
  content:"Explore";
  display:block; margin-bottom:1.15rem;
  font-family:"Jost",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--v-gold);
}
/* Force the Astra nav wrapper chain to full width so the columns span the whole
   track (they were being shrunk to content-width by an inline-flex ancestor). */
.site-footer .site-footer-primary-section-2 .footer-widget-area,
.site-footer .footer-bar-navigation,
.site-footer nav.footer-navigation,
.site-footer .footer-nav-wrap{
  width:100% !important; display:block !important; flex:none !important;
}
.site-footer #astra-footer-menu{
  display:block !important;          /* drop the flex-row dump */
  columns:3; column-gap:clamp(1.5rem, 3vw, 3rem);
  width:100%; max-width:none;
}
.site-footer #astra-footer-menu .menu-item{
  display:block; break-inside:avoid; margin:0;
}
.site-footer #astra-footer-menu a.menu-link{
  position:relative;
  display:inline-block; padding:.42rem 0;
  font-family:"Jost",sans-serif; font-size:.9rem; font-weight:400;
  letter-spacing:.01em;
  color:var(--v-on-ink-dim) !important;
  transition:color .3s var(--v-ease);
}
/* underline that grows from the left on hover */
.site-footer #astra-footer-menu a.menu-link::after{
  content:""; position:absolute; left:0; bottom:.22rem;
  width:100%; height:1px; background:var(--v-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--v-ease);
}
.site-footer #astra-footer-menu a.menu-link:hover,
.site-footer #astra-footer-menu a.menu-link:focus-visible{
  color:var(--v-gold-bright) !important;
}
.site-footer #astra-footer-menu a.menu-link:hover::after,
.site-footer #astra-footer-menu a.menu-link:focus-visible::after{
  transform:scaleX(1);
}

/* ---------- Baseline bar (gold rule + copyright) ------------------------- */
/* Trim the wrap's default bottom padding so the rule sits closer to content. */
.site-footer .site-primary-footer-wrap{ padding-bottom:clamp(1rem,2vw,1.75rem) !important; }

/* Kill the pre-rebrand amber gradient still riding on the copyright band — a
   2026-07 "Additional CSS" leftover (`.ast-footer-copyright{background:
   linear-gradient(...!important)}`) that rendered as a gold bar at the very
   bottom. velora-global already neutralises #colophon/.site-*-footer-wrap;
   these three legacy targets were never covered. */
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-area,
.site-footer .ast-footer-wrap{
  background:transparent !important;
  background-image:none !important;
}

.site-footer .site-below-footer-wrap .ast-builder-grid-row-container-inner{
  border-top:1px solid rgba(231,167,60,.18);
}
/* The below-footer row is still a grid pinning copyright to a left ~600px cell;
   flatten it so the copyright can center under the full-width rule. */
.site-footer .site-below-footer-inner-wrap.ast-builder-grid-row{
  display:block !important; width:100% !important;
  padding-block:1.75rem !important;
}
.site-footer .site-footer-below-section-1,
.site-footer .ast-footer-copyright{
  display:block !important; width:100% !important;
}
.site-footer .ast-footer-copyright p{
  margin:0;
  font-family:"Jost",sans-serif;
  font-size:.78rem; letter-spacing:.06em;
  color:var(--v-on-ink-dim) !important;
  text-align:center !important;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:880px){
  .site-footer .site-primary-footer-inner-wrap.ast-builder-grid-row{
    grid-template-columns:1fr !important;
    gap:2.75rem !important;
  }
  .site-footer #astra-footer-menu{ columns:2; column-gap:1.75rem; }
}
@media (max-width:520px){
  .site-footer#colophon{ padding-top:2.75rem !important; }
  .site-footer #astra-footer-menu{ columns:1; }
  .site-footer #block-19 figure.wp-block-image::after{ max-width:38ch; }
}