/* ==========================================================================
   John Clarkson ENT — site stylesheet
   Built from the JCL Figma file, "Main" page (desktop 1280 / mobile 390).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&family=Inter:wght@400;500;600&family=Source+Sans+3:wght@700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700&display=swap');

/* ---- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

/* ---- Design tokens --------------------------------------------------
   Spacing tokens use the Figma variable names (page-pad, mini-margin…)
   and are redefined at the mobile breakpoint, so layout spacing follows
   the mobile frames automatically. ---- */
:root {
  --page-pad: clamp(24px, 11.72vw, 150px);
  --header-pad: clamp(24px, 7.8vw, 100px);
  --page-top-margin: 80px;
  --mini-margin: 50px;
  --gap-lg: 20px;
  --head-gap: 4px;
  --box-pad: 30px;

  --ink: #5b6266;          /* "john-grey" */
  --ink-soft: #3a3a34;
  --muted: #979899;
  --cream: #f9f8f6;        /* "almost-white" */
  --footer-bg: #eeeeed;
  --accent: #d78717;
  --border: #797979;
  --callout-bg: rgba(254, 234, 206, 0.25);

  --font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', var(--font);
  --font-brand: 'Source Sans 3', 'Segoe UI', 'Myriad Pro', var(--font);
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

@media (max-width: 767px) {
  :root {
    --page-pad: 15px;
    --header-pad: 16px;
    --page-top-margin: 20px;
    --mini-margin: 20px;
    --gap-lg: 20px;
    --head-gap: 8px;
    --box-pad: 15px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ------------------------------------------------------
   Named after the Figma text styles. ---- */
.mini-head {                    /* "Mini Head" / "Mini Head Mobile" */
  font-size: 24px;
  font-weight: 400;
  line-height: 44.16px;
  letter-spacing: -0.768px;
  text-transform: capitalize;
}
.card-title {                   /* "Mini Mini Head" */
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: capitalize;
}
p, li, .body { font-size: 14px; line-height: 17.4px; }   /* "Body" */
.body-lg, .body-lg li { font-size: 16px; line-height: 26.4px; } /* "bullet point" */
.serif-quote {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--accent);
}

@media (max-width: 767px) {
  .mini-head {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
  }
  .card-title { font-size: 16px; line-height: 20px; }
  p, li, .body { font-size: 12px; line-height: 16px; }
  .body-lg, .body-lg li { font-size: 14px; line-height: 20px; }
}

.text-link { text-decoration: underline; text-underline-position: from-font; }

/* ---- Layout helpers ---------------------------------------------------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.section {
  padding-top: var(--page-top-margin);
  padding-bottom: var(--page-top-margin);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.block {
  display: flex;
  flex-direction: column;
  gap: var(--head-gap);
}
.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 15px;
  z-index: 100;
  background: #1a1a1a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 15px; }

/* ---- Site header ----------------------------------------------------------
   Brand lock-up on the left, "Menu" + hamburger on the right at every
   width; the nav opens as a panel below the bar. ---- */
.site-header {
  position: relative;
  z-index: 10;
  background: var(--ink);
}
.site-header-bar {
  max-width: 1280px;
  height: 172px;
  margin: 0 auto;
  padding: 0 var(--header-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-brand {
  display: flex;
  flex-direction: column;
  gap: 15px;
  white-space: nowrap;
}
.brand-name-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  font-family: var(--font-brand);
  font-weight: 700;
}
.brand-name {
  font-size: 36px;
  line-height: 20px;
  letter-spacing: -0.96px;
  color: #fff;
}
.brand-quals {
  font-size: 22px;
  line-height: 10px;
  color: var(--muted);
}
.brand-title-row {
  display: flex;
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 12px;
  color: var(--accent);
}
.brand-title-row strong { font-weight: 700; }

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.nav-toggle-label {
  font-size: 24px;
  line-height: 44.16px;
  letter-spacing: -0.768px;
}
.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 24px;
}
.nav-toggle-bars span {
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
.nav-toggle:hover, .nav-toggle:focus-visible { color: #fff; }

/* Without JS the nav renders as a plain list under the bar; nav.js adds
   .js-enabled so it collapses behind the toggle instead. */
.site-nav {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-nav ul {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px var(--header-pad) 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.site-nav a {
  font-size: 24px;
  line-height: 44.16px;
  letter-spacing: -0.768px;
  color: var(--cream);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.js-enabled .site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.js-enabled .site-nav:not(.is-open) { display: none; }

@media (max-width: 767px) {
  .site-header-bar { height: 80px; }
  .site-brand { gap: 4px; }
  .brand-name-row { gap: 6px; }
  .brand-name { font-size: 22px; line-height: 22px; letter-spacing: -0.5px; }
  .brand-quals { font-size: 11px; line-height: 11px; }
  .brand-title-row { gap: 5px; font-size: 14px; line-height: 14px; }
  .nav-toggle { gap: 6px; }
  .nav-toggle-label { font-size: 12px; line-height: 18px; }
  .nav-toggle-bars { width: 28px; height: 18px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-nav ul { padding: 12px var(--header-pad) 24px; }
  .site-nav a { font-size: 18px; line-height: 36px; letter-spacing: 0; }
}

/* ---- Home: hero -------------------------------------------------------------
   Orange serif blurb on grey, then the portrait, which bleeds from the
   left edge and stops 350/1280 short of the right. ---- */
.hero {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--mini-margin);
}
.hero-blurb {
  max-width: calc(580px + var(--page-pad));
  margin-left: max(0px, (100% - 1280px) / 2);
  padding-left: var(--page-pad);
  font-size: 23px;
  line-height: 22.44px;
  gap: var(--gap-lg);
}
.hero-blurb p { font-size: inherit; line-height: inherit; }
.hero-image {
  width: 72.66%;
  aspect-ratio: 1130 / 723;
}
.hero-image img { object-position: left top; }

@media (max-width: 767px) {
  .hero { gap: 0; }
  .hero-blurb {
    padding: 0 calc(var(--page-pad) + 2px) var(--page-pad);
    font-size: 14px;
    line-height: 20px;
    gap: 8px;
  }
  .hero-image { width: 100%; aspect-ratio: 650 / 550; }
}

/* ---- Home: clinic ------------------------------------------------------------ */
.clinic {
  background: var(--cream);
  display: grid;
  grid-template-columns: 476px 1fr;
  column-gap: 100px;
  row-gap: var(--gap-lg);
  padding-left: max(var(--page-pad), (100% - 1280px) / 2 + var(--page-pad));
}
.clinic-centre { grid-column: 1; grid-row: 1; align-self: end; }
.clinic-manager { grid-column: 1; grid-row: 2; align-self: start; }
.clinic-image {
  grid-column: 2;
  grid-row: 1 / 3;
  aspect-ratio: 652 / 457;
}
.clinic-image img { object-position: left center; }

@media (max-width: 1023px) {
  .clinic { grid-template-columns: 1fr 1fr; column-gap: 50px; }
}
@media (max-width: 767px) {
  .clinic {
    grid-template-columns: 1fr;
    padding: var(--page-top-margin) var(--page-pad);
  }
  .clinic-centre, .clinic-manager, .clinic-image { grid-column: 1; grid-row: auto; }
}

/* ---- New Patients -------------------------------------------------------------
   Text blocks in the left column, map + entrance photo in the right. On
   mobile each image follows the block it belongs to (DOM order). ---- */
.np-section { padding-top: var(--mini-margin); }
.np-grid {
  display: grid;
  grid-template-columns: 1fr 454px;
  column-gap: 50px;
  row-gap: var(--gap-lg);
  align-items: start;
}
.np-grid > .block { grid-column: 1; }
.np-map { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 2481 / 1749; }
.np-photo { grid-column: 2; grid-row: 3 / 6; aspect-ratio: 720 / 479; }
.np-referrals { gap: 6px; }

.callout {
  background: var(--callout-bg);
  border-left: 2px solid var(--accent);
  padding: 12px 22px;
}

@media (max-width: 1023px) {
  .np-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .np-grid { grid-template-columns: 1fr; }
  .np-grid > *, .np-map, .np-photo { grid-column: 1; grid-row: auto; }
  .np-map { margin-top: -5px; }
  .np-photo { margin-top: -5px; }
  .callout { padding: 12px 14px; }
}

/* ---- Procedures (pending approval: the page lives on the pending-approval-pages
   branch and is not in this release) --------------------------------------- */
.page-band {
  background: var(--ink);
  height: 148px;
}
.proc-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.proc-intro { flex: 0 0 393px; padding-right: 50px; }
.proc-cards {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--box-pad);
}
.proc-card {
  border: 1px solid var(--ink);
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.proc-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--head-gap);
  padding: 0 30px 0 51px;
  list-style: disc;
}

@media (max-width: 767px) {
  .page-band { height: 40px; }
  .proc-wrap { flex-direction: column; gap: var(--gap-lg); }
  .proc-intro { flex-basis: auto; padding-right: 0; }
  .proc-cards { width: 100%; flex-basis: auto; }
  .proc-card { padding: 15px; gap: 10px; }
  .proc-card ul { padding: 0 0 0 20px; gap: 4px; }
}

/* ---- Post-Surgery Care (pending approval, as above) -------------------------- */
.psc-section { gap: var(--mini-margin); }
.psc-daily { gap: 15px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 30px;
}
.step-card {
  border: 1px solid var(--border);
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.psc-row {
  display: flex;
  align-items: flex-start;
}
.psc-content { flex: 1 1 0; min-width: 0; padding-right: 50px; }
.psc-content ul { list-style: disc; padding-left: 24px; }
.psc-followup p { font-family: var(--font-ui); }
.psc-media {
  flex: 0 0 459px;
  height: 306px;
}

@media (max-width: 1023px) {
  .psc-media { flex-basis: 40%; height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .steps-grid { grid-template-columns: 1fr; row-gap: 15px; }
  .step-card { padding: 15px; }
  .psc-row { flex-direction: column; gap: var(--gap-lg); }
  .psc-content { padding-right: 0; }
  .psc-media { flex-basis: auto; width: 100%; }
}

/* ---- About John ------------------------------------------------------------------- */
.about-hero {
  position: relative;
  aspect-ratio: 1280 / 750;
  overflow: hidden;
}
.about-hero img { object-position: center top; }
.about-quote {
  position: absolute;
  top: 6.4%;
  left: 18.67%;
  width: 34.45%;
  font-size: clamp(16px, 1.875vw, 24px);
  line-height: 1.84;
  letter-spacing: -0.768px;
}
.about-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}
.about-columns {
  flex: 0 1 549px;
  gap: 40px;
  color: var(--ink-soft);
}

@media (max-width: 767px) {
  .about-hero { aspect-ratio: 390 / 230; }
  .about-quote {
    top: 20px;
    left: 68px;
    width: 173px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
  }
  .about-body { flex-direction: column; gap: 20px; }
  .about-columns { flex-basis: auto; gap: 20px; }
  .about-columns .block { gap: 4px; }
}

/* ---- Site footer ------------------------------------------------------------------ */
.site-footer { background: var(--footer-bg); color: var(--ink); }
.site-footer-inner {
  padding-top: var(--mini-margin);
  padding-bottom: var(--mini-margin);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.footer-about { flex: 0 1 496px; }
.footer-col { display: flex; flex-direction: column; gap: 5px; }
.footer-heading {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 26.4px;
}
.footer-about p:not(.footer-heading) { font-size: 16px; line-height: 22.44px; }
.footer-about .footer-hours { margin-top: 22.44px; }
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-ui);
}
.footer-links a { line-height: 23.76px; }
.footer-contact a { font-size: 16px; }
.footer-nav a { font-size: 14px; }
.footer-links a:hover { color: var(--accent); }
.footer-copyright {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 19px;
}

@media (max-width: 767px) {
  .site-footer-inner { padding: 28px 16px 24px; gap: 24px; }
  .footer-cols { flex-wrap: wrap; gap: 24px; }
  .footer-about { flex-basis: 100%; gap: 8px; }
  .footer-nav-col { order: 1; flex: 1 1 0; }
  .footer-contact-col { order: 2; flex: 1 1 0; }
  .footer-col { gap: 6px; }
  .footer-heading { font-size: 14px; line-height: 20px; }
  .footer-about p:not(.footer-heading) { font-size: 12px; line-height: 16px; }
  .footer-about .footer-hours { margin-top: 0; }
  .footer-links { gap: 6px; }
  .footer-links a, .footer-contact a, .footer-nav a { font-size: 12px; line-height: 20px; }
  .footer-copyright { font-size: 10px; line-height: 16px; }
}

/* ---- Utility ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}