/* ============================================================
   teas.co.uk, Contact page layout
   Page-specific styles. Shared components live in design-system.css.
   Activates the AMBER accent override for warmth (vs cyan default).
   ============================================================ */

/* Amber accent override for the contact page only.
   Original Claus design uses --acc:#FFB347 on contact / about / delivery. */
body.page-template-page-contact,
body.page-contact{
  --acc: #FFB347;
}

/* PAGE HEAD */
.page-head{
  display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap);align-items:end;
  margin-bottom:28px;
}
.page-head h1{
  font-family:var(--fb);font-size:84px;font-weight:800;letter-spacing:-.030em;
  line-height:.95;margin:0;text-wrap:balance;
}
.page-head h1 em{font-family:var(--fd);font-style:italic;font-weight:400;letter-spacing:-.012em}
.page-head .right{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.page-head .right .lbl{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:600;
}
.page-head .right p{
  font-size:14.5px;line-height:1.55;color:var(--slate);margin:0;max-width:42ch;
}

/* MAIN GRID */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--gap)}

/* FORM CARD, extends .card from design-system.css */
.form-card{display:flex;flex-direction:column;gap:18px}
.form-card .head-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  margin-bottom:6px;
}
.form-card h2{
  font-family:var(--fb);font-size:26px;font-weight:800;letter-spacing:-.018em;margin:0;
}
.form-card h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.form-card .corner{
  width:42px;height:42px;border-radius:50%;background:var(--acc);color:#0A0B0F;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.form-card .corner svg{width:16px;height:16px}
.form-card .head-sub{
  margin:6px 0 0;font-size:13.5px;color:var(--slate);
}

.topic-row{display:flex;flex-wrap:wrap;gap:6px}
.topic{
  padding:8px 14px;border-radius:var(--r-pill);background:transparent;
  border:1.5px solid rgba(14,15,18,.10);
  font-size:12.5px;font-weight:500;color:var(--slate);
  transition:all .14s var(--ease);display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;font-family:inherit;
}
.topic:hover{border-color:var(--ink);color:var(--ink)}
.topic.on{background:#042220;color:var(--acc);border-color:#042220}
.topic .pip{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.topic.on .pip{opacity:1;color:var(--acc)}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:600;display:flex;justify-content:space-between;align-items:center;
}
.field label .opt{
  color:var(--mist);font-weight:500;text-transform:none;letter-spacing:0;font-size:11px;
}
.field input,.field textarea,.field select{
  background:var(--paper-2);border:1.5px solid transparent;border-radius:var(--r-md);
  padding:14px 16px;font-size:14px;font-weight:500;outline:none;
  transition:border-color .14s var(--ease),background .14s var(--ease);
  width:100%;font-family:inherit;color:inherit;
}
.field input::placeholder,.field textarea::placeholder{color:var(--mist)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#042220;background:#fff;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.5}

.consent{
  display:flex;align-items:flex-start;gap:10px;padding:14px;
  background:var(--paper-2);border-radius:var(--r-md);
}
.consent input[type="checkbox"]{
  appearance:none;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--ash);background:#fff;cursor:pointer;flex-shrink:0;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .14s var(--ease);
}
.consent input[type="checkbox"]:checked{background:#042220;border-color:#042220}
.consent input[type="checkbox"]:checked::after{
  content:'';width:9px;height:5px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);
  transform:rotate(-45deg) translate(1px,-1px);
}
.consent label{font-size:12.5px;color:var(--slate);line-height:1.5;cursor:pointer}
.consent label a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(14,15,18,.2);text-underline-offset:3px;
}

.submit-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.submit-meta{
  font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.submit-meta .pip{
  width:6px;height:6px;border-radius:50%;background:#3DCB6E;
  box-shadow:0 0 0 4px rgba(61,203,110,.18);
}
.btn-send{
  background:#042220;color:var(--acc);border-radius:var(--r-pill);
  padding:0 22px;height:48px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .14s var(--ease);border:none;cursor:pointer;font-family:inherit;
}
.btn-send:hover{transform:translateX(2px)}
.btn-send svg{width:13px;height:13px}

/* Inline notices for after form submission */
.contact-notice{
  padding:14px 18px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.contact-notice.success{background:#E6F7EC;color:#1F8847;border:1px solid #B8EBC9}
.contact-notice.error{background:#FCE6EC;color:#B22072;border:1px solid #F5C0CD}
.contact-notice .pip{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}

/* RIGHT SIDE STACK */
.contact-side{display:flex;flex-direction:column;gap:var(--gap)}

/* SLA card */
.sla{
  background:#042220;color:#eff7f6;padding:24px;border-radius:var(--r-3xl);
  box-shadow:var(--sh-card);position:relative;overflow:hidden;
}
.sla .corner{
  width:38px;height:38px;border-radius:50%;background:var(--acc);color:#0A0B0F;
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:18px;right:18px;
}
.sla .corner svg{width:14px;height:14px}
.sla h3{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:30px;
  letter-spacing:-.012em;margin:0 0 6px;color:#eff7f6;
}
.sla .kicker{
  font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--acc);font-weight:600;margin-bottom:8px;display:inline-block;
}
.sla p{
  margin:8px 0 0;font-size:13px;color:rgba(239,247,246,.65);
  line-height:1.55;max-width:34ch;
}
.sla .stat-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(239,247,246,.10);
}
.sla .stat .num{
  font-family:var(--fb);font-weight:800;font-size:34px;letter-spacing:-.022em;
  line-height:1;color:#eff7f6;
}
.sla .stat .num em{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:22px;
  color:rgba(239,247,246,.5);
}
.sla .stat .lbl{
  font-size:11.5px;color:rgba(239,247,246,.55);font-weight:500;
  margin-top:6px;display:block;
}

/* Channels card */
.chans{background:#fff;border-radius:var(--r-3xl);padding:8px;box-shadow:var(--sh-card)}
.chan{
  display:grid;grid-template-columns:46px 1fr 18px;gap:14px;align-items:center;
  padding:16px 16px;border-radius:var(--r-2xl);
  transition:background .14s var(--ease);cursor:pointer;
}
.chan:hover{background:var(--paper-2)}
.chan + .chan{border-top:1px solid var(--hair)}
.chan:hover + .chan,.chan:hover{border-top-color:transparent}
.chan .icn{
  width:42px;height:42px;border-radius:50%;background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
}
.chan.email .icn{background:var(--acc);color:#0A0B0F}
.chan.whatsapp .icn{background:var(--lime);color:#0A0B0F}
.chan.phone .icn{background:#042220;color:var(--acc)}
.chan.post .icn{background:var(--berry);color:#fff}
.chan .icn svg{width:16px;height:16px}
.chan .body{display:flex;flex-direction:column;gap:2px;min-width:0}
.chan .nm{font-size:14px;font-weight:600;letter-spacing:-.005em}
.chan .v{
  font-family:var(--fm);font-size:11.5px;color:var(--slate);font-weight:500;
}
.chan .arr{color:var(--slate)}
.chan .arr svg{width:13px;height:13px}

/* Hours card */
.hours{
  background:var(--paper-2);border-radius:var(--r-3xl);padding:24px;
  box-shadow:var(--sh-card);
}
.hours h3{
  font-family:var(--fb);font-size:16px;font-weight:700;letter-spacing:-.010em;
  margin:0 0 14px;
}
.hour-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;
  border-bottom:1px dotted rgba(14,15,18,.10);font-size:13px;font-weight:500;
  align-items:center;
}
.hour-row:last-child{border-bottom:none}
.hour-row .day{color:var(--slate)}
.hour-row.now .day{color:var(--ink);font-weight:700}
.hour-row.now .day::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#3DCB6E;
  display:inline-block;margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 4px rgba(61,203,110,.18);
}
.hour-row .h{font-family:var(--fm);font-size:12px;color:var(--ink);font-weight:600}
.hour-row .h.closed{color:var(--mist)}

/* FAQ section */
.faqs{margin-top:36px}
.faqs-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin-bottom:18px;flex-wrap:wrap;
}
.faqs-head .kicker{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--slate);font-weight:600;
}
.faqs-head h2{
  font-family:var(--fb);font-size:34px;font-weight:800;letter-spacing:-.020em;
  margin:4px 0 0;
}
.faqs-head h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.faqs-head .more{
  font-family:var(--fm);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;padding:10px 16px;border-radius:var(--r-pill);
  background:#042220;color:var(--acc);
  display:inline-flex;align-items:center;gap:8px;
}
.faqs-head .more svg{width:11px;height:11px}

.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}

/* Native <details>/<summary> for accessibility + zero JS. Styled to match the design. */
details.faq{
  background:#fff;border-radius:var(--r-2xl);padding:22px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:transform .18s var(--ease);
}
details.faq:hover{transform:translateY(-3px)}
details.faq summary{
  list-style:none;display:flex;flex-direction:column;gap:6px;
  cursor:pointer;outline:none;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::marker{display:none}
.faq .q-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.faq .tag{
  font-family:var(--fm);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:600;
}
.faq .plus{
  width:28px;height:28px;border-radius:50%;background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
  transition:transform .18s var(--ease),background .14s var(--ease);flex-shrink:0;
}
details.faq[open] .plus{transform:rotate(45deg);background:#042220;color:var(--acc)}
.faq .plus svg{width:11px;height:11px}
.faq .q{
  font-family:var(--fb);font-size:15px;font-weight:700;letter-spacing:-.010em;
  margin:4px 0 0;line-height:1.3;
}
.faq .a{
  font-size:13px;color:var(--slate);line-height:1.55;
  margin:8px 0 0;
}

/* RESPONSIVE */
@media (max-width:1180px){
  .page-head,.contact-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .page-head h1{font-size:48px}
  .row{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
}