/* ==========================================================================
   Better Health
   Layout is CSS Grid only — no flexbox anywhere in this file.
   All sizes derive from the 2800px PSD at a 1:2 scale (1400px design width).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette, sampled from the comp */
  --blue:        #427ba3;
  --blue-pale:   #f5f8fb;
  --navy:        #0e293c;
  --cream:       #f7ede2;
  --orange:      #f48852;
  --coral:       #ef6251;
  --white:       #ffffff;

  /* Typefaces */
  --display: "Rum Raisin", "Trebuchet MS", sans-serif;
  --body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type. Each step hits its PSD size exactly at a 1400px viewport
     and shrinks proportionally below that. */
  --fs-micro:    clamp(0.5rem,   0.714vw, 0.625rem);    /* 10   px */
  --fs-body:     clamp(1rem,     1.786vw, 1.5625rem);   /* 25   px */
  --fs-service:  clamp(1rem,     2.321vw, 2.0313rem);   /* 32.5 px */
  --fs-nav:      clamp(1.5rem, 2.857vw, 2.2rem);      /* 40   px */
  --fs-btn:      clamp(1.125rem, 2.857vw, 2.5rem);      /* 40   px */
  --fs-btn-lg:   clamp(1.125rem, 3.036vw, 2.6563rem);   /* 42.5 px */
  --fs-h3:       clamp(1.5rem,   3.571vw, 3.125rem);    /* 50   px */
  --fs-h2-sm:    clamp(1.75rem,  4.464vw, 3.9063rem);   /* 62.5 px */
  --fs-h2:       clamp(2rem,     5.357vw, 4.6875rem);   /* 75   px */
  --fs-h1:       clamp(2.25rem,  6.071vw, 5.3125rem);   /* 85   px */

  /* Horizontal insets, measured from the comp's 1400px page */
  --inset-l:  clamp(1.25rem, 19.786vw, 277px);
  --inset-r:  clamp(1.25rem, 10.429vw, 146px);
  --inset-xr: clamp(1.25rem, 26.679vw, 373px);

  --page: 1400px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.2;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

h1, h2, h3, p, ul { margin: 0; }

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

/* The comp sets justified-left copy with hyphenation; match the break points. */
.about__copy,
.process__copy,
.practitioner__copy,
.prose {
  hyphens: auto;
}

/* Centred page rail. Sections are full-bleed; their inner grids use this. */
.shell {
  display: grid;
  width: min(100%, var(--page));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Announcement bar + masthead
   -------------------------------------------------------------------------- */

.announce {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 4px 1rem;
  background: var(--blue);
  color: var(--cream);
  font-family: var(--display);
  font-size: var(--fs-body);
  line-height: 1;
}

.masthead {
  background: var(--white);
}

.nav {
  display: grid;
  grid-template-columns: 1fr 5fr;
  justify-content: center;
  align-items: center;
  min-height: 115px;
  padding-inline: 1rem;
}

.nav__link {
  font-family: var(--display);
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--blue);
  text-decoration: none;
  margin:0px 10px;
  padding:4px;
  padding-block: 4px;
  border-bottom: 3px solid transparent;
}

.nav__link:hover,
.nav__link:focus-visible { border-bottom-color: var(--orange); }

.nav__logo {
  display: grid;
  place-items: center;
}

.nav__logo img { width: clamp(46px, 6.643vw, 93px); }

