/* ==========================================================================
   Somerset West Taxi Tours: Home Drive page, request form and CTA
   Reads the theme's --swtt-* custom properties where available and falls
   back to the platform's literal brand colours (fynbos green, gold, paper),
   so it looks right under any theme. Enqueued only where a Home Drive
   shortcode is rendered.
   ========================================================================== */

.swtt-hd-page,
.swtt-hd-form-wrap,
.swtt-hd-cta {
  --hd-primary: var(--swtt-primary, #33493B);
  --hd-primary-hover: var(--swtt-primary-hover, #223229);
  --hd-gold: #C99A3E;
  --hd-gold-hover: #D8AC57;
  --hd-ink: #14181A;
  --hd-soft: #4A5450;
  --hd-paper: #F7F4EC;
  --hd-cream: var(--swtt-cream-surface, #EFEAE0);
  --hd-border: var(--swtt-border, rgba(26, 26, 26, 0.12));
  --hd-radius: var(--swtt-radius-lg, 16px);
  --hd-radius-sm: var(--swtt-radius-sm, 8px);
  --hd-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--hd-ink);
  font-family: inherit;
  line-height: 1.65;
}
.swtt-hd-page *, .swtt-hd-form-wrap *, .swtt-hd-cta * { box-sizing: border-box; }
.swtt-hd-page :focus-visible, .swtt-hd-form-wrap :focus-visible, .swtt-hd-cta :focus-visible {
  outline: 3px solid var(--hd-gold);
  outline-offset: 3px;
}

/* ---------- layout ---------- */
.swtt-hd-page { font-size: 1.05rem; }
.swtt-hd-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.swtt-hd-page h1, .swtt-hd-page h2, .swtt-hd-page h3,
.swtt-hd-cta h2 { font-family: var(--hd-serif); line-height: 1.15; margin: 0 0 .55em; color: inherit; }
.swtt-hd-page h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); letter-spacing: -.01em; }
.swtt-hd-page h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); }
.swtt-hd-page h3 { font-size: 1.12rem; }
.swtt-hd-page p { margin: 0 0 1em; max-width: 66ch; }
.swtt-hd-page section { padding: 60px 0; }
.swtt-hd-alt { background: var(--hd-paper); }
.swtt-hd-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-gold); margin-bottom: 12px; }

