/* Eyeflora design tokens (care home edition) — the CMS Theme tab maps onto these custom properties. */
:root {
  --color-primary: #1c3802;
  --color-secondary: #1b2b0d;
  --color-accent: #9fec5a;
  --color-surface: #f4f7ee;
  --color-default: #3e433a;
  --color-muted: #6c7265;
  --color-line: #e2e8d8;
  --color-white: #ffffff;
  --color-highlight: #4f8f1a;
  --font-default: 'Urbanist', sans-serif;
  --font-primary: 'Urbanist', sans-serif;
  --font-heading: 'Urbanist', sans-serif;
  --radius: 20px;
  --section-max-width: 105rem;
  --section-pad-y: 100px;
  --base-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: var(--base-size); scroll-behavior: smooth; }
body { font-family: var(--font-default); color: var(--color-default); line-height: 1.65; background: var(--color-white); font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-secondary); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--color-accent); color: var(--color-secondary); }

.container { max-width: var(--section-max-width); margin: 0 auto; padding: 0 24px; }
section { padding: var(--section-pad-y) 0; position: relative; }
section.tinted { background: var(--color-surface); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; background: var(--color-accent); color: var(--color-secondary);
  font: 600 .95rem var(--font-primary); padding: .85rem 1.7rem; border-radius: 999px; border: 1px solid var(--color-accent);
  cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }
.btn.dark { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn.dark:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-secondary); }
.btn.ghost { background: transparent; border-color: currentColor; color: var(--color-primary); }
.btn.ghost:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

