/*
Theme Name: DRSF
Theme URI: https://drsf.org.uk
Description: Lean custom theme for the Dame Robina Shah Foundation. Code-registered ACF blocks, no page builder, no build step. Replaces Kadence + Elementor + JetEngine.
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: drsf
*/

/* ============================================================
   GeneralSans (self-hosted variable font)
   ============================================================ */
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("assets/fonts/GeneralSans-VariableItalic.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* Brand */
  --drsf-green:       #163E34;   /* primary dark green */
  --drsf-green-deep:  #0f2d26;   /* darker green for depth/gradients */
  --drsf-sage:        #B7CEAF;   /* soft accent green */
  --drsf-sage-soft:   #E4EEDF;   /* very light sage section wash */
  --drsf-yellow:      #E1E738;   /* eyebrow / accent */
  --drsf-text:        #212121;   /* body text on light */
  --drsf-muted:       #5b6360;   /* secondary text */
  --drsf-bg:          #ffffff;   /* page background */
  --drsf-wash:        #f5f7f4;   /* alternate light section wash */
  --drsf-card-bg:     #ffffff;   /* card surface */
  --drsf-line:        #e7ebe8;   /* hairline borders */
  --drsf-on-dark:     #ffffff;
  --drsf-on-dark-mut: #c7d4ce;   /* muted text on green */

  /* Type */
  --drsf-font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm & shape — softer, less blocky */
  --drsf-content-max: 1180px;
  --drsf-gutter: clamp(20px, 5vw, 64px);
  --drsf-section-y: clamp(56px, 8vw, 110px);
  --drsf-radius: 22px;          /* cards / images */
  --drsf-radius-sm: 14px;
  --drsf-radius-pill: 999px;
  --drsf-shadow: 0 18px 40px -24px rgba(22, 62, 52, 0.30);
  --drsf-shadow-soft: 0 10px 30px -20px rgba(22, 62, 52, 0.25);
  --drsf-header-h: 84px;
  --drsf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--drsf-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--drsf-text);
  background: var(--drsf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--drsf-green);
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   Layout helpers (shared by blocks + chrome)
   ============================================================ */
.drsf-container {
  width: 100%;
  max-width: var(--drsf-content-max);
  margin-inline: auto;
  padding-inline: var(--drsf-gutter);
}
.drsf-section { padding-block: var(--drsf-section-y); }
.drsf-section--wash  { background: var(--drsf-wash); }
.drsf-section--sage  { background: var(--drsf-sage-soft); }
.drsf-section--green { background: var(--drsf-green); color: var(--drsf-on-dark); }
.drsf-section--green h1,
.drsf-section--green h2,
.drsf-section--green h3 { color: var(--drsf-on-dark); }

.drsf-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drsf-green);
  background: var(--drsf-yellow);
  padding: 0.35em 0.85em;
  border-radius: var(--drsf-radius-pill);
  margin-bottom: 1rem;
}
.drsf-section--green .drsf-eyebrow { color: var(--drsf-green); }

.drsf-lead { font-size: 1.12rem; color: var(--drsf-muted); }
.drsf-section--green .drsf-lead { color: var(--drsf-on-dark-mut); }

/* ============================================================
   Buttons
   ============================================================ */
.drsf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95em 1.6em;
  border-radius: var(--drsf-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--drsf-ease), background 0.25s var(--drsf-ease),
              color 0.25s var(--drsf-ease), box-shadow 0.25s var(--drsf-ease);
}
.drsf-btn:hover { transform: translateY(-2px); }
.drsf-btn svg { width: 1em; height: 1em; }

.drsf-btn--primary { background: var(--drsf-yellow); color: var(--drsf-green); }
.drsf-btn--primary:hover { box-shadow: 0 12px 24px -10px rgba(225, 231, 56, 0.6); }

.drsf-btn--green { background: var(--drsf-green); color: #fff; }
.drsf-btn--green:hover { background: var(--drsf-green-deep); }

.drsf-btn--sage { background: var(--drsf-sage); color: var(--drsf-green); }
.drsf-btn--sage:hover { box-shadow: var(--drsf-shadow-soft); }

.drsf-btn--ghost { background: transparent; border-color: currentColor; }
.drsf-btn--ghost:hover { background: rgba(255,255,255,0.08); }

.drsf-btn--outline { background: transparent; border-color: var(--drsf-green); color: var(--drsf-green); }
.drsf-btn--outline:hover { background: var(--drsf-green); color: #fff; }

/* ============================================================
   Accessibility / motion
   ============================================================ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--drsf-yellow); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Prose (policy pages, member bios, fallback content)
   ============================================================ */
.drsf-page-prose { padding-block: var(--drsf-section-y); }
.drsf-prose { max-width: 800px; }
.drsf-prose h1 { margin-bottom: 0.6em; }
.drsf-prose h2, .drsf-prose h3 { margin-top: 1.6em; }
.drsf-prose ul, .drsf-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.drsf-prose li { margin-bottom: 0.5em; }
.drsf-prose a { color: var(--drsf-green); text-decoration: underline; text-underline-offset: 3px; }
.drsf-prose a:hover { color: var(--drsf-green-deep); }
.drsf-prose img { border-radius: var(--drsf-radius); margin: 1.5em 0; }
.drsf-prose blockquote {
  margin: 1.5em 0; padding: 1.2em 1.5em;
  border-left: 4px solid var(--drsf-sage);
  background: var(--drsf-wash); border-radius: var(--drsf-radius-sm);
  font-size: 1.1rem;
}
.drsf-prose__hero img { border-radius: var(--drsf-radius); }

/* Single board member */
.drsf-member__inner { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.drsf-member__photo { width: 100%; border-radius: var(--drsf-radius); box-shadow: var(--drsf-shadow); margin-bottom: 18px; }
.drsf-member__name { margin-bottom: 0.2em; }
.drsf-member__position { color: var(--drsf-muted); font-weight: 600; margin-bottom: 1em; }
.drsf-member__linkedin { color: var(--drsf-green); font-weight: 600; display: inline-block; margin-bottom: 1.4em; }
@media (max-width: 760px) { .drsf-member__inner { grid-template-columns: 1fr; } }

.drsf-postcard { padding: 1.5em 0; border-bottom: 1px solid var(--drsf-line); }