/* =============================================================
   OAKWOOD NURSING HOME · Design foundations / initial prototype
   Colours sampled from the printed logo, with accessible additions.
   All photographic placeholders are served by placehold.co.
   ============================================================= */

:root {
  /* Logo-inspired brand palette */
  --colour-green: #60726a;
  --colour-green-deep: #304f41;
  --colour-green-darkest: #20382e;
  --colour-coral: #db9892;
  --colour-butter: #e1d2a5;
  --colour-ocher: #d7b47d;
  --colour-charcoal: #46423c;

  /* Supporting neutrals */
  --colour-page: #faf8f3;
  --colour-surface: #fffdf9;
  --colour-tint: #f1f1e9;
  --colour-border: #e3e1d8;
  --colour-muted: #625f58;
  --colour-on-dark: #ffffff;

  /* Typography */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --heading-1: clamp(2.65rem, 5.5vw, 4.8rem);
  --heading-2: clamp(2rem, 3.6vw, 3.25rem);

  /* Sticky header anchor offset: measured in script.js */
  --header-offset: 8rem;

  /* Layout */
  --container-width: 1180px;
  --container-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-space: clamp(4.5rem, 8vw, 7.5rem);
  --radius-sm: 0.65rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.7rem;
  --shadow-soft: 0 15px 40px rgb(36 48 39 / 7%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset); }
body {
  margin: 0;
  color: var(--colour-charcoal);
  background: var(--colour-page);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--colour-butter); color: var(--colour-green-darkest); }
:focus-visible { outline: 3px solid #af5a50; outline-offset: 4px; }
section[id] { scroll-margin-top: var(--header-offset); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.17; }
h1, h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.035em; }
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); color: var(--colour-green-deep); }
h3 { font-size: 1.3rem; }
p { margin-bottom: 1.15rem; }