/* ── Section heads: eyebrow + big title on the left, intro on the right ── */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 500 .95rem var(--font-primary); color: var(--color-secondary); }
.eyebrow { position: relative; }
/* the leaf: its shape comes from the masks, its colours from the theme (fill = accent, outline = primary) */
.eyebrow::before, .eyebrow::after { content: ''; width: 22px; height: 22px; flex: none; -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat; }
.eyebrow::before { --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21v-7m0 0c0-4.4 2.4-7.3 6.5-8.2-.5 4.4-2.8 7.2-6.5 8.2zm0 2.6c-.2-3.2-2-5.3-5-6 .3 3.1 2 5.1 5 6z' fill='%23000'/%3E%3C/svg%3E"); background: var(--color-accent); }
.eyebrow::after { --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7m0 0c0-4.4 2.4-7.3 6.5-8.2-.5 4.4-2.8 7.2-6.5 8.2zm0 2.6c-.2-3.2-2-5.3-5-6 .3 3.1 2 5.1 5 6z'/%3E%3C/svg%3E"); background: var(--color-primary); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); margin-top: .6rem; max-width: 18ch; }
.section-head > p { color: var(--color-muted); max-width: 52ch; }
.section-head.centered { display: block; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head.centered h2 { margin: .6rem auto .9rem; }
.section-head.centered > p { margin: 0 auto; }

/* ── Leaf-tick list ── */
.tick-list { list-style: none; display: grid; gap: .65rem; }
.tick-list li { display: flex; gap: .7rem; align-items: flex-start; }
.tick-list li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: .2em; border-radius: 50%; background: var(--color-accent); }
/* the tick, drawn in CSS so it follows the theme colours */
.tick-list li { position: relative; }
.tick-list li::after { content: ''; position: absolute; left: 7.5px; top: calc(.2em + 4.5px); width: 5px; height: 9px;
  border: solid var(--color-secondary); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }

/* ── CQC ratings: the regulator's four-point scale (shared by the hero, CQC summary and rating blocks) ── */
.tone-outstanding { --tone: #f2b01e; --tone-soft: #fff3d1; --tone-ink: #4a3300; }
.tone-good { --tone: #4f8f1a; --tone-soft: #e6f4d6; --tone-ink: #1b2b0d; }
.tone-requires { --tone: #e8862a; --tone-soft: #fde9d4; --tone-ink: #4a2300; }
.tone-inadequate { --tone: #d6453d; --tone-soft: #fbe0de; --tone-ink: #4a0f0b; }
.tone-none { --tone: #9aa092; --tone-soft: #eef1ea; --tone-ink: #3e433a; }
.rating-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap;
  background: var(--tone-soft); color: var(--tone-ink); }
.rating-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.cqc-mark { display: inline-grid; place-items: center; height: 40px; padding: 0 .7rem; border-radius: 12px; background: var(--color-primary); color: var(--color-accent);
  font-weight: 800; letter-spacing: .04em; font-size: .9rem; }

/* ── Filter chips ── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { border: 1px solid var(--color-line); background: #fff; color: var(--color-secondary); border-radius: 999px; padding: .5rem 1.15rem; font-weight: 500; cursor: pointer; transition: all .25s ease; }
.chips button:hover { border-color: var(--color-primary); }
.chips button.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── Back to top (ScrollTop, on every page) ── */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--color-primary); color: var(--color-accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--color-secondary) 25%, transparent);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.to-top.shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--color-secondary); }
.to-top > svg:not(.ring) { width: 20px; height: 20px; }
.to-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 2.5; }
.to-top .ring .track { stroke: rgba(255, 255, 255, .15); }
.to-top .ring .bar { stroke: var(--color-accent); stroke-dashoffset: var(--offset, 138.2); transition: stroke-dashoffset .1s linear; }

/* ── Missing entry (care type / story not found) ── */
.missing { text-align: center; padding: 60px 0; }
.missing h2 { margin-bottom: 1.4rem; }

/* ── Cards ── */
.card { background: var(--color-surface); border-radius: var(--radius); padding: 14px; }

/* ── Header ── */
.site-header { position: sticky; top: 0; z-index: 60; padding: 14px 0; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px color-mix(in srgb, var(--color-secondary) 8%, transparent); }
.site-header .bar { display: flex; align-items: center; gap: 2rem; background: var(--color-surface); border-radius: 999px; padding: 12px 14px 12px 24px; }
.logo { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.5rem var(--font-heading); color: var(--color-secondary); letter-spacing: -.02em; }
.logo img { max-height: 40px; width: auto; }
.logo svg { width: 32px; height: 32px; color: var(--color-primary); }
.nav { margin-left: auto; display: flex; gap: 2rem; font-weight: 500; }
.nav a { position: relative; padding: .3rem 0; color: var(--color-secondary); }
.nav a:hover { color: var(--color-primary); }
.nav a.router-link-active:not([href="/"]), .nav a.router-link-exact-active { color: var(--color-highlight); }
.nav a.router-link-active::after, .nav a.router-link-exact-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--color-accent); }
.nav a[href="/"].router-link-active:not(.router-link-exact-active)::after { display: none; }
.nav a[href="/"].router-link-active:not(.router-link-exact-active) { color: var(--color-secondary); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--color-primary); border-radius: 50%; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span { width: 18px; height: 2px; background: var(--color-primary); transition: transform .3s ease, opacity .3s ease; }
.site-header.open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.open .menu-btn span:nth-child(2) { opacity: 0; }
.site-header.open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-panel { margin-top: 10px; background: var(--color-surface); border-radius: var(--radius); padding: 10px 22px 20px; }
.mobile-panel a:not(.btn) { display: block; padding: .8rem 0; border-bottom: 1px solid var(--color-line); font-weight: 500; color: var(--color-secondary); }
.mobile-panel .btn { margin-top: 1rem; }
.drop-enter-active, .drop-leave-active { transition: opacity .25s ease, transform .25s ease; }
.drop-enter-from, .drop-leave-to { opacity: 0; transform: translateY(-8px); }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-weight: 500; font-size: .9rem; color: var(--color-secondary); margin-bottom: .4rem; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: .95rem 1.1rem; color: var(--color-secondary);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.form-grid ::placeholder { color: color-mix(in srgb, var(--color-muted) 70%, #fff); }
.field-err { color: #b42318; font-size: .82rem; margin-top: .35rem; }

/* ── Reveal on scroll (content shows if JS never runs) ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {
  .nav, .site-header .bar > .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .section-head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  :root { --section-pad-y: 68px; --radius: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 36px; }
}

/* Header wordmark on phones: one line, even for a longer business name */
@media (max-width: 560px) { .site-header .logo { font-size: 1.12rem; white-space: nowrap; letter-spacing: -.02em; } }
@media (max-width: 360px) { .site-header .logo { font-size: 1rem; } }

/* Logo text beside the logo (Settings › Logo text: one line per line, Logo subtext underneath) */
.logo .wordmark { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.logo .wl { display: block; }
.logo .sub { display: block; margin-top: .3em; font-size: .5em; font-weight: 500; letter-spacing: .01em; color: var(--color-muted); }

/* The highlighted words in a section heading (<span class="grad">): the same markup as Haven Grove, so headings saved in either template render alike */
.grad { color: var(--color-highlight); }

/* a wide logo image (or one still loading) can never push the header past the screen */
.logo { min-width: 0; }
.logo img { max-width: min(46vw, 240px); object-fit: contain; }
.logo .wordmark { min-width: 0; }