/* ==================================================================================================
   DutyHub public site.

   One stylesheet, no framework. These are nine or ten pages of mostly text; a component library
   would be more code than the site.

   Colour is carried by two custom properties so the brand accent is stated once here and once in
   appconfig.php, and nowhere else.
   ================================================================================================== */

:root{
  --dh-ink:#12211c;
  --dh-ink-2:#4a5c55;
  --dh-line:#dbe4e0;
  --dh-bg:#ffffff;
  --dh-bg-2:#f4f7f5;
  --dh-accent:#0b6b52;
  --dh-accent-dk:#07513e;
  --dh-red:#b3261e;
  --dh-amber:#9a6700;
  --dh-green:#0b6b52;
  --dh-wrap:1120px;
  --dh-radius:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.dh{
  margin:0;
  background:var(--dh-bg);
  color:var(--dh-ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.dh-wrap{max-width:var(--dh-wrap);margin:0 auto;padding:0 20px}

a{color:var(--dh-accent);text-underline-offset:2px}
a:hover{color:var(--dh-accent-dk)}

h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:700}
h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:650}
h3{font-size:1.1rem;font-weight:650}
p{margin:0 0 1em}

/* Focus is visible everywhere. A compliance product with an inaccessible marketing site is a bad
   look before anybody has read a word of it. */
:focus-visible{outline:3px solid var(--dh-accent);outline-offset:2px;border-radius:4px}
.dh-skip{position:absolute;left:-9999px}
.dh-skip:focus{left:12px;top:12px;position:fixed;z-index:99;background:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.2)}

/* ---- header ---------------------------------------------------------------------------------- */
.dh-top{border-bottom:1px solid var(--dh-line);background:#fff;position:sticky;top:0;z-index:20}
.dh-top-in{display:flex;align-items:center;gap:28px;height:64px}
.dh-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--dh-ink);font-weight:700}
.dh-mark{width:20px;height:20px;border-radius:5px;background:var(--dh-accent);
  box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--dh-accent)}