.container { width: min(100% - 2 * var(--container-gutter), var(--container-width)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--tinted { background: var(--colour-tint); }
.eyebrow { margin-bottom: 0.75rem; color: var(--colour-green); font-size: 0.81rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.eyebrow--light { color: var(--colour-butter); }
.draft-note { color: var(--colour-muted); font-size: 0.95rem; }

.skip-link {
  position: absolute; z-index: 100; top: -5rem; left: 1rem;
  padding: 0.6rem 1rem; background: var(--colour-surface); color: var(--colour-green-darkest);
  border: 2px solid var(--colour-green-darkest); border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

/* Sticky header, with nav and anchors kept visible on smaller screens. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--colour-surface); border-bottom: 1px solid var(--colour-border); box-shadow: 0 3px 14px rgb(36 48 39 / 5%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; min-height: 112px; }
.brand { flex: 0 0 auto; display: block; width: clamp(225px, 27vw, 310px); }
.brand img { width: 100%; height: auto; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.55rem; margin: 0; padding: 0; list-style: none; }
.nav-list a { display: inline-block; padding-block: 0.35rem; color: var(--colour-charcoal); font-size: 0.95rem; font-weight: 600; text-decoration: none; text-underline-offset: 0.35em; }
.nav-list a:hover { color: var(--colour-green-deep); text-decoration: underline; text-decoration-color: var(--colour-coral); text-decoration-thickness: 2px; }

/* Hero */
.hero { overflow: hidden; padding-block: clamp(2.25rem, 5vw, 4.25rem); background: linear-gradient(115deg, #f8f4eb 0%, var(--colour-page) 58%, #f0eee5 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(2rem, 5vw, 5.8rem); }
.hero__copy { padding-block: 1.5rem; }
.hero h1 { margin-bottom: 1.25rem; color: var(--colour-green-deep); }
.hero__copy > p:not(.eyebrow) { max-width: 36ch; font-size: var(--text-lg); }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 1.25rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 48px; padding: 0.8rem 1.4rem; border: 2px solid transparent; border-radius: 100px; font-size: 0.99rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color 160ms ease, transform 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: #fff; background: var(--colour-green-deep); }
.button--primary:hover { background: var(--colour-green-darkest); }
.button--text { color: var(--colour-green-deep); }
.button--text:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.hero__image { min-width: 0; overflow: hidden; aspect-ratio: 1.27; background: #e7e9e2; border-radius: 45% 45% var(--radius-lg) var(--radius-lg) / 25% 25% var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-soft); }
.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Direct route to reports because publishing the report is the primary goal. */
.reports-strip { background: var(--colour-butter); }
.reports-strip__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; color: var(--colour-green-darkest); }
.reports-strip p { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-weight: 650; }
.reports-strip__icon { font-size: 1.65rem; line-height: 1; }
.reports-strip a { flex: 0 0 auto; font-weight: 750; text-underline-offset: 0.3em; }

.split-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.image-frame { min-height: 280px; overflow: hidden; background: #e7e9df; }
.image-frame--rounded { border-radius: var(--radius-lg); }
.image-frame img { width: 100%; height: 100%; min-height: 330px; aspect-ratio: 1.33; object-fit: cover; }
.section-copy { max-width: 530px; }
.section-copy h2 { margin-bottom: 1.2rem; }
.section-copy p { font-size: var(--text-lg); }
.section-copy .draft-note { font-size: 0.97rem; }

.section-heading { max-width: 690px; margin-bottom: 2.35rem; }
.section-heading h2 { margin-bottom: 0.9rem; }
.section-heading p:last-child { margin: 0; }
/* Both carousels use Splide. Controls sit above the track instead of covering content. */
.splide { min-width: 0; }
/* Useful if the CDN is unavailable: keep the content readable as a grid. */
.splide:not(.is-initialized) .splide__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.testimonials-carousel:not(.is-initialized) .splide__list { grid-template-columns: 1fr; }
@media (max-width: 980px) {
  .care-carousel:not(.is-initialized) .splide__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .care-carousel:not(.is-initialized) .splide__list { grid-template-columns: 1fr; }
}
.splide__pagination { position: static; gap: 0.4rem; margin-top: 1.5rem; padding: 0; }
.splide__pagination__page { background: #9aa79c; opacity: 1; }
.splide__pagination__page.is-active { background: var(--colour-green-deep); }
.care-carousel .splide__slide { display: flex; }
.info-card { width: 100%; height: 100%; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); box-shadow: var(--shadow-soft); }
.info-card__number { display: inline-block; margin-bottom: 1.8rem; color: #9e5b53; font-family: var(--font-heading); font-size: 1.5rem; }
.info-card h3 { margin-bottom: 0.75rem; color: var(--colour-green-deep); font-family: var(--font-heading); font-size: 1.55rem; font-weight: 400; }
.info-card p { margin-bottom: 0; }

.testimonials-layout { display: grid; grid-template-columns: 0.75fr minmax(0, 1.25fr); gap: clamp(2rem, 8vw, 7rem); align-items: center; }
.testimonials-carousel { min-width: 0; }
.testimonial-card { height: 100%; margin: 0; padding: clamp(2rem, 4vw, 3rem); border-left: 4px solid var(--colour-coral); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: #f8f0e9; }
.testimonial-card blockquote { margin: 0 0 1rem; }
.testimonial-card blockquote p { margin: 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.45; }
.testimonial-card figcaption { color: var(--colour-muted); font-size: 0.95rem; }

.section--reports { color: var(--colour-on-dark); background: var(--colour-green-deep); }
.reports-layout { display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.section--reports h2 { color: var(--colour-on-dark); }
.section--reports p { color: #f4f6ef; }
.reports-documents { display: grid; gap: 1rem; min-width: 0; }
.document-card__link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--colour-green-deep); font-weight: 750; text-underline-offset: 0.25em; }
.document-card__link:hover { text-decoration-thickness: 2px; }
.document-card__link:focus-visible { outline: 3px solid var(--colour-coral); outline-offset: 4px; border-radius: 2px; }
.document-card { display: flex; align-items: flex-start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--radius-md); background: var(--colour-surface); color: var(--colour-charcoal); }
.document-card__icon { color: var(--colour-green); font-size: 2.5rem; line-height: 1; }
.document-card h3 { margin-bottom: 0.5rem; color: var(--colour-green-deep); font-family: var(--font-heading); }
.document-card p { margin-bottom: 0.65rem; color: var(--colour-charcoal); font-size: 0.95rem; }
.document-card__pending { display: inline-block; padding: 0.3rem 0.6rem; background: var(--colour-tint); border-radius: var(--radius-sm); color: var(--colour-muted); font-size: 0.85rem; }

.section--contact { background: var(--colour-page); }
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: clamp(2rem, 8vw, 8rem); }
.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; }
.contact-details h3 { margin-bottom: 0.4rem; color: var(--colour-green-deep); font-size: 0.85rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.1em; }
.contact-details p { margin-bottom: 0; }
.contact-details address { font-style: normal; line-height: 1.7; }
.contact-details__address { grid-column: 1 / -1; }
.contact-details a { overflow-wrap: anywhere; color: var(--colour-green-deep); font-weight: 650; text-underline-offset: 0.2em; }
.contact-details .draft-note { font-size: 0.95rem; }
/* Wide, opt-in map underneath the contact information; no Google request until clicked. */
.contact-map { grid-column: 1 / -1; margin-top: -1.25rem; }
.contact-map__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.contact-map__heading h3 { margin-bottom: 0; color: var(--colour-green-deep); font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; }
.contact-map__heading a { color: var(--colour-green-deep); font-weight: 700; text-underline-offset: 0.25em; }
.contact-map__frame { overflow: hidden; border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-tint); }
.contact-map__prompt { display: flex; min-height: 330px; padding: 2rem; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, #e7ebdf, #f7f4ea); }
.contact-map__prompt p { margin-bottom: 0.6rem; }
.contact-map__disclosure { max-width: 52ch; color: var(--colour-muted); font-size: 0.9rem; }
.contact-map__prompt .button { margin-top: 1rem; cursor: pointer; }
.contact-map iframe { display: block; width: 100%; height: 360px; border: 0; }

.site-footer { background: var(--colour-green-darkest); color: #f5f4ee; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 90px; padding-block: 1rem; font-size: 0.92rem; }
.site-footer p { margin: 0; }
.site-footer a { text-underline-offset: 0.3em; }

@media (max-width: 1000px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.2rem; padding-block: 0.7rem 1rem; }
  .nav-list { gap: 0.2rem 1.4rem; }
  .hero__grid { gap: 2rem; }
}

@media (max-width: 760px) {
  .hero__grid, .split-layout, .testimonials-layout, .reports-layout, .contact-layout { grid-template-columns: 1fr; }
  .hero__copy { padding-block: 0.4rem; }
  .hero__copy > p:not(.eyebrow) { max-width: 45ch; }
  .hero__image { max-height: 510px; }
  .info-card__number { margin-bottom: 0.7rem; }
  .image-frame { max-width: 620px; }
  .reports-layout { gap: 1.5rem; }
  .contact-details { gap: 1.6rem; }
}

@media (max-width: 480px) {
  .site-header__inner { min-height: 0; padding-block: 0.5rem 0.65rem; gap: 0.1rem; }
  .brand { width: min(100%, 200px); }
  .nav-list { gap: 0 1.1rem; }
  .nav-list a { min-height: 38px; font-size: 0.89rem; }
  .hero { padding-block: 2.1rem 2.7rem; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .reports-strip__inner { align-items: flex-start; flex-direction: column; }
  .contact-details { grid-template-columns: 1fr; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}