/* =========================================================
   OvertimeCalculator.uk — stylesheet
   Design concept: "payslip ledger" — a UK payroll aesthetic.
   No external fonts/frameworks. System fonts only for speed.
   ========================================================= */

:root{
  --navy:        #14263F;
  --navy-light:  #1E3A5F;
  --paper:       #F6F5F1;
  --paper-alt:   #EFEDE6;
  --ink:         #1A1A1A;
  --ink-soft:    #4B4F55;
  --line:        #D8D5CC;
  --line-strong: #B9B5A8;
  --green:       #1F7A54;
  --green-dark:  #175E41;
  --green-tint:  #E7F2EC;
  --amber:       #B8792D;
  --amber-tint:  #FBF0E1;
  --red:         #A6362B;
  --red-tint:    #F8EAE8;
  --white:       #FFFFFF;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 4px;
  --max-w: 780px;
  --wide-w: 1040px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
html:focus-within{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

img{ max-width: 100%; display: block; }

h1,h2,h3,h4{
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(1.7rem, 5vw, 2.4rem); }
h2{ font-size: clamp(1.35rem, 3.6vw, 1.8rem); margin-top: 2em; }
h3{ font-size: 1.15rem; margin-top: 1.4em; }
p{ margin: 0 0 1em; max-width: 68ch; }
ul, ol{ margin: 0 0 1.2em; padding-left: 1.3em; }
li{ margin-bottom: .4em; }

a{ color: var(--green-dark); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover{ color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.tabular{ font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width: var(--max-w); margin: 0 auto; padding: 0 1.1rem; }
.wrap-wide{ max-width: var(--wide-w); margin: 0 auto; padding: 0 1.1rem; }
.section{ padding: 2.4rem 0; border-top: 1px solid var(--line); }
.section:first-of-type{ border-top: none; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:0; top:-3rem; background:var(--navy); color:#fff;
  padding:.6rem 1rem; z-index:200; transition: top .15s ease;
}
.skip-link:focus{ top:0; }

/* ---------- Header ---------- */
.site-header{
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--green);
}
.site-header .wrap-wide{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 60px;
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  color:#fff; text-decoration:none; font-family: var(--font-serif);
  font-weight:700; font-size:1.15rem; letter-spacing:.2px;
}
.brand:hover{ color:#fff; }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background: var(--green); color:#fff; font-family: var(--font-serif);
  font-weight:700; font-size:1rem; flex:none;
}
.nav-toggle{
  background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
  border-radius: var(--radius); padding:.4rem .6rem; font-size:.95rem;
  display:flex; align-items:center; gap:.4rem; cursor:pointer;
}
.nav-toggle:hover{ border-color:#fff; }
.main-nav{ display:none; }
.main-nav.is-open{ display:block; }
.main-nav ul{
  list-style:none; margin:0; padding: 1rem 0 1.2rem; display:flex; flex-direction:column; gap:.2rem;
}
.main-nav a{
  display:block; color:#fff; text-decoration:none; padding:.55rem .1rem;
  border-bottom: 1px solid rgba(255,255,255,.12); font-size:.98rem;
}
.main-nav a:hover{ color: var(--green-tint); }

@media (min-width: 800px){
  .nav-toggle{ display:none; }
  .main-nav{ display:block; }
  .main-nav ul{ flex-direction:row; gap:1.4rem; padding:0; }
  .main-nav a{ border-bottom:none; padding:.3rem 0; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  font-size:.85rem; color: var(--ink-soft); padding: .8rem 0;
}
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; margin:0; padding:0; gap:.3rem; }
.breadcrumbs li:not(:last-child)::after{ content:"›"; margin-left:.3rem; color:var(--line-strong); }
.breadcrumbs a{ color: var(--ink-soft); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--green-dark); text-decoration:underline; }

/* ---------- Hero ---------- */
.hero{ padding: 2.2rem 0 1.4rem; }
.hero p.lede{ font-size:1.08rem; color: var(--ink-soft); max-width: 62ch; }
.updated-badge{
  display:inline-block; font-size:.78rem; color:var(--ink-soft);
  background:var(--paper-alt); border:1px solid var(--line); padding:.25rem .6rem;
  border-radius: 999px; margin-bottom: .8rem;
}

/* ---------- Calculator card (payslip stub) ---------- */
.calc-card{
  background:#fff; border:1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--line);
  overflow:hidden;
}
.calc-card__head{
  background: var(--navy-light); color:#fff; padding: .9rem 1.1rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
}
.calc-card__head h2{ color:#fff; margin:0; font-size:1.15rem; }
.calc-card__head span{ font-size:.8rem; opacity:.85; }
.calc-body{ padding: 1.2rem 1.1rem 1.4rem; }

.field-row{
  display:grid; grid-template-columns: 1fr; gap: .9rem;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px dashed var(--line);
}
.field{ display:flex; flex-direction:column; gap:.3rem; }
.field label{ font-size:.88rem; font-weight:600; color: var(--navy); }
.field .hint{ font-size:.78rem; color: var(--ink-soft); font-weight:400; }
.field input[type="number"], .field input[type="text"], .field select{
  font-family: var(--font-sans); font-size:1rem; padding:.6rem .65rem;
  border:1px solid var(--line-strong); border-radius: var(--radius);
  background:#fff; color: var(--ink); min-height:44px; width:100%;
}
.field input:focus, .field select:focus{ border-color: var(--green); }
.input-prefix{ position:relative; }
.input-prefix span{
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  color: var(--ink-soft); font-weight:600; pointer-events:none;
}
.input-prefix input{ padding-left: 1.6rem; }

.radio-toggle{ display:flex; gap:.5rem; flex-wrap:wrap; }
.radio-toggle label{
  flex:1 1 auto; text-align:center; font-size:.86rem; font-weight:600;
  border:1px solid var(--line-strong); border-radius: var(--radius);
  padding:.55rem .5rem; cursor:pointer; background:#fff; color:var(--navy);
  min-height:44px; display:flex; align-items:center; justify-content:center;
}
.radio-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.radio-toggle input:checked + span{ color:#fff; }
.radio-toggle input:checked ~ label{}
.radio-toggle label:has(input:checked){ background: var(--navy); color:#fff; border-color: var(--navy); }

.ot-entry{
  border:1px solid var(--line); border-radius: var(--radius); padding:.8rem .8rem .3rem;
  margin-bottom:.8rem; background: var(--paper);
  display:grid; gap:.8rem; grid-template-columns: 1fr;
  position:relative;
}
.ot-entry__title{ font-size:.82rem; font-weight:700; color:var(--navy); text-transform:none; margin-bottom:-.2rem; }
.ot-entry__remove{
  background:none; border:1px solid var(--line-strong); color:var(--red);
  border-radius: var(--radius); font-size:.78rem; padding:.3rem .5rem; cursor:pointer;
  justify-self:start; margin-top:-.3rem;
}
.ot-entry__remove:hover{ background: var(--red-tint); }

.btn-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family: var(--font-sans); font-size:1rem; font-weight:700;
  padding:.75rem 1.2rem; border-radius: var(--radius); cursor:pointer;
  min-height:48px; border:2px solid transparent; text-decoration:none;
}
.btn-primary{ background: var(--green); color:#fff; border-color: var(--green); flex:1 1 auto; }
.btn-primary:hover{ background: var(--green-dark); border-color: var(--green-dark); }
.btn-secondary{ background:#fff; color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover{ border-color: var(--navy); }
.btn-add{
  background: var(--paper-alt); color: var(--navy); border-color: var(--line-strong);
  font-size:.9rem; font-weight:700; padding:.55rem .9rem; min-height:44px;
}
.btn-add:hover{ border-color: var(--navy); }

/* ---------- Results (payslip lines) ---------- */
.results{
  margin-top: 1.2rem; border-top: 3px solid var(--navy); padding-top: 1rem;
}
.results[hidden]{ display:none; }
.results h3{ margin-top:0; font-size:1rem; text-transform:none; }
.payline{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom: 1px dotted var(--line);
  font-size:.96rem;
}
.payline dt{ color: var(--ink-soft); margin:0; }
.payline dd{ margin:0; font-weight:700; color: var(--navy); white-space:nowrap; }
.payline.total{ border-bottom: none; border-top: 2px solid var(--navy); margin-top:.3rem; padding-top:.7rem; }
.payline.total dd{ color: var(--green-dark); font-size:1.15rem; }
.payline.highlight dd{ color: var(--green-dark); }
dl.paylines{ margin:0; }

.calc-error{
  background: var(--red-tint); border:1px solid var(--red); color: var(--red);
  padding:.7rem .9rem; border-radius: var(--radius); font-size:.9rem; margin-top:.8rem;
}
.calc-error[hidden]{ display:none; }

/* ---------- Ad slot ---------- */
.ad-slot{
  max-width: var(--max-w); margin: 1.6rem auto; padding: 0 1.1rem;
}
.ad-slot__inner{
  border:1px dashed var(--line-strong); background: var(--paper-alt);
  color: var(--ink-soft); font-size:.78rem; text-align:center;
  padding: .6rem; min-height: 100px; display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius);
}

/* ---------- Worked examples table ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
table.examples{
  border-collapse: collapse; width:100%; min-width: 560px; font-size:.92rem;
}
table.examples caption{ text-align:left; font-size:.85rem; color:var(--ink-soft); margin-bottom:.5rem; }
table.examples th, table.examples td{
  border: 1px solid var(--line); padding:.55rem .6rem; text-align:right;
}
table.examples th:first-child, table.examples td:first-child{ text-align:left; }
table.examples thead th{ background: var(--navy); color:#fff; font-weight:700; }
table.examples tbody tr:nth-child(even){ background: var(--paper-alt); }

/* ---------- Content sections ---------- */
.content h2{ border-bottom: 1px solid var(--line); padding-bottom:.3rem; }
.callout{
  background: var(--amber-tint); border-left: 4px solid var(--amber);
  padding: .9rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.2rem 0;
  font-size:.95rem;
}
.callout strong{ color: var(--amber); }
.note-green{
  background: var(--green-tint); border-left: 4px solid var(--green);
  padding: .9rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.2rem 0; font-size:.95rem;
}
.source-links{ font-size:.92rem; }

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom: 1px solid var(--line); padding: .2rem 0;
}
.faq-item summary{
  cursor:pointer; font-weight:700; color: var(--navy); padding: .8rem 0;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  font-size:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.3rem; color: var(--green); flex:none; font-weight:400;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding-bottom: .9rem; color: var(--ink-soft); }

/* ---------- Author box ---------- */
.author-box{
  display:flex; gap:1rem; align-items:flex-start; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius); padding:1.1rem;
}
.author-avatar{
  flex:none; width:56px; height:56px; border-radius:50%; background: var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif); font-size:1.4rem; font-weight:700;
}
.author-box h3{ margin:0 0 .3rem; font-size:1.02rem; }
.author-box p{ margin:0; font-size:.92rem; color: var(--ink-soft); }

.meta-grid{
  display:grid; grid-template-columns: 1fr; gap:1rem; margin-top:1.4rem;
}
@media (min-width:640px){ .meta-grid{ grid-template-columns: 1fr 1fr; } }
.meta-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem; font-size:.9rem; }
.meta-card h3{ font-size:.95rem; margin-top:0; }

/* ---------- Internal links / related ---------- */
.related-links ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.related-links a{
  display:block; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:.7rem .9rem; text-decoration:none; font-weight:600; color:var(--navy);
}
.related-links a:hover{ border-color: var(--green); color: var(--green-dark); }
.related-links span{ display:block; font-weight:400; font-size:.82rem; color:var(--ink-soft); margin-top:.15rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,.85); margin-top: 2rem; }
.site-footer .wrap-wide{ padding: 2rem 1.1rem 1.6rem; }
.footer-nav{ list-style:none; display:flex; flex-wrap:wrap; gap: .5rem 1.2rem; padding:0; margin:0 0 1.2rem; }
.footer-nav a{ color:#fff; text-decoration:none; font-size:.9rem; }
.footer-nav a:hover{ text-decoration:underline; }
.site-footer p{ font-size:.82rem; color: rgba(255,255,255,.6); max-width:none; margin:0 0 .4rem; }
.site-footer a{ color: rgba(255,255,255,.85); }

/* ---------- Simple form (contact) ---------- */
.simple-form .field{ margin-bottom:1rem; }
.simple-form textarea{
  font-family: var(--font-sans); font-size:1rem; padding:.6rem .65rem;
  border:1px solid var(--line-strong); border-radius: var(--radius); min-height:140px; width:100%;
}

/* ---------- Utility text ---------- */
.small{ font-size:.85rem; color: var(--ink-soft); }
.center{ text-align:center; }

@media (min-width: 640px){
  .field-row.two-col{ grid-template-columns: 1fr 1fr; }
  .ot-entry{ grid-template-columns: 1fr 1fr; }
}

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