/* ==========================================================================
   FORGYEN — Signature Footer (every page)
   Markup: templates/footer.html (rendered by tools/site_footer.py).
   Builds on main.css tokens. Scoped to .sf. Logical properties throughout,
   so an Arabic (RTL) page can mirror it without a second component.
   Structure: 1 Shell & atmosphere · 2 Signature · 3 Grid · 4 Brand
              5 Columns & links · 6 Social · 7 Bottom bar · 8 Page joins
              9 Responsive
   ========================================================================== */

/* 1. Shell & atmosphere ------------------------------------------------- */
/* Deep navy that starts on the same tone the Discovery Session ends on
   (--sf-top), then settles into obsidian. No dome, no overlap, no masks. */
.sf {
  --sf-top: #16233A;
  --sf-text: #F4F1EC;
  --sf-muted: #AEB8C6;
  --sf-soft: #C4CCD7;
  --sf-line: rgba(255, 255, 255, 0.14);
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--sf-text);
  background:
    radial-gradient(60% 45% at 88% 100%, rgba(40, 74, 99, 0.26), transparent 72%),
    linear-gradient(180deg, var(--sf-top) 0%, #121E33 30%, #0E1829 62%, #0B1320 100%);
}
.sf__inner {
  position: relative;
  padding-block: clamp(48px, 5vw, 72px) 0;
}

/* 2. Signature ----------------------------------------------------------- */
.sf__signature {
  margin: 0;
  color: var(--sf-text);
  font-size: clamp(2.25rem, 1rem + 3.2vw, 4rem);          /* 36 → 64 */
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.038em;
}
.sf__signature-line { display: block; }
.sf__accent { color: #C98245; }

/* 3. Grid ---------------------------------------------------------------- */
.sf__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  margin-block-start: clamp(34px, 3.2vw, 46px);
  padding-block: clamp(40px, 3.6vw, 52px) clamp(36px, 3vw, 44px);
  border-block-start: 1px solid var(--sf-line);
}

/* 4. Brand --------------------------------------------------------------- */
.sf__brand { padding-inline-end: clamp(24px, 4vw, 64px); }
.sf__logo { display: inline-block; border-radius: 6px; }
.sf__logo img { display: block; width: clamp(200px, 18vw, 250px); height: auto; }
.sf__descriptor {
  margin: 14px 0 0;
  color: var(--sf-soft);
  font-size: 1.0625rem;
  letter-spacing: 0.015em;
}
.sf__about {
  max-width: 30em;
  margin: 16px 0 0;
  color: var(--sf-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.sf__place {
  margin: 20px 0 0;
  color: #D8DDE4;
  font-size: 0.9375rem;
  letter-spacing: 0.32em;
}
.sf__dot { margin-inline: 0.2em; color: rgba(255, 255, 255, 0.6); }

/* 5. Columns & links ----------------------------------------------------- */
.sf__heading {
  margin: 4px 0 0;
  color: var(--sf-text);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.sf__heading::after {                          /* short copper rule */
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-block-start: 14px;
  border-radius: 2px;
  background: var(--fg-copper);
}
.sf__links {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.sf__links li + li { margin-block-start: 4px; }
.sf__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--sf-soft);
  font-size: 1.0625rem;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color var(--fg-dur-micro) var(--fg-ease);
}
a.sf__link:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(201, 130, 69, 0.8); text-decoration-thickness: 1px; }
.sf a:focus-visible { outline: 2px solid #D9965A; outline-offset: 4px; border-radius: 3px; }
/* not published yet: shown in place, quietly, and not interactive */
.sf__link.is-pending { color: #8D98A8; cursor: default; }

/* 6. Social -------------------------------------------------------------- */
.sf__social {
  display: flex;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.sf__social-item {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-inline-start: -8px;                  /* optical: icons sit on the column edge */
  border-radius: 10px;
  color: #CDD4DE;
  transition: color var(--fg-dur-micro) var(--fg-ease), background-color var(--fg-dur-micro) var(--fg-ease);
}
.sf__social li + li .sf__social-item { margin-inline-start: 0; }
.sf__social-item svg { width: 30px; height: 30px; fill: currentColor; }
.sf__social-item svg.is-stroke { fill: none; stroke: currentColor; stroke-width: 1.9; }
.sf__social-item svg .is-dot { fill: currentColor; stroke: none; }
a.sf__social-item:hover { color: #E3A26C; background: rgba(255, 255, 255, 0.05); }
.sf__social-item.is-pending { color: #8D98A8; }

/* 7. Bottom bar ---------------------------------------------------------- */
.sf__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 26px 34px;
  border-block-start: 1px solid var(--sf-line);
}
.sf__copyright { margin: 0; color: var(--sf-soft); font-size: 1rem; }
.sf__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf__utility li { display: flex; align-items: center; }
.sf__utility li + li::before {                 /* thin vertical separators */
  content: "";
  width: 1px;
  height: 22px;
  margin-inline: 36px;
  background: rgba(255, 255, 255, 0.4);
}
.sf__utility .sf__link { font-size: 1rem; min-height: 44px; }
.sf__ar { font-family: var(--fg-font-ar); }
.sf__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--sf-soft);
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--fg-dur-micro) var(--fg-ease);
}
.sf__top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--fg-dur-micro) var(--fg-ease);
}
.sf__top:hover { color: #FFFFFF; }
.sf__top:hover svg { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .sf__top:hover svg { transform: none; }
}

/* 8. Page joins --------------------------------------------------------- */
/* Homepage and /discovery/: the Discovery Session fades to --sf-top at its
   bottom edge (discovery.css), so the two meet navy-to-navy with no line.
   Case study pages end on light ivory-grey: a clean, intentional edge with
   a quiet copper hairline, and a little more room above the signature. */
.csp-body .sf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(201, 130, 69, 0.55) 30%, rgba(201, 130, 69, 0.55) 70%, transparent 96%);
}
.csp-body .sf__inner { padding-block-start: clamp(64px, 6.5vw, 96px); }

