/*
Theme Name: WTD Salary Survey 2026
Theme URI: https://www.writethedocs.org/
Author: Zingry
Author URI: https://zingry.com/
Description: Custom block theme for the Write the Docs 2026 salary survey + minisite (Part I).
Version: 0.83.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: wtd-survey
*/

/* ===== Base foundations (Theme chunk 1) =====
   Most foundations (palette, fonts, type scale) live in theme.json.
   This covers what theme.json can't express. Design tokens are available as
   --wp--preset--color--* and --wp--custom--* CSS variables. */

*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--wp--preset--color--accent);
  color: #fff;
}

/* Visually-hidden (screen-reader only) — for source-only page H1s. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* ===== Site chrome + shell (Theme chunk 2) =====
   Header, footer, and the page shell. Ported from the Claude Design prototype
   (layout/Salary Survey Site.html), mapped onto block template-part markup. */

/* The .site wrapper is the outermost flex column + carries the switchable
   design-token attributes (data-density / data-fieldfill / data-fieldshape).
   --accent mirrors theme.json so later chunks can derive tints/shades. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --accent: var(--wp--preset--color--accent, #1E5C8C);
  --accent-d: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-dd: color-mix(in srgb, var(--accent) 64%, #000);
  --accent-tint: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 30%, #fff);
  /* aliases so the design's editorial CSS (var(--ink) etc.) resolves */
  --ink: var(--wp--preset--color--ink);
  --ink-2: var(--wp--preset--color--ink-2);
  --ink-3: var(--wp--preset--color--ink-3);
  --card: var(--wp--preset--color--card);
  --rule: var(--wp--preset--color--rule);
  --rule-2: var(--wp--preset--color--rule-soft);
}

/* Switchable spacing/radius tokens (density + shape decided switchable, 2026-07-01).
   These only define vars here; the field-level consumers land in chunk 3. */
/* Option padding tightened across all three densities (2026-07-21): the cards
   carried more air than the labels needed, and on the grouped role list it was
   costing whole rows. Horizontal came down further than vertical because the
   mark sits inside it — the whole card is the hit area, so neither the mark nor
   the space around it has to be big enough to aim at. Keep --gf-opt-* in
   gravity-forms.css in step — those fallbacks are what the GP Nested Forms
   modal actually resolves, since it mounts outside .site. */
.site[data-density="compact"] { --opt-py: 8px;  --opt-px: 9px;  --gap: 8px;  --field-gap: 18px; --row-pad: 26px; }
.site[data-density="regular"] { --opt-py: 11px; --opt-px: 11px; --gap: 11px; --field-gap: 26px; --row-pad: 42px; }
.site[data-density="comfy"]   { --opt-py: 15px; --opt-px: 15px; --gap: 14px; --field-gap: 32px; --row-pad: 54px; }
.site[data-fieldshape="rounded"] { --field-radius: 12px; }
.site[data-fieldshape="pill"]    { --field-radius: 999px; }

/* ---- Centred content shell ---- */
.wrap {
  flex: 1;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 42px 32px 64px;   /* 42px top so content clears the header (design) */
}

/* Reusable white card for form/section content (consumed in chunk 3). */
.card {
  background: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--rule-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(27, 39, 51, .04), 0 12px 32px rgba(27, 39, 51, .06);
}

/* ============================ Header ============================ */
.site-head {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #1c3a4a 0%, #132530 100%);
}
/* decorative light rays (was a separate .head-rays div in the prototype) */
.site-head::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .4;
  mix-blend-mode: screen;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 84% -30%,
      rgba(255,255,255,.10) 0deg 3deg, rgba(255,255,255,0) 3deg 8deg),
    radial-gradient(120% 130% at 86% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 52%);
}
.site-head .head-inner {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 32px;
}
.site-head .head-logo {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.34);
  background: #fff center/cover no-repeat url("assets/wtd-mark.png");
}
.site-head .head-titles { display: flex; flex-direction: column; }
.site-head .head-title {
  margin: 0;
  color: #fff;
  font-family: "Domine", Georgia, serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -.01em;
}
.site-head .head-sub {
  margin: 9px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.site-head .head-sub::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: #E0A53C;
}
.site-head .head-chip {
  margin: 4px 0 0 auto;          /* margin-left:auto pushes it to the right */
  align-self: flex-start;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(224,165,60,.16);
  border: 1px solid rgba(224,165,60,.4);
  color: #F0C879;
  font: 700 12px/1 "Open Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================ Footer ============================ */
.site-foot {
  color: #fff;
  background: #132530;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, #1c3a4a, #132530);
}
.site-foot .foot-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
}
.site-foot .foot-inner p { margin: 0; }
.site-foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ============================ Responsive ============================ */
@media (max-width: 840px) {
  .wrap { padding: 36px 22px 56px; }
  .site-head .head-inner, .site-foot .foot-inner { padding-left: 22px; padding-right: 22px; }
  .site-head .head-title { font-size: 34px; }
}
@media (max-width: 560px) {
  .wrap { padding: 28px 18px 48px; }
  /* A grid rather than a wrapping flex row. Wrapping decided the chip's place
     by whatever space happened to be left, which either dropped the title onto
     its own row or squeezed it to ~132px beside the chip. Two explicit rows
     instead: logo and title share the first, the chip takes the second and
     keeps its content width. */
  .site-head .head-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 16px;
    padding: 22px 18px;
  }
  /* The markup groups the title and the tagline in one .head-titles box, so the
     tagline's width fed into that box's sizing and dictated where the title was
     allowed to break — the title was being sized by a line it does not belong
     to. `display: contents` dissolves the wrapper on this breakpoint only, so
     both become grid items in their own right and can be placed independently.
     Safe on a plain div: there is no semantics to lose. */
  .site-head .head-titles { display: contents; }
  .site-head .head-logo { grid-column: 1; grid-row: 1; }
  .site-head .head-title { grid-column: 2; grid-row: 1; font-size: 26px; }
  /* Full width on its own row under the logo, so it is measured against the
     whole header rather than the strip beside the logo. */
  .site-head .head-sub {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: 13px;
  }
  .site-head .head-sub::before { width: 24px; }
  .site-head .head-chip {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin: 0;
    font-size: 11px;
    padding: 8px 12px;
  }
  /* The logo scales with the viewport instead of holding a fixed square, so it
     gives ground to the title rather than forcing it onto its own row. */
  .site-head .head-logo {
    flex: none;
    width: clamp(44px, 15vw, 72px);
    height: auto;
    aspect-ratio: 1;
  }
  /* Stacked, the two lines read as one centred block rather than a row that
     happens to have broken. */
  .site-foot .foot-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 18px;
  }
}
@media (max-width: 400px) {
  .site-head .head-title { font-size: 23px; }
  /* No fixed square here — it would out-rank the clamp above at exactly the
     widths the clamp exists for. The lower bound does this job instead. */
}