/* Current page, driven by the body class each .php file sets */
.page-home    .nav__link[href="index.php"],
.page-about   .nav__link[href="about.php"],
.page-services .nav__link[href="services.php"],
.page-treat .nav__link[href="How-we-Treat.php"],
.page-schedule .nav__link[href="schedule.php"],
.page-paperwork .nav__link[href="paperwork.php"],
.page-resources .nav__link[href="Resourcess.php"],
.page-contact .nav__link[href="contact.php"] {
  border-bottom-color: var(--blue);
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  height: clamp(190px, 25.071vw, 351px);
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Short banner used on the interior pages */
.pagehead {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(150px, 15vw, 210px);
  padding: 2.5rem 1.5rem;
  background: linear-gradient(to right, var(--blue), var(--blue-pale));
  overflow: hidden;
}

.pagehead__title {
  font-family: var(--display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. About
   -------------------------------------------------------------------------- */


.about {
  position: relative;
  z-index: 0;
  padding-top: 15px;
  padding-bottom: 278px;
  background: var(--white);
}
 
/* Blue-to-white band sitting behind the photograph */
.about__band {
  position: absolute;
  top: 0;
  left: 0;
  right: calc(50% + min(100%, var(--page)) * 0.07714);
  height: 351px;
  background: linear-gradient(to right, var(--blue), var(--blue-pale));
}
 
.about__inner {
  position: relative;
  width: min(100% - 2.5rem, 934px);
  margin-inline: auto;
}
 
.about__title {
  font-family: var(--display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;      /* line box is taller than the cap height */
}
 
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 453fr) minmax(0, 466fr);
  column-gap: 15px;
  align-items: start;
}
 
.about__photo { width: 100%; }
 
.about__copy { padding-top: 15px; }
 
.about__copy p + p { margin-top: 1.2em; }
 
.about__cta {
  display: grid;
  justify-items: center;
  margin-top: 42px;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-grid;
  place-items: center;
  font-family: var(--display);
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.btn--learn {
  min-width: 234px;
  min-height: 51px;
  padding: 0 1.25rem;
  font-size: var(--fs-btn-lg);
  background: var(--blue);
  border-radius: 17px;
  box-shadow: 0 0 14px rgba(66, 123, 163, 0.55);
}

.btn--book {
  min-width: 285px;
  min-height: 62px;
  padding: 0 1.25rem;
  font-size: var(--fs-btn);
  background: var(--coral);
  border-radius: 23px;
  box-shadow: 0 0 14px rgba(239, 98, 81, 0.55);
}

.btn:hover,
.btn:focus-visible { filter: brightness(1.08); }

/* --------------------------------------------------------------------------
   7. Services — the orange card straddles the white and cream sections
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  background: var(--cream);
}

.services__card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100% - 2.5rem, 929px);
  margin-inline: auto;
  margin-top: -206px;              /* pulls the card up into the white band */
  padding: 14px clamp(1.25rem, 5vw, 70px) 82px;
  background: var(--orange);
  border-radius: clamp(40px, 9.893vw, 138px);
}

.services__title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: clamp(1rem, 2.571vw, 36px);
  row-gap: 47px;
  font-size: var(--fs-service);
}

.services__list li { line-height: 1; }


.services__cta {
  display: grid;
  justify-items: center;
  margin-top: -35px;               /* button overlaps the card's lower edge */
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   8. Our process
   -------------------------------------------------------------------------- */

.process {
  background: var(--cream);
  padding-top: 51px;
  padding-bottom: 40px;
}

.process__inner {
  display: grid;
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-left: var(--inset-l);
  padding-right: var(--inset-r);
}

.process__title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1;
  margin-bottom: 6px;
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 580fr) minmax(0, 380fr);
  column-gap: 17px;
  align-items: start;
}

.process__copy p + p { margin-top: 1.2em; }

.process__frame {
  margin-top: 3px;
  padding: 7px;
  background: var(--cream);
  border: 2px solid var(--blue);
}

/* --------------------------------------------------------------------------
   9. Practitioner
   -------------------------------------------------------------------------- */

.practitioner {
  position: relative;
  padding-top: 40px;
  padding-bottom: 56px;
  background: var(--white);
  overflow: hidden;
}

.practitioner__band {
  position: absolute;
  top: 0;
  right: 0;
  left: calc(50% + min(100%, var(--page)) * 0.12214);
  height: 306px;
  background: linear-gradient(to right, var(--white) 15%, var(--orange));
}

.practitioner__inner {
  position: relative;
  display: grid;
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-left: var(--inset-l);
  padding-right: var(--inset-xr);
}

.practitioner__title {
  font-family: var(--display);
  font-size: var(--fs-h2-sm);
  line-height: 1;
  margin-bottom: 20px;
}

.practitioner__grid {
  display: grid;
  grid-template-columns: minmax(0, 500fr) minmax(0, 195fr);
  column-gap: 54px;
  align-items: start;
}

.practitioner__copy { padding-left: 35px; }

.practitioner__name {
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--blue);
  margin-bottom: 20px;
}

.practitioner__copy p + p { margin-top: 1.2em; }

