/* Shared styling for Ancient Landmark sample project "after" pages.
   Each demo sets its own palette in a <style> block; this file holds the structure. */
:root {
  --ink: #16202b;
  --ink-soft: #4c5865;
  --line: #dfe4e8;
  --white: #fff;
  --brand: #14507d;
  --brand-dark: #0e3b5e;
  --accent: #e2a33c;
  --tint: #f2f6f9;
  --radius: 6px;
  --max: 1080px;
  --gutter: clamp(16px, 4vw, 32px);
  --font-display: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; padding-bottom: 96px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #1A73E8; outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; max-width: 66ch; }
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { top: 8px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); }
.hdr .container { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; margin-right: auto; line-height: 1.1; padding-block: 7px; }
.brand span { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.hdr nav { display: none; gap: 20px; }
.hdr nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.hdr .tel { font-weight: 800; color: var(--brand-dark); text-decoration: none; white-space: nowrap; display: inline-block; padding: 11px 4px; }
.btn { display: inline-block; border: 0; border-radius: var(--radius); padding: 14px 22px; font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-accent { background: var(--accent); color: #23303d; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero */
.hero { background: linear-gradient(180deg, var(--tint), #fff); padding-block: clamp(36px, 7vw, 72px); border-bottom: 1px solid var(--line); }
.hero .eyebrow { display: inline-block; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; margin-bottom: 16px; }
.hero p.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 54ch; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.badges li::before { content: "✓"; color: var(--brand); font-weight: 800; margin-right: 7px; }

/* photos */
.hero.has-photo .container { display: grid; gap: 28px; align-items: center; }
.hero-photo { margin: 0; }
.hero-photo img, .photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: 0 14px 34px rgba(20,32,43,.16); }
.photo { margin: 0 0 18px; }
.photo figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }

/* sections */
section { padding-block: clamp(36px, 6vw, 68px); }
section.tint { background: var(--tint); }
section.dark { background: var(--ink); color: #fff; }
section.dark p { color: #cfd8e0; }
section.dark h2, section.dark h3 { color: #fff; }
.head-wrap { max-width: 640px; margin-bottom: 28px; }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h3 { margin-bottom: .3em; }
.card p { font-size: .97rem; color: var(--ink-soft); margin: 0; }
.card .price { font-weight: 800; color: var(--brand-dark); }
section.dark .card { background: #1f2b38; border-color: #2c3b4a; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { counter-increment: s; padding-left: 52px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #23303d; font-weight: 800; display: grid; place-items: center; }
.reviews { display: grid; gap: 16px; }
.review { background: #fff; border-left: 4px solid var(--accent); padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 1px 3px rgba(20,32,43,.06); }
.review p { font-size: .98rem; margin: 0 0 8px; }
.review cite { font-style: normal; font-weight: 700; font-size: .88rem; color: var(--ink-soft); }
.towns { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.towns li { border: 1px solid var(--line); background: #fff; border-radius: 100px; padding: 7px 15px; font-size: .9rem; font-weight: 600; }
.split { display: grid; gap: 28px; }
.fine { font-size: .85rem; color: var(--ink-soft); }
form label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
form input, form select, form textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid #93a0ad; border-radius: var(--radius); margin-bottom: 14px; background: #fff; }
footer.site { background: var(--ink); color: #cfd8e0; padding-block: 40px; }
footer.site a { color: #fff; }
footer.site h3 { font-size: 1rem; }
.foot-grid { display: grid; gap: 22px; }
.emergency { background: var(--accent); color: #23303d; text-align: center; font-weight: 700; padding: 10px; }

/* sticky mobile bar */
.actionbar { position: fixed; left: 0; right: 0; bottom: 44px; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-top: 1px solid var(--line); }
.actionbar a { padding: 15px 8px; text-align: center; font-weight: 800; text-decoration: none; color: var(--ink); font-size: .95rem; }
.actionbar a.primary { background: var(--brand); color: #fff; }

/* sample banner */
.sample { position: fixed; left: 0; right: 0; bottom: 0; background: #20272B; color: #fff; font-size: 12.5px; text-align: center; padding: 10px 12px; z-index: 99; line-height: 1.35; }
.sample a { color: #E2B872; font-weight: 700; }
.sample b { letter-spacing: .08em; }

/* phone menu */
.hdr .container { position: relative; }
.nav-btn { font: inherit; font-weight: 700; font-size: .95rem; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); min-height: 44px; padding: 0 14px; cursor: pointer; }
.hdr nav.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(20,32,43,.12); padding: 6px var(--gutter) 12px; }
.hdr nav.is-open a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.hdr nav.is-open a:last-child { border-bottom: 0; }
@media (max-width: 759px) { .hdr .btn { display: none; } .hdr .tel { font-size: .95rem; } }

/* forms that work */
form [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.field-err { color: #b3261e; font-size: .88rem; font-weight: 700; margin: -8px 0 12px; }
section.dark .field-err { color: #ffb4ab; }
section.dark form [aria-invalid="true"] { border-color: #ffb4ab; box-shadow: 0 0 0 1px #ffb4ab; }
.demo-confirm, .demo-slots { background: #fff; color: var(--ink); border-radius: var(--radius); border-top: 5px solid var(--accent); padding: 22px; box-shadow: 0 6px 22px rgba(20,32,43,.14); }
.demo-confirm:focus { outline: none; }
.demo-confirm h3, .demo-slots h3 { color: var(--ink) !important; font-size: 1.3rem; }
.demo-confirm h3::before { content: "✓"; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1rem; margin-right: 10px; vertical-align: 2px; }
section.dark .demo-confirm p, section.dark .demo-slots p { color: var(--ink-soft); }
.demo-confirm p strong { color: var(--ink); }
.demo-note { font-size: .85rem; background: var(--tint); padding: 10px 12px; border-radius: var(--radius); margin-top: 14px; }
.demo-sub { margin-bottom: 8px; }
.slot-day { margin: 14px 0 8px; font-size: .95rem; }
.slot-day span { color: var(--ink-soft); margin-left: 6px; }
.slot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { font: inherit; font-weight: 700; min-height: 44px; min-width: 88px; padding: 0 14px; border: 2px solid var(--brand); color: var(--brand-dark); background: #fff; border-radius: var(--radius); cursor: pointer; }
.slot:hover, .slot:focus-visible { background: var(--brand); color: #fff; }
.demo-toast { position: fixed; left: 50%; bottom: 112px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: #fff; font-size: .93rem; font-weight: 600; padding: 12px 16px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.25); width: max-content; max-width: calc(100% - 32px); z-index: 120; transition: opacity .2s, transform .2s; }
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }
.loc .open.closed { background: #f6e7e5; color: #8c2a20; }

@media (min-width: 760px) {
  .hero.has-photo .container { grid-template-columns: 1.05fr .95fr; gap: 44px; }
  .demo-toast { bottom: 70px; }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1.1fr .9fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .actionbar { display: none; }
  body { padding-bottom: 52px; }
}

/* The header nav row turns on at 1000px, not at the 760px layout breakpoint.
   As inline links the nav items are only 24px tall, which is under the 40px tap
   target a finger needs, so at tablet widths the phone menu button is shown
   instead. 1000px is where site-qa.sh stops checking tap targets, and the
   studio's own site switches its nav the same way (phone menu until 960px). */
@media (min-width: 1000px) {
  .hdr nav { display: flex; }
  .nav-btn { display: none; }
}