/* ============================================================
   Yael Cyment — Acupuncture & Chinese/Japanese Medicine
   Bootstrap 5.3 RTL, Heebo font
   ============================================================ */

/* ------------------------------------------------------------
   CSS Variables
   ------------------------------------------------------------ */
:root {
  --color-bg:        #FFFFFF;
  --color-panel:     #F4F2F0;
  --color-ink:       #111111;
  --color-body:      #212529;   /* Bootstrap $body-color — dark grey, almost black */
  --color-muted:     #5A5A5A;
  --color-accent:    #D9413F;
  --color-accent-dk: #B93433;
  --font-main:       'Heebo', sans-serif;
  --radius-panel:    18px;
  --radius-card:     12px;
  --logo-height:     72px;
  --logo-height-sm:  48px;   /* logo size once the page is scrolled */
  --rule-color:      #E2DED9;
  --page-max:        960px;
}


/* ------------------------------------------------------------
   Page width — narrower than Bootstrap's default container.
   Only caps xl/xxl, where Bootstrap would go 1140px/1320px;
   lg and below keep their own smaller values.
   ------------------------------------------------------------ */
.container { max-width: var(--page-max); }


/* ------------------------------------------------------------
   Global
   ------------------------------------------------------------ */
html { height: 100%; }

/* Site-wide text baseline: colour + weight here, size 1rem from Bootstrap's
   body default. Everything inherits this; only larger/different text overrides. */
body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-body);
  font-weight: 400;
  --bs-heading-color: var(--color-ink);   /* all headings (h1–h6 and .h1–.h6) */
  overflow-x: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h, 140px);   /* clears the fixed header; set by js/site.js */
}

body > main { flex: 1; }

h1, h2, h3 { font-weight: 400; }

.section-title { font-size: 2.25rem; }

.panel {
  background-color: var(--color-panel);
  border-radius: var(--radius-panel);
}


/* ------------------------------------------------------------
   Buttons & links
   ------------------------------------------------------------ */
.btn-cta {
  background-color: var(--color-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: .85rem 2.75rem;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-color: var(--color-accent-dk);
  color: #FFFFFF;
}

.link-accent {
  color: var(--color-accent);
  text-decoration: none;
  font-size: .9rem;
}

.link-accent:hover { text-decoration: underline; }


/* ------------------------------------------------------------
   Header / navigation
   ------------------------------------------------------------ */
/* Pinned with Bootstrap's .fixed-top; padding lives here rather than in
   utilities so the scrolled state can override it without !important. */
.site-header {
  background-color: var(--color-bg);
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  transition: padding .2s ease;
}

.site-header.is-scrolled {
  padding-top: .5rem;
  padding-bottom: .75rem;
}

.site-logo {
  height: var(--logo-height);
  width: auto;
  transition: height .2s ease;
}

.site-header.is-scrolled .site-logo { height: var(--logo-height-sm); }

/* The desktop logo sits above the nav row; tighten that gap when scrolled. */
.site-header.is-scrolled .site-logo-link { margin-bottom: .25rem !important; }

.site-nav .nav-link {
  color: var(--color-ink);
  font-size: 1rem;
  padding-inline: .9rem;
  padding-bottom: .15rem;
}

.site-nav .nav-link.active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-ink);
}

.navbar-toggler:focus { box-shadow: none; }

.nav-panel .nav-link {
  color: var(--color-ink);
  font-size: 1.35rem;
  padding-block: .8rem;
}

/* Underline rather than border-bottom: the links are full-width blocks, so a
   border would stretch across the panel instead of sitting under the text. */
.nav-panel .nav-link.active {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}


/* ------------------------------------------------------------
   Hero (home)
   ------------------------------------------------------------ */
.hero-title { font-size: 2.75rem; }

.hero-lead { font-size: 20px; }

.bio-photo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
}


/* ------------------------------------------------------------
   Link cards (home)
   ------------------------------------------------------------ */
.link-card {
  display: block;
  height: 100%;
  background-color: var(--color-panel);
  border: 0;
  border-radius: var(--radius-panel);
  padding: 2.5rem 2rem;
  color: var(--color-ink);
  text-decoration: none;
  text-align: center;
}

.link-card h3 { font-size: 1.5rem; }


/* ------------------------------------------------------------
   Testimonials (home)
   ------------------------------------------------------------ */
.quote-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}


/* ------------------------------------------------------------
   About
   ------------------------------------------------------------ */
.rule-between { border-inline-start: 1px solid var(--rule-color); }

.about-photo {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
}


/* ------------------------------------------------------------
   Certificates gallery (about)
   ------------------------------------------------------------ */
.cert-thumb {
  background: none;
  border: 0;
  padding: 0;
  border-radius: var(--radius-card);
}

.cert-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.cert-thumb:focus-visible { outline: 2px solid var(--color-ink); }


/* ------------------------------------------------------------
   Concepts (ideas)
   ------------------------------------------------------------ */
   
.concept-row + .concept-row { border-top: 1px solid var(--rule-color); }

.concept-glyph { font-size: 3.5rem; }

.concept-glyph-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}



/* ------------------------------------------------------------
   Treatment areas
   ------------------------------------------------------------ */
.treat-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  opacity: .55;
}


/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-item {
  background-color: var(--color-panel);
  border: 0;
  border-radius: var(--radius-panel);
}

.faq-item .accordion-button {
  background-color: transparent;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 400;
  padding: 1.5rem 2rem;
  box-shadow: none;
}

.faq-item .accordion-body { padding: 0 2rem 1.75rem; }

.faq-static { padding: 1.5rem 2rem 1.75rem; }


/* ------------------------------------------------------------
   Contact
   ------------------------------------------------------------ */
.contact-field {
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.5rem;
}

textarea.contact-field { border-radius: var(--radius-card); }

.contact-field::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Browsers force direction: ltr on tel and email inputs, which makes
   text-align: start resolve to the left. Keep LTR so the value stays in order,
   but align to the right like the other fields. */
input[type="tel"].contact-field,
input[type="email"].contact-field { text-align: right; }

.social-link { color: var(--color-ink); }


/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
/* Centred above the black band, on white — never stretched to the full page
   width (capped at --page-max). */
.footer-scene {
  display: block;
  width: 100%;
  max-width: var(--page-max);
  height: auto;
  margin-inline: auto;
}

/* The scene PNGs are cropped to the silhouette and end on solid black, so the
   band continues them seamlessly. Its top padding sets the gap from the ground
   line down to the footer text (~145px at desktop width, per the sketch). */
.site-footer {
  background-color: #000000;
  color: #FFFFFF;
  --bs-heading-color: #FFFFFF;   /* footer headings (.h5 name + address) on black */
  padding-block-start: 7.5rem;
}

.site-footer a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: .85rem;
}

.site-footer a:hover { text-decoration: underline; }

.footer-logo { height: 48px; width: auto; }

/* Address + phone values in the footer, a touch larger. Scoped under
   .site-footer so it also beats the .site-footer a link rule (the phone). */
.site-footer .footer-info { font-size: 1.4rem; }


/* ------------------------------------------------------------
   Responsive overrides
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  :root { --logo-height: 52px; --logo-height-sm: 40px; }

  .hero-title { font-size: 2rem; }

  .section-title { font-size: 1.65rem; }

  .rule-between { border-inline-start: 0; }

  .site-footer { padding-block-start: 3rem; }
}

@media (max-width: 767.98px) {
  .faq-item .accordion-button { font-size: 1.2rem; padding: 1.15rem 1.35rem; }

  .faq-item .accordion-body,
  .faq-static { padding-inline: 1.35rem; }
}