/* ===== Editorial pages — home + thank-you (Theme chunk 5) =====
   Ported from the Claude Design prototype editorial rows + buttons. */

.page-kicker {
  font-family: "Domine", Georgia, serif;
  font-weight: 600;
  color: var(--accent-d);
  font-size: 34px;
  text-align: center;
  margin: 46px 0 6px;
  letter-spacing: .01em;
}

/* ---- Editorial rows (label column + body) ---- */
.ed-row {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 46px;
  padding: var(--row-pad, 42px) 0;
  border-top: 1px solid var(--rule);
}
.ed-row.lead { border-top: 0; }
.ed-label h2 {
  font-family: "Domine", Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  text-align: right;
  color: var(--ink);
  margin: 0;
}
.ed-sub {
  margin: 12px 0 0;
  text-align: right;
  font-style: italic;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.ed-body { min-width: 0; }
.ed-body p, .ed-body ul { max-width: 660px; color: var(--ink-2); line-height: 1.62; }
.ed-body p { margin: 0 0 14px; }
.ed-body p:last-child { margin-bottom: 0; }
.ed-body strong { color: var(--ink); font-weight: 700; }
.bullets { margin: 0 0 14px; padding-left: 20px; }
.bullets li { margin: 0 0 7px; }
.x-link { color: var(--accent-d); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.x-link:hover { border-bottom-color: var(--accent-d); }
.x-ic { font-size: .8em; margin-left: 3px; opacity: .7; }
.cta-wrap { margin-top: 24px; }
/* That 24px separates the button from copy above it. Where the button opens the
   body — the closing "Ready?" row, which is the button and nothing else — there
   is nothing to separate it from, and the margin just drops it below the
   heading in the label column. Every other row starts flush, since `.ed-body p`
   carries no top margin either. */
.ed-body .cta-wrap:first-child { margin-top: 0; }
/* An aside under the call to action — currently the note telling returning
   respondents to answer again even if nothing changed. Only the spacing is
   set: `.ed-body p` carries no top margin, which left the note sitting on the
   button. Deliberately not shrunk — it is what stops repeat participants
   assuming an unchanged salary means nothing to report, and setting that as
   fine print argues against its own content. Its bold lead-in is enough to
   mark it as an aside. */
/* Qualified with the element: `.ed-body p` sets `margin: 0 0 14px`, and a bare
   `.cta-note` loses to it on specificity however late it appears, so the top
   margin silently did nothing. 20px sits a little tighter than the 24px above
   the button, which keeps the note reading as part of the call to action rather
   than as the start of the next thing. */
.ed-body p.cta-note { margin-top: 20px; }

/* ---- Buttons ---- */
.btn {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  line-height: 1.1;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 var(--accent-dd), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.primary:hover { background: var(--accent-d); }
.btn.outline { background: var(--card); color: var(--accent-d); border-color: var(--accent-soft); }
.btn.outline:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn.share { background: var(--accent); color: #fff; }
.btn.share:hover { background: var(--accent-d); }
.btn.full { width: 100%; display: block; }
.btn.lg { padding: 14px 30px; font-size: 16px; border-radius: 11px; }
.btn.xl { padding: 16px 64px; font-size: 17px; border-radius: 12px; }

/* ---- Thank-you specifics ---- */
/* The sign-off is a flourish, not part of the paragraph above it — give it room
   to read as its own beat, especially now that nothing follows it. 52px was not
   enough: it is centred where everything above it is left-aligned, so it needs
   enough space to read as a deliberate change of voice rather than a stray line. */
.signoff { font-family: "Domine", Georgia, serif; font-weight: 600; color: var(--accent-d); font-size: 24px; text-align: center; margin: 82px 0 8px; }
.share-row { display: flex; gap: 12px; flex-wrap: wrap; }
.news-card { background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: 14px; padding: 22px; max-width: 440px; }
.news-q { font-weight: 700; color: var(--ink); font-size: 14.5px; margin: 0 0 10px; }
.news-check { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 9px; cursor: pointer; }
.news-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.news-card .btn { margin-top: 8px; }
.text-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--field-radius, 12px); }
.news-card .text-input { margin-bottom: 16px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .ed-row { grid-template-columns: 1fr; gap: 14px; }
  .ed-label h2 { font-size: 25px; text-align: left; }
  .ed-sub { text-align: left; }
  .page-kicker { font-size: 28px; margin-top: 34px; }
  .btn.xl { padding: 15px 36px; width: 100%; }
  .share-row .btn { flex: 1; text-align: center; }
}