/* Docket Green — this theme's stylesheet.
 *
 * Loaded LAST, after every core stylesheet, so anything here wins. This is the file
 * that decides how the site looks: change it, bump the version in theme.json, zip
 * the folder as docketpdf-theme-docket-green-v<version>.zip and upload it in
 * Admin > Themes. Nothing outside this folder needs to change, and no core file is
 * touched.
 *
 * The two accent colours are deliberately NOT fixed here. They live in the themes
 * table, an administrator edits them on Admin > Themes, and page.php writes them
 * inline — so this file reads the variable wherever the administrator should stay
 * in control, and only falls back to this theme's own hex.
 */

/* ================================ the footer ==============================
   A dark base to the page rather than another pale band: the brand and its link
   columns on the left, the newsletter as a raised panel on the right, and one
   thin bar under both carrying the copyright and the legal links.

   The whole footer was written for a dark ground and never given one, which is
   why its headings used to be white on white. */
footer.foot{position:relative;overflow:hidden;margin-top:84px;border-top:0;
  background:#0f2b24;color:rgba(255,255,255,.7)}
footer.foot::before{content:"";position:absolute;top:-190px;right:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,var(--accent,#2e9e4f) 0%,transparent 68%);opacity:.17;pointer-events:none}
footer.foot::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--accent,#2e9e4f),rgba(255,255,255,.12) 34%,transparent)}

.foot-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:46px;align-items:start;
  margin:0 auto;padding:66px 0 44px}
.foot-in.has-sub{grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:70px}
.foot-l{display:grid;gap:38px;align-content:start}

footer.foot .brand{display:inline-flex;align-items:center;gap:11px;margin:0;
  font-family:var(--fh);font-size:21px;line-height:1;color:#fff;text-decoration:none}
footer.foot .brand em{font-style:normal;color:#6fd08d}
footer.foot .brand:hover{color:#fff}
.foot-tag{margin:15px 0 0;max-width:33ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.6)}

/* As many columns as the menu has. Two was hard-coded here when the footer was
   the theme's own list; a menu built in Admin ▸ Menus can have four, and the
   fourth was dropping onto a second row beside all that empty space. */
.foot-links{display:flex;flex-wrap:wrap;gap:30px 48px;max-width:820px}
.foot-links>div{flex:0 0 auto;min-width:132px}
footer.foot h6{margin:0 0 15px;font-family:var(--fh);font-weight:400;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
footer.foot .foot-links a{display:block;width:fit-content;margin:0 0 11px;padding-bottom:1px;font-size:14.5px;
  color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid transparent}
footer.foot .foot-links a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--accent,#2e9e4f)}

/* ========================= the newsletter, as a panel ====================
   One rounded field with the button sitting inside it, rather than a wide box
   and a button drifting off to the right. */
.foot-sub{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:24px;
  padding:28px 28px 26px}
.foot .foot-sub .nl-form{background:none;border:0;padding:0;border-radius:0}
.foot-sub h3{margin:0 0 8px;font-family:var(--fh);font-weight:400;font-size:23px;line-height:1.2;color:#fff}
.foot .foot-sub p.small{margin:0 0 18px;max-width:44ch;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.68)}
.foot-sub .nl-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;max-width:none;margin:0;
  background:#fff;border-radius:999px;padding:5px 5px 5px 6px}
.foot-sub .nl-row:focus-within{box-shadow:0 0 0 3px rgba(46,158,79,.4)}
.foot-sub .nl-row input{flex:1 1 auto;min-width:0;border:0;background:none;padding:10px 4px 10px 14px;
  font-family:var(--fb);font-size:14.5px;color:var(--text)}
.foot-sub .nl-row input:focus,.foot-sub .nl-row input:focus-visible{outline:none}
.foot-sub .nl-row .btn{flex:0 0 auto;border-radius:999px;padding:11px 22px;font-size:14px}
.foot .foot-sub .nl-fine{margin:14px 0 0;max-width:46ch;font-size:12px;line-height:1.55;color:rgba(255,255,255,.46)}
.foot .foot-sub .nl-msg{margin:14px 0 0;font-size:13px;padding:10px 14px;border-radius:12px}
@media (max-width:420px){.foot-sub .nl-row{flex-wrap:wrap;border-radius:20px;padding:6px}
  .foot-sub .nl-row .btn{width:100%;justify-content:center}}

/* ------------------------------- the fine bar --------------------------- */
.foot-base{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:0 auto;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:rgba(255,255,255,.5)}
.foot-base nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-base>span{white-space:nowrap}
footer.foot .foot-base a{display:inline;margin:0;font-size:13px;color:rgba(255,255,255,.62);text-decoration:none;white-space:nowrap}
footer.foot .foot-base a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1000px){
  .foot-in,.foot-in.has-sub{grid-template-columns:1fr;gap:36px;padding:46px 0 32px}
  .foot-links{max-width:none}
}
@media (max-width:560px){
  .foot-links{grid-template-columns:1fr 1fr;gap:22px}
  .foot-base{padding:16px 0 22px}
  .foot-base nav{gap:16px}
}

/* =========================== the disclaimer bar ==========================
   Its own bar, because it is the one thing on the page that must not read as
   small print. */
.discbar{background:#092019;color:rgba(255,255,255,.8);border-top:3px solid var(--accent,#2e9e4f)}
.discbar .wrap{max-width:1132px;margin:0 auto;padding:20px 0;
  display:flex;gap:16px;align-items:flex-start;font-size:13px;line-height:1.6}
.discbar .discmark{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent,#2e9e4f);color:#fff;font-family:var(--fh);font-size:15px}
.discbar strong{color:#fff;display:block;margin-bottom:3px;font-weight:600}
.discbar a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
.discbar a:hover{text-decoration-color:#fff}
@media (max-width:640px){.discbar .wrap{padding:16px 0}.discbar .discmark{display:none}}

/* ============================ the top menu ================================
   "Features" sat a little lower than its neighbours. It is the only item that is a
   <button> rather than an <a> — it carries the dropdown — and a button brings its
   own font, line-height and vertical alignment from the browser. Normalising all
   four to the same box puts them back on one line. */
nav.main .mt{font-family:inherit;font-size:14px;line-height:1.2;align-items:center;
  vertical-align:middle;margin:0;-webkit-appearance:none;appearance:none}
nav.main button.mt{font:inherit;font-size:14px}
nav.main .mt .ix{line-height:1;position:relative;top:0}
nav.main .mt>span{line-height:1.2}
/* The chevron no longer nudges the label off centre. */
nav.main .mt .chev{align-self:center;position:relative;top:1px}

/* ---- a thin divider under the bar, drawn rather than ruled ----
   A hairline that fades out at both ends and carries a single accent stitch at the
   left, picking up the docket-tab idea in the menu above it. */
header.bar{position:relative}
header.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,var(--accent,#2e9e4f) 6%,var(--accent,#2e9e4f) 13%,transparent 13.6%) left / 34% 2px no-repeat,
    linear-gradient(90deg,transparent,var(--div,#dfe6e0) 18%,var(--div,#dfe6e0) 82%,transparent);
  opacity:.9}

/* The badge under the header sat too far down. 20% closer. */
.hero{padding-top:59px}
@media (max-width:900px){.hero{padding-top:42px}}

/* ======================= the half-star rating picker =====================
   Five stars, ten targets. The mechanism in profile.css is right — reverse order,
   a half-width label sitting over the left half of each full one, so ~ fills
   everything to the left of what you are pointing at. What was wrong was the
   arithmetic: the labels were .62em and .31em wide with overflow:hidden, while a
   ★ glyph occupies a full em. Every star was clipped down its right-hand side, and
   the row read as ten narrow slivers instead of five stars.

   One em and half an em. The glyph inside the half label stays a full em wide and
   is clipped to the left half by the label's own overflow, which is what makes a
   4.5 possible. */
.starpick{font-size:0}
.starpick label{font-size:32px;width:1em;text-align:left;overflow:hidden;flex:0 0 auto}
.starpick label.full{width:1em}
.starpick label.half{width:.5em}
.starpick label.half span[aria-hidden]{position:absolute;left:0;top:0;width:1em;display:block}
.starpick label>span[aria-hidden]{display:block;line-height:1}

/* The hover fill has to read as one continuous run, so no gaps and no scaling that
   would open one. The whole row lifts instead of the single star under the cursor. */
.starpick label:hover{transform:none}
.starpick:hover{transform:translateY(-1px)}
.starpick label:hover,.starpick label:hover ~ label,.starpick input:checked ~ label{color:#e0a92b}
.starpick input:focus-visible ~ label{outline:2px solid var(--accent,#2e9e4f);outline-offset:3px;border-radius:3px}

/* The readout, back at a readable size after the font-size:0 above. */
.starout{font-size:13px;order:-1;margin-left:14px}
@media (max-width:560px){.starpick label{font-size:27px}}

/* The same five-star row, read-only, wherever a rating is shown back. */
.pr-stars{font-size:15px;letter-spacing:1px}
.pr-stars.big{font-size:23px;letter-spacing:2px}

/* ==================== typography and spacing, from Settings ================
   The six custom properties are written into :root by page.php. This is where they
   are spent. Every one has a fallback, so the theme still renders correctly if the
   settings have never been saved — and so a theme dropped onto an older engine does
   not collapse. */
body{font-size:var(--fs-base,16px)}
h1{font-size:var(--fs-h1,52px)}
h2{font-size:var(--fs-h2,36px)}
h3{font-size:var(--fs-h3,24px)}

/* Line length is a reading control, not a layout one: it applies to running text
   and leaves grids, tables and navigation alone. */
main p,main li,.narrow p,.sub{max-width:var(--measure,68ch)}

/* The rhythm between sections, and the gutter down each side. */
.sec{padding-top:var(--sec-pad,76px);padding-bottom:var(--sec-pad,76px)}
.wrap,.narrow{padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}
.wrap{max-width:calc(var(--wrap-max,1132px) + var(--gutter,24px) * 2)}
.foot-in,.foot-base,.discbar .wrap{max-width:var(--wrap-max,1132px)}
footer.foot{padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}

/* The hero keeps its own proportion to the rest rather than a fixed number. */
.hero{padding-top:calc(var(--sec-pad,76px) * .78);padding-bottom:calc(var(--sec-pad,76px) * 1.21)}

@media (max-width:900px){
  .sec{padding-top:calc(var(--sec-pad,76px) * .62);padding-bottom:calc(var(--sec-pad,76px) * .62)}
  .hero{padding-top:calc(var(--sec-pad,76px) * .55);padding-bottom:calc(var(--sec-pad,76px) * .8)}
}