/* 9. Responsive ---------------------------------------------------------- */
@media (max-width: 1099px) {
  .sf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .sf__brand { grid-column: 1 / -1; padding-inline-end: 0; }
  .sf__about { max-width: 36em; }
}

@media (max-width: 767px) {
  .sf__inner { padding-block-start: 40px; }
  .csp-body .sf__inner { padding-block-start: 52px; }
  .sf__signature { font-size: min(2.125rem, 8.6vw); line-height: 1.1; }
  .sf__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 36px;
    margin-block-start: 26px;
    padding-block: 30px 32px;
  }
  .sf__logo img { width: 190px; }
  .sf__descriptor { margin-top: 10px; font-size: 0.9375rem; }
  .sf__about { margin-top: 12px; font-size: 0.9375rem; line-height: 1.65; }
  .sf__place { margin-top: 16px; font-size: 0.875rem; }
  .sf__col--social { grid-column: 1 / -1; }
  .sf__heading { font-size: 1.0625rem; }
  .sf__heading::after { margin-block-start: 11px; }
  .sf__links { margin-top: 14px; }
  .sf__links li + li { margin-block-start: 2px; }
  .sf__link { font-size: 1rem; min-height: 36px; }
  .sf__social { margin-top: 10px; gap: 12px; }
  .sf__social-item svg { width: 26px; height: 26px; }
  .sf__bar { flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 22px 28px; }
  .sf__copyright { font-size: 0.9375rem; }
  .sf__utility { width: 100%; justify-content: space-between; }
  .sf__utility li + li::before { margin-inline: 0 0; height: 18px; }
  .sf__utility li + li { gap: clamp(10px, 4vw, 24px); }
  .sf__utility .sf__link,
  .sf__top { font-size: 0.9375rem; }
}

/* narrowest phones: the three utility links wrap, so separators would dangle */
@media (max-width: 369px) {
  .sf__utility { justify-content: flex-start; column-gap: 24px; }
  .sf__utility li + li::before { display: none; }
}