.dh-brandname{font-size:1.08rem;letter-spacing:-.02em}
.dh-nav{position:relative;display:flex;gap:20px;margin-left:8px;flex:1}
.dh-nav a{color:var(--dh-ink-2);text-decoration:none;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
.dh-nav a:hover{color:var(--dh-ink)}
.dh-nav a[aria-current]{color:var(--dh-ink);border-bottom-color:var(--dh-accent)}
.dh-top-cta{display:flex;gap:10px;align-items:center}

.dh-btn{display:inline-block;padding:9px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;border:1px solid transparent}
.dh-btn-primary{background:var(--dh-accent);color:#fff}
.dh-btn-primary:hover{background:var(--dh-accent-dk);color:#fff}
.dh-btn-ghost{border-color:var(--dh-line);color:var(--dh-ink)}
.dh-btn-ghost:hover{border-color:var(--dh-ink-2);color:var(--dh-ink)}
.dh-btn-lg{padding:13px 22px;font-size:1.02rem}

/* ---- sections -------------------------------------------------------------------------------- */
.dh-hero{padding:72px 0 56px;border-bottom:1px solid var(--dh-line)}
.dh-hero p.dh-lead{font-size:1.18rem;color:var(--dh-ink-2);max-width:62ch}
.dh-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;color:var(--dh-accent);margin-bottom:10px}
.dh-sec{padding:56px 0;border-bottom:1px solid var(--dh-line)}
.dh-sec-tint{background:var(--dh-bg-2)}
.dh-lead{font-size:1.1rem;color:var(--dh-ink-2);max-width:68ch}
.dh-narrow{max-width:70ch}

.dh-grid{display:grid;gap:22px}
.dh-g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dh-g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.dh-g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.dh-card{border:1px solid var(--dh-line);border-radius:var(--dh-radius);padding:22px;background:#fff}
.dh-card h3{margin-bottom:.35em}
.dh-card p{color:var(--dh-ink-2);margin-bottom:0;font-size:.96rem}
.dh-card a.dh-more{display:inline-block;margin-top:12px;font-weight:600;font-size:.93rem;text-decoration:none}
.dh-card a.dh-more:after{content:" →"}

/* ---- the register illustration --------------------------------------------------------------- */
.dh-reg{border:1px solid var(--dh-line);border-radius:var(--dh-radius);overflow:hidden;background:#fff}
.dh-reg-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px 16px;border-top:1px solid var(--dh-line);font-size:.94rem}
.dh-reg-row:first-child{border-top:0;background:var(--dh-bg-2);font-weight:650;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--dh-ink-2)}
.dh-reg-ref{display:block;color:var(--dh-ink-2);font-size:.82rem}
.dh-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:650;white-space:nowrap}
.dh-pill-g{background:#e3f1ec;color:var(--dh-green)}
.dh-pill-a{background:#fdf1dc;color:var(--dh-amber)}
.dh-pill-r{background:#fbe4e2;color:var(--dh-red)}
.dh-pill-n{background:#eef1f0;color:var(--dh-ink-2)}
.dh-due{color:var(--dh-ink-2);font-size:.86rem;white-space:nowrap}

/* ---- lists ------------------------------------------------------------------------------------ */
.dh-ticks{list-style:none;padding:0;margin:0}
.dh-ticks li{padding-left:28px;position:relative;margin-bottom:10px;color:var(--dh-ink-2)}
.dh-ticks li:before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:var(--dh-accent)}
.dh-ticks strong{color:var(--dh-ink)}

/* ---- pricing ---------------------------------------------------------------------------------- */
.dh-price{border:1px solid var(--dh-line);border-radius:var(--dh-radius);padding:24px;background:#fff;display:flex;flex-direction:column}
.dh-price.dh-feature{border-color:var(--dh-accent);box-shadow:0 0 0 1px var(--dh-accent)}
.dh-price h3{margin-bottom:2px}
.dh-amt{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:10px 0 2px}
.dh-amt small{font-size:.9rem;font-weight:500;color:var(--dh-ink-2)}
.dh-price ul{list-style:none;padding:0;margin:16px 0 20px;flex:1}
.dh-price li{padding-left:22px;position:relative;margin-bottom:8px;font-size:.93rem;color:var(--dh-ink-2)}
.dh-price li:before{content:"✓";position:absolute;left:0;color:var(--dh-accent);font-weight:700}

/* ---- checker ----------------------------------------------------------------------------------- */
.dh-q{border:1px solid var(--dh-line);border-radius:var(--dh-radius);padding:22px;margin-bottom:16px;background:#fff}
.dh-q legend{font-weight:650;font-size:1.02rem;padding:0}
.dh-q fieldset{border:0;padding:0;margin:0}
.dh-opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.dh-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--dh-line);border-radius:8px;
  padding:9px 14px;cursor:pointer;font-size:.95rem}
.dh-opt:hover{border-color:var(--dh-ink-2)}
.dh-opt input{margin:0}
.dh-field{display:block;margin-top:12px}
.dh-field span{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.dh-field input[type=text],.dh-field input[type=number],.dh-field input[type=email]{
  width:100%;max-width:360px;padding:10px 12px;border:1px solid var(--dh-line);border-radius:8px;font:inherit}
.dh-hint{font-size:.88rem;color:var(--dh-ink-2);margin-top:6px}
.dh-result{border-left:4px solid var(--dh-accent);background:var(--dh-bg-2);padding:20px 22px;border-radius:0 var(--dh-radius) var(--dh-radius) 0}
.dh-result h2{margin-bottom:.3em}

/* ---- footer ------------------------------------------------------------------------------------ */
.dh-foot{background:var(--dh-bg-2);border-top:1px solid var(--dh-line);padding:48px 0 32px;margin-top:0}
.dh-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-bottom:32px}
.dh-foot h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dh-ink-2);margin-bottom:12px}
.dh-foot a{display:block;color:var(--dh-ink);text-decoration:none;font-size:.94rem;margin-bottom:8px}
.dh-foot a:hover{text-decoration:underline}
.dh-positioning{border-top:1px solid var(--dh-line);padding-top:22px;font-size:.86rem;color:var(--dh-ink-2);max-width:88ch}
.dh-copy{font-size:.86rem;color:var(--dh-ink-2);margin:14px 0 0}

/* A CARD THAT IS A LINK. The suite and glossary pages make the whole card clickable, which is the
   right target size - but an <a> inherits link decoration, so every line inside it came out green
   and underlined and the card read as broken. Reset here rather than at each call site. */
a.dh-card{text-decoration:none;color:inherit;display:block;transition:border-color .12s,transform .12s}
a.dh-card h3{color:var(--dh-ink);text-decoration:none}
a.dh-card p{color:var(--dh-ink-2);text-decoration:none}
a.dh-card:hover{border-color:var(--dh-accent);transform:translateY(-1px)}
a.dh-card:hover h3{color:var(--dh-accent)}
a.dh-card:focus-visible{outline:2px solid var(--dh-accent);outline-offset:2px}

/* ---- Top navigation with panels ---------------------------------------------------------------
   Opened by :hover and by :focus-within, with no JavaScript involved. :focus-within is what makes
   it keyboard-navigable: tabbing to the trigger opens the panel, and tabbing onward walks its
   links. There is no aria-expanded because nothing would update it, and an attribute that lies
   about state is worse than one that is absent.

   The panel is hidden with visibility rather than display:none so the transition works and so
   focus can still land inside it. */
.dh-navitem{display:flex;align-items:center}
.dh-navtop{display:inline-flex;align-items:center;gap:5px;color:var(--dh-ink-2);text-decoration:none;
  font-size:.95rem;padding:20px 0;border-bottom:2px solid transparent;white-space:nowrap}
.dh-navtop:hover{color:var(--dh-ink)}
.dh-navtop[aria-current]{color:var(--dh-ink);border-bottom-color:var(--dh-accent)}
.dh-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.55}

/* Anchored to the NAV, not to the item. Anchored per item, the rightmost panels ran off the right
   edge of the viewport - Resources lost two of its three columns at 800px wide. Every panel now
   shares the nav's left edge, which cannot overflow while the panel is narrower than the nav's
   right edge allows; max-width is the backstop for a very narrow window. */
.dh-panel{position:absolute;top:100%;left:0;z-index:40;min-width:520px;max-width:calc(100vw - 40px);
  background:#fff;border:1px solid var(--dh-line);border-radius:var(--dh-radius);
  box-shadow:0 12px 34px rgba(18,33,28,.13);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s}
.dh-navitem:hover .dh-panel,
.dh-navitem:focus-within .dh-panel{opacity:1;visibility:visible;transform:translateY(0)}

.dh-panel-in{display:flex;gap:30px;padding:20px 22px}
.dh-panel-col{min-width:150px;display:flex;flex-direction:column;gap:2px}
.dh-panel-col h3{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dh-ink-2);
  margin:0 0 8px;font-weight:600}
