/* Project Timber — Delivery (templates/page-delivery.php).
   Loaded after base.css + secondary.css. Only the page-unique sections live
   here; hero/breadcrumb/typography and the .faq-item accordion come from
   secondary.css, and tokens from base.css :root. Postcode checker is wired by
   the matching JS. */

/* Postcode checker */
.checker{ padding-top:34px; }
.pc-card{ background:var(--paper); border:1px solid rgba(33,30,36,.1); border-radius:var(--r); padding:30px 26px; max-width:640px; margin:0 auto; box-shadow:var(--e1); }
.pc-card h2{ font-size:clamp(1.4rem,3.6vw,1.9rem); text-align:center; }
.pc-card .sub{ text-align:center; font-weight:300; color:var(--txt-soft); font-size:.92rem; margin:8px auto 20px; max-width:44ch; }
.pc-form{ display:flex; gap:10px; flex-wrap:wrap; }
.pc-form input{ flex:1 1 200px; font-family:var(--font); font-size:1.05rem; padding:15px 18px; border:1.5px solid rgba(33,30,36,.2); border-radius:12px; background:#fff; color:var(--ink); text-transform:uppercase; }
.pc-form input:focus{ outline:none; border-color:var(--charcoal); }
.pc-form button{ flex:0 0 auto; border:none; cursor:pointer; font-family:var(--font); font-weight:700; background:var(--accent); color:var(--ink); font-size:1rem; padding:15px 28px; border-radius:12px; transition:transform .2s var(--ease); }
.pc-form button:active{ transform:scale(.98); }
.pc-result{ margin-top:16px; border-radius:14px; padding:16px 18px; display:none; gap:12px; align-items:flex-start; }
.pc-result.show{ display:flex; }
.pc-result svg{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; }
.pc-result b{ display:block; font-size:1.02rem; margin-bottom:2px; }
.pc-result p{ font-weight:300; font-size:.9rem; line-height:1.45; }
.pc-result.r-free{ background:var(--ok-bg); color:#1c6b41; } .pc-result.r-free svg{ color:var(--ok); }
.pc-result.r-surcharge{ background:var(--warn-bg); color:#8a5210; } .pc-result.r-surcharge svg{ color:var(--warn); }
.pc-result.r-none{ background:var(--no-bg); color:#9a2c20; } .pc-result.r-none svg{ color:var(--no); }
.pc-result.r-invalid{ background:var(--mist); color:var(--txt-soft); } .pc-result.r-invalid svg{ color:var(--charcoal); }
.pc-note{ text-align:center; font-size:.72rem; font-weight:300; color:var(--txt-soft); margin-top:14px; }

/* Zones + map */
.zones{ background:var(--paper); }
.zones .zgrid{ display:grid; gap:28px; align-items:start; }
@media(min-width:900px){ .zones .zgrid{ grid-template-columns:1fr 1fr; gap:44px; } }
.zmap img{ width:100%; border-radius:var(--r); box-shadow:var(--e2); display:block; background:#fff; }
.zlist{ display:grid; gap:12px; }
.zone{ background:#fff; border:1px solid rgba(33,30,36,.1); border-radius:var(--r-sm); padding:16px 18px; box-shadow:var(--e1); }
.zone summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; }
.zone summary::-webkit-details-marker{ display:none; }
.zdot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.zdot.a{ background:var(--ok); } .zdot.b{ background:var(--warn); } .zdot.c{ background:#8a5210; } .zdot.d{ background:var(--no); }
.zone .zt{ font-weight:700; font-size:1rem; } .zone .zc{ margin-left:auto; font-weight:700; font-size:.9rem; color:var(--txt-soft); }
.zone .zchev{ width:16px; height:16px; color:var(--txt-soft); transition:transform .3s var(--ease); } .zone[open] .zchev{ transform:rotate(180deg); }
.zone .zcodes{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(33,30,36,.08); font-weight:300; font-size:.86rem; color:var(--txt-soft); line-height:1.7; }
.zone .zcodes b{ color:var(--ink); font-weight:700; }

/* How it works */
.how h2{ font-size:clamp(2rem,5vw,2.8rem); text-align:center; }
.how .lead{ text-align:center; max-width:60ch; margin:12px auto 0; }
.feat{ display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-top:36px; }
@media(min-width:760px){ .feat{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.feat .f{ background:#fff; border:1px solid rgba(33,30,36,.1); border-radius:var(--r-sm); padding:22px 20px; box-shadow:var(--e1); text-align:center; }
.feat .f .ic{ width:46px; height:46px; margin:0 auto 12px; border-radius:12px; background:var(--mist); display:flex; align-items:center; justify-content:center; color:var(--charcoal); }
.feat .f .ic svg{ width:24px; height:24px; }
.feat .f h3{ font-size:1rem; margin-bottom:5px; } .feat .f p{ font-weight:300; font-size:.85rem; color:var(--txt-soft); line-height:1.4; }
.steps{ display:grid; gap:16px; margin-top:34px; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.step{ display:flex; gap:14px; align-items:flex-start; }
.step .n{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--charcoal); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.step h3{ font-size:1rem; margin-bottom:4px; } .step p{ font-weight:300; font-size:.88rem; color:var(--txt-soft); line-height:1.45; }

/* FAQ (container; .faq-item accordion styling is in secondary.css) */
.faq{ background:var(--paper); }
.faq .wrap{ max-width:820px; }
.faq h2{ font-size:clamp(2rem,5vw,2.8rem); margin-bottom:22px; text-align:center; }