/* ---------- hero ---------- */
.swtt-hd-hero { background: var(--hd-primary); color: #fff; padding: 84px 0 76px; position: relative; overflow: hidden; }
.swtt-hd-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 440px; height: 440px; border-radius: 50%; border: 2px solid rgba(201, 154, 62, .45); }
.swtt-hd-hero::before { content: ""; position: absolute; right: 40px; top: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(201, 154, 62, .10); }
.swtt-hd-hero .swtt-hd-wrap { position: relative; z-index: 1; }
.swtt-hd-hero p { color: #E4EBE6; font-size: 1.16rem; }

/* ---------- buttons ---------- */
.swtt-hd-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.swtt-hd-btn { display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid var(--hd-gold); transition: background .2s, color .2s, transform .2s; cursor: pointer; font-size: 1rem; line-height: 1.2; }
.swtt-hd-btn-primary { background: var(--hd-gold); color: var(--hd-ink); }
.swtt-hd-btn-primary:hover { background: var(--hd-gold-hover); transform: translateY(-1px); }
.swtt-hd-btn-ghost { color: #fff; background: transparent; }
.swtt-hd-btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* ---------- trust strip ---------- */
.swtt-hd-trust { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-bottom: 1px solid var(--hd-border); }
.swtt-hd-trust div { padding: 18px 20px; font-weight: 700; text-align: center; border-right: 1px solid var(--hd-border); }
.swtt-hd-trust div:last-child { border-right: 0; }

/* ---------- cards ---------- */
.swtt-hd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.swtt-hd-card { background: #fff; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 24px; box-shadow: 0 4px 14px rgba(20, 24, 26, .05); transition: transform .2s, box-shadow .2s; }
.swtt-hd-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 24, 26, .09); }
.swtt-hd-card h3 { color: var(--hd-primary); }
.swtt-hd-card p { margin: 0; color: var(--hd-soft); font-size: .97rem; }

/* ---------- steps ---------- */
.swtt-hd-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: hdstep; }
.swtt-hd-steps li { counter-increment: hdstep; position: relative; padding: 18px 20px 18px 74px; background: #fff; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); }
.swtt-hd-steps li::before { content: counter(hdstep); position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--hd-gold); color: var(--hd-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.swtt-hd-steps strong { display: block; font-family: var(--hd-serif); font-size: 1.08rem; }
.swtt-hd-steps span { color: var(--hd-soft); }

/* ---------- FAQ ---------- */
.swtt-hd-faq details { border-bottom: 1px solid var(--hd-border); padding: 16px 0; }
.swtt-hd-faq summary { font-weight: 700; cursor: pointer; list-style-position: outside; }
.swtt-hd-faq details p { margin: 10px 0 0; color: var(--hd-soft); }
.swtt-hd-areas { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.swtt-hd-areas li { background: #fff; border: 1px solid var(--hd-border); border-radius: 999px; padding: 7px 16px; font-weight: 600; }

/* ---------- closing CTA band (page) ---------- */
.swtt-hd-final { background: var(--hd-ink); color: #fff; text-align: center; padding: 64px 0; }
.swtt-hd-final p { margin-left: auto; margin-right: auto; color: #DCE4DF; }
.swtt-hd-final .swtt-hd-btns { justify-content: center; }
.swtt-hd-final a:not(.swtt-hd-btn) { color: var(--hd-gold); }

/* ---------- reusable CTA ([swtt_home_drive_cta]) ---------- */
.swtt-hd-cta { background: var(--hd-primary); color: #fff; border-radius: var(--hd-radius); padding: 34px 28px; margin: 32px 0; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.swtt-hd-cta h2 { margin: 0 0 6px; font-size: 1.55rem; color: #fff; }
.swtt-hd-cta p { margin: 0; color: #E4EBE6; max-width: 54ch; }

/* ---------- request form ---------- */
.swtt-hd-form-wrap { max-width: 680px; }
.swtt-hd-form { background: #fff; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 28px; box-shadow: 0 4px 14px rgba(20, 24, 26, .05); }
.swtt-hd-form fieldset { border: 0; margin: 0 0 8px; padding: 0; }
.swtt-hd-form legend { font-family: var(--hd-serif); font-size: 1.15rem; font-weight: 700; color: var(--hd-primary); padding: 0; margin-bottom: 4px; }
.swtt-hd-form label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: .95rem; }
.swtt-hd-form .swtt-hd-help { display: block; font-weight: 400; color: var(--hd-soft); font-size: .84rem; margin-top: 2px; }
.swtt-hd-form input[type=text], .swtt-hd-form input[type=email], .swtt-hd-form input[type=tel],
.swtt-hd-form input[type=datetime-local], .swtt-hd-form select, .swtt-hd-form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--hd-border); border-radius: var(--hd-radius-sm);
  font: inherit; background: var(--hd-paper); color: var(--hd-ink); min-height: 48px;
}
.swtt-hd-form input:focus, .swtt-hd-form select:focus, .swtt-hd-form textarea:focus { border-color: var(--hd-primary); background: #fff; }
.swtt-hd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.swtt-hd-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; }
.swtt-hd-check input { margin-top: 6px; width: 18px; height: 18px; accent-color: var(--hd-primary); }
.swtt-hd-check label { margin: 0; font-weight: 400; font-size: .92rem; }
.swtt-hd-submit { width: 100%; margin-top: 22px; padding: 16px 28px; border: 0; border-radius: 999px; background: var(--hd-primary); color: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: background .2s; }
.swtt-hd-submit:hover { background: var(--hd-primary-hover); }
.swtt-hd-note { padding: 16px 18px; border-radius: var(--hd-radius-sm); margin: 0 0 16px; border-left: 4px solid var(--hd-gold); background: var(--hd-paper); }
.swtt-hd-note.is-ok { border-left-color: var(--hd-primary); background: #EAF0EB; }
.swtt-hd-note strong { display: block; font-family: var(--hd-serif); font-size: 1.1rem; }
.swtt-hd-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.swtt-hd-paused { padding: 18px; background: var(--hd-paper); border-radius: var(--hd-radius-sm); }

@media (max-width: 720px) {
  .swtt-hd-trust { grid-template-columns: 1fr; }
  .swtt-hd-trust div { border-right: 0; border-bottom: 1px solid var(--hd-border); }
  .swtt-hd-page section { padding: 42px 0; }
  .swtt-hd-hero { padding: 56px 0 52px; }
  .swtt-hd-row { grid-template-columns: 1fr; }
  .swtt-hd-form { padding: 20px; }
  .swtt-hd-cta { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .swtt-hd-btn, .swtt-hd-card, .swtt-hd-submit { transition: none; }
  .swtt-hd-card:hover, .swtt-hd-btn-primary:hover { transform: none; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- block editor preview ---------- */
/* WordPress does not execute the page's shortcodes in the editor, but it does
   render the surrounding HTML blocks. These scoped rules make the saved Home
   Drive design readable in the editor without changing unrelated blocks. */
.editor-styles-wrapper .swtt-hd-page,
.is-root-container .swtt-hd-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  color: var(--hd-ink);
}
.editor-styles-wrapper .swtt-hd-page p,
.editor-styles-wrapper .swtt-hd-page li,
.editor-styles-wrapper .swtt-hd-page a,
.is-root-container .swtt-hd-page p,
.is-root-container .swtt-hd-page li,
.is-root-container .swtt-hd-page a {
  line-height: 1.65;
}
.editor-styles-wrapper .swtt-hd-page h1,
.editor-styles-wrapper .swtt-hd-page h2,
.editor-styles-wrapper .swtt-hd-page h3,
.is-root-container .swtt-hd-page h1,
.is-root-container .swtt-hd-page h2,
.is-root-container .swtt-hd-page h3 {
  font-weight: 700;
}
.editor-styles-wrapper .swtt-hd-page .swtt-hd-wrap,
.is-root-container .swtt-hd-page .swtt-hd-wrap {
  width: 100%;
}