.practitioner__portrait {
  width: 100%;
  margin-top: 51px;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */


.footer {
  background: var(--blue);
  color: var(--cream);
}

.footer__inner {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 150px;
  align-items: center;
  column-gap: 24px;
  width: min(100%, var(--page));
  min-height: 101px;
  margin-inline: auto;
  padding: 18px 30px;
}

.footer__logo {
  display: grid;
  place-items: center;
}

.footer__logo img {
  width: clamp(60px, 5.857vw, 82px);
}

.footer__nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  column-gap: clamp(8px, 1.15vw, 16px);
}

.footer__link {
  font-size: clamp(14px, 1.45vw, 22px);
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.footer__link:hover,
.footer__link:focus-visible {
  border-bottom-color: var(--cream);
}

.footer__credit {
  font-size: var(--fs-micro);
  line-height: 1.6;
  text-align: right;
  align-self: center;
  overflow-wrap: normal;
  word-break: normal;
}


/* --------------------------------------------------------------------------
   11. Interior page building blocks
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(2.5rem, 4.286vw, 60px);
}

.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

.section__inner {
  display: grid;
  width: min(100%, var(--page));
  margin-inline: auto;
  padding-inline: var(--inset-l) var(--inset-r);
  row-gap: 24px;
}

.section__title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1;
}

.section__subtitle {
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--blue);
}

.prose {
  display: grid;
  row-gap: 1.2em;
  max-width: 66ch;
}

/* Two-up content, e.g. text beside a photo */
.split {
  display: grid;
  grid-template-columns: minmax(0, 580fr) minmax(0, 380fr);
  column-gap: 17px;
  align-items: start;
}

.section__cta {
  display: grid;
  justify-items: center;
  padding-block: 48px;
}

/* Stacked cards (service detail, paperwork list) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}

.card {
  display: grid;
  align-content: start;
  row-gap: 12px;
  padding: 28px;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 23px;
}

.section--white .card { background: var(--cream); }

.card__title {
  font-family: var(--display);
  font-size: var(--fs-service);
  line-height: 1;
  color: var(--blue);
}

/* Definition-style rows: hours, contact details */
.datalist {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 12px;
  align-items: baseline;
}

.datalist dt { color: var(--blue); }
.datalist dd { margin: 0; }

/* Forms */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 820px;
}

.field {
  display: grid;
  row-gap: 8px;
}

.field--wide { grid-column: 1 / -1; }

.field label { font-size: 1rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 12px;
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.form__actions {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
}

/* Downloadable paperwork rows */
.files {
  display: grid;
  row-gap: 14px;
}

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 20px;
  align-items: center;
  padding: 18px 24px;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 23px;
}

.section--white .file { background: var(--cream); }

.file__name { font-size: var(--fs-service); }

.file__link {
  font-family: var(--display);
  font-size: var(--fs-body);
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid var(--blue);
}


/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
   
@media (max-width:1600px) {
    .nav{
        grid-template-columns:1fr 9fr;
    }
    
    .nav__link{
        margin:0 8px;
        font-size:2rem;
    }
}

@media (max-width: 900px) {
  :root {
    --inset-l:  clamp(1.25rem, 6vw, 60px);
    --inset-r:  clamp(1.25rem, 6vw, 60px);
    --inset-xr: clamp(1.25rem, 6vw, 60px);
  }

  .about { padding-bottom: 150px; }

  .about__band { height: 260px; }

  .about__grid,
  .process__grid,
  .practitioner__grid,
  .split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .about__copy { padding-top: 0; }

  .practitioner__copy { padding-left: 0; }

  .practitioner__band { display: none; }

  .practitioner__portrait { width: 195px; }

  .services__card { margin-top: -110px; }

  /* Responsive footer */
  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 20px;
    padding: 24px 20px;
    text-align: center;
  }

  .footer__nav {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: 14px 20px;
  }

  .footer__link {
    font-size: clamp(14px, 2.5vw, 20px);
  }

  .footer__credit {
    width: auto;
    max-width: 100%;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .nav {
    grid-template-columns:1fr;
    justify-content: center;
    row-gap: 14px;
    padding-block: 16px;
    text-align:center;
  }
  
  .nav__link{
      line-height:1.5;
      display:inline-block;
  }

  .nav__logo {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .nav__logo img { width: 72px; }

  .services__list {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 22px;
    text-align: center;
  }

  .services__list li:last-child { margin-top: 0; }

  .services__card { border-radius: 40px; padding-bottom: 60px; }

  .form { grid-template-columns: minmax(0, 1fr); }

  .file { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}