/*
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.80.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; }

/* ---- 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; }
}