.dh-panel-col a{color:var(--dh-ink);text-decoration:none;font-size:.92rem;padding:5px 0;border-radius:5px}
.dh-panel-col a:hover{color:var(--dh-accent)}
.dh-panel-col a:focus-visible{outline:2px solid var(--dh-accent);outline-offset:2px}
.dh-panel-foot{border-top:1px solid var(--dh-line);padding:11px 22px;background:var(--dh-bg-2);
  border-radius:0 0 var(--dh-radius) var(--dh-radius)}
.dh-panel-foot a{color:var(--dh-accent);text-decoration:none;font-size:.88rem;font-weight:600}

/* ---- Icons ------------------------------------------------------------------------------------
   One size rule for all forty-odd, so an icon cannot come out different on one page by accident.
   They inherit colour, which is why the card hover tints the icon along with the heading. */
.dh-i{width:1.35em;height:1.35em;flex:0 0 auto;vertical-align:-.28em}
.dh-card .dh-i{width:26px;height:26px;color:var(--dh-accent);margin-bottom:12px;display:block;
  opacity:.9;transition:transform .13s ease}
a.dh-card:hover .dh-i{transform:translateY(-1px)}
.dh-ico-row{display:flex;align-items:center;gap:9px}

/* ---- Figures ----------------------------------------------------------------------------------
   Sized by viewBox so one drawing serves every column width.

   Structure and text take their colour from the same tokens as the rest of the site. The status
   fills below are literal: they are pale tints of the green, amber and red used for register
   pills, and there are no tokens for tints. If the brand accent ever moves, these move by hand -
   which is worth knowing rather than discovering. */
.dh-fig{margin:30px 0 0;padding:0}
.dh-fig-svg{width:100%;height:auto;display:block;
  border:1px solid var(--dh-line);border-radius:var(--dh-radius);background:#fff;padding:6px}
.dh-fig figcaption{margin-top:10px;font-size:.86rem;color:var(--dh-ink-2)}

.dh-f-box{fill:#fff;stroke:var(--dh-line);stroke-width:1.4}
.dh-f-boxA{fill:var(--dh-bg-2);stroke:var(--dh-line);stroke-width:1.4}
.dh-f-h{font:600 15px/1.2 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  fill:var(--dh-ink);text-anchor:middle}
.dh-f-t{font:400 13.5px/1.2 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  fill:var(--dh-ink);text-anchor:middle}
.dh-f-s{font:400 12.5px/1.2 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  fill:var(--dh-ink-2);text-anchor:middle}
.dh-f-pill{font:600 12px/1 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  fill:var(--dh-ink);text-anchor:middle}
.dh-f-na{font:400 11.5px/1 system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  fill:var(--dh-ink-2);text-anchor:middle}

.dh-f-arrow{stroke:var(--dh-ink-2);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dh-f-flow{stroke:var(--dh-line);stroke-width:1.6;fill:none}
.dh-f-axis{stroke:var(--dh-line);stroke-width:1.5}
.dh-f-tick{stroke:var(--dh-accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dh-f-dot{fill:var(--dh-accent)}
.dh-f-dotO{fill:#fff;stroke:var(--dh-accent);stroke-width:2}

.dh-f-g{fill:#e4f2ec;stroke:#9ecfbc}
.dh-f-a{fill:#fdf1d8;stroke:#e5c079}
.dh-f-r{fill:#fbe3e1;stroke:#e2a49e}
.dh-f-bandA{fill:#eaf4f0;stroke:#bcdcd0}
.dh-f-bandB{fill:#dcece5;stroke:#9ecfbc}
.dh-f-chip rect{fill:var(--dh-bg-2);stroke:var(--dh-line);stroke-width:1.2}
.dh-f-cellG rect{fill:#dff0e8;stroke:#9ecfbc;stroke-width:1.1}
.dh-f-cellA rect{fill:#fbeed3;stroke:#e5c079;stroke-width:1.1}
.dh-f-cellR rect{fill:#f8ded9;stroke:#e2a49e;stroke-width:1.1}
.dh-f-cellN rect{fill:var(--dh-bg-2);stroke:var(--dh-line);stroke-width:1.1}

/* ---- A stat band, for the places a page needs a breath between walls of prose ------------------ */
.dh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:28px}
.dh-stat{border:1px solid var(--dh-line);border-radius:var(--dh-radius);padding:18px;background:#fff}
.dh-stat b{display:block;font-size:1.7rem;letter-spacing:-.02em;color:var(--dh-accent);line-height:1.1}
.dh-stat span{display:block;margin-top:4px;font-size:.88rem;color:var(--dh-ink-2)}

/* ---- A quiet pattern behind the hero -----------------------------------------------------------
   A CSS gradient rather than an image: no request, no asset to lose, and it costs nothing on a
   slow connection. Deliberately faint - it is a texture, not a decoration to be noticed. */
.dh-hero{position:relative;overflow:hidden}
.dh-hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 1px 1px,rgba(11,107,82,.10) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(160deg,rgba(11,107,82,.05),transparent 62%);
  -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%);
  mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 48%,transparent 78%)}
.dh-hero > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  a.dh-card,a.dh-card:hover .dh-i,.dh-panel{transition:none}
  a.dh-card:hover{transform:none}
  a.dh-card:hover .dh-i{transform:none}
}

@media (max-width:820px){
  /* The nav WRAPS onto a second row; it does not disappear. It used to be display:none with nothing
     replacing it, which left a marketing site with no navigation at all on a phone - the device most
     of its visitors arrive on. Wrapping needs no JavaScript and no menu button to get wrong. */
  /* padding-block only. .dh-top-in and .dh-wrap are the SAME element, so a `padding` shorthand
     here silently removes the wrap's horizontal padding and the whole header goes flush to the
     screen edge - which is what happened when this rule was first written. */
  .dh-top-in{flex-wrap:wrap;row-gap:12px;height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}
  .dh-nav{order:3;flex:0 0 100%;margin-left:0;gap:18px;overflow-x:auto;padding-bottom:2px}
  .dh-nav a{white-space:nowrap}
  /* No panels on a phone. A mega-panel opening over the content of a small screen helps nobody,
     and every trigger is a link to an index page listing the same things - which is why those
     pages exist. The caret would be a promise the panel no longer keeps, so it goes too. */
  .dh-panel{display:none}
  .dh-caret{display:none}
  .dh-navtop{padding:6px 0}
  /* The brand at its natural width, and smaller buttons, so the header is TWO rows on a phone
     rather than three. flex:1 on the brand pushed the buttons onto a line of their own, and a
     sticky header 160px tall costs a fifth of the screen on every page. */
  .dh-brand{flex:0 0 auto}
  .dh-top-cta{gap:8px;margin-left:auto}
  .dh-top-cta .dh-btn{padding:7px 11px;font-size:.86rem}
  .dh-hero{padding:48px 0 40px}
  .dh-reg-row{grid-template-columns:1fr auto}
  .dh-due{display:none}
}