/* ============================================================
   BLOOMSBURY — brand re-skin
   Loaded LAST, after the Client-First stylesheets, so it wins.
   Re-skinning a future site = edit the values in this one file.
   Style guide:
     Foreground / dark (headings, dark sections) … #114B4F
     Secondary / body text                       … #46494E
     Primary background                          … #F8FAFD
     Primary brand (CTA fill, accents)           … #6CDBAA
     Secondary background                        … #DBEFF4
     CTAs: #6CDBAA fill, #114B4F text, 8px radius
     Font: Urbanist — headings Medium (500), body Regular (400)

   Note on the brand mint: #6CDBAA is a light fill colour — as small text on a
   light background it fails contrast, so text accents (links, eyebrows) use
   the foreground #114B4F and the mint is reserved for fills, badges and the
   trust banner.
   ============================================================ */

:root {
  /* --- Base palette --- */
  --base-color-neutral--pure-white: #ffffff;
  --base-color-neutral--white: #f8fafd;        /* primary background */
  --base-color-neutral--black: #114b4f;        /* foreground: headings + dark */

  --base-color-brand--blue: #114b4f;           /* text accent (links, rules) */
  --base-color-brand--blue-dark: #114b4f;
  --base-color-brand--blue-light: #dbeff4;     /* soft fills, circles, cards */
  --base-color-brand--green: #6cdbaa;          /* primary brand mint */
  --base-color-brand--green-light: #dbeff4;    /* -> background-secondary */
  --base-color-brand--beige-light: #dbeff4;    /* -> background-tertiary */
  --base-color-brand--orange: #6cdbaa;         /* badge fills (.label-wrap) */

  --base-color-neutral--neutral-lightest: #dbeff4; /* subtle borders / bands */

  /* --- Semantic overrides (decouple text vs dark background) --- */
  --text-color--text-primary: #114b4f;
  --text-color--text-secondary: #46494e;
  --text-color--text-alternate: #f8fafd;             /* text on dark sections */
  --background-color--background-primary: #114b4f;   /* dark sections */
  --background-color--background-secondary: #dbeff4;
  --background-color--background-tertiary: #f8fafd;
  --link-color--link-primary: #114b4f;
}

/* --- Page canvas + text colour ---
   Client-First puts the body colour on --base-color-neutral--black, which is
   also the foreground. Body copy is the softer secondary grey; headings take
   the foreground back below. */
body {
  background-color: #f8fafd;
  color: #46494e;
  font-weight: 400;
}
/* Client-First sets an explicit `p { color: var(--base-color-neutral--black) }`,
   which beats inheritance from body — so restate the body colour here. */
p, li, dd, dt, blockquote, figcaption { color: #46494e; }

/* --- Typography weights (Medium headings, Regular body) ---
   Client-First puts heading styles on .heading-style-* classes, so we must
   match that specificity, not just the bare h1–h6 tags. */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  color: #114b4f;
  font-weight: 500;
}

/* --- Dark scopes ---
   Sections painted with the foreground teal. The rules above set heading and
   body colour on bare tags, which beats the `color` these sections set on
   themselves — so restate the light colours here. Add any new dark section
   class to this one list. */
:is(.background-color-primary, .footer3_component, .section_cta7, .section_booksteps)
  :is(h1, h2, h3, h4, h5, h6,
      .heading-style-h1, .heading-style-h2, .heading-style-h3,
      .heading-style-h4, .heading-style-h5, .heading-style-h6) {
  color: #f8fafd;
}
:is(.background-color-primary, .footer3_component, .section_cta7, .section_booksteps)
  :is(p, li, dd, dt, blockquote, figcaption, a) {
  color: #dbeff4;
}

/* Footer links: Client-First's hover turns them the foreground teal, which is
   the footer's own background — i.e. invisible. Hold the colour, underline
   instead. (.footer3_link:hover is two classes, so match that specificity.) */
.footer3_component .footer3_link:hover,
.footer3_component .footer3_legal-link:hover {
  color: #dbeff4;
  text-decoration: underline;
}

/* --- CTAs: mint fill, foreground text, 8px corners --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #6cdbaa;
  color: #114b4f;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  box-shadow: 0 2px 4px #114b4f1a;
}
.button:hover {
  background-color: #114b4f;
  color: #f8fafd;
}
/* Outline variant */
.button.is-secondary {
  background-color: transparent;
  border: 1px solid #114b4f;
  color: #114b4f;
  box-shadow: none;
}
.button.is-secondary:hover {
  background-color: #6cdbaa;
  color: #114b4f;
}
/* "is-alternate" sits on dark sections — light fill, foreground text */
.button.is-alternate {
  border: 2px solid #6cdbaa;
  background-color: #6cdbaa;
  color: #114b4f;
}
.button.is-alternate:hover {
  background-color: #f8fafd;
  border-color: #f8fafd;
  color: #114b4f;
}
/* Small pill buttons elsewhere in the build share the 8px radius */
.hp-hero_button,
.label-wrap,
.minor-ailments_card,
.hp_image-wrapper,
.card-arrow_wrap { border-radius: 8px; }

/* --- Eyebrow / tagline accent text --- */
.text-style-tagline {
  color: #114b4f;
  font-weight: 600;
  font-size: 14px;
  line-height: 150%;
}
/* On dark sections the eyebrow flips to the mint */
.background-color-primary .text-style-tagline,
.text-style-tagline.is-alternate {
  color: #6cdbaa;
}

/* Decorative brand icon (about + homepage) — mint is too light at this size */
.text-color-blue { color: #114b4f; }

/* --- Logo sizing (Bloomsbury Pharmacy is a wide wordmark; scale by width) --- */
.navbar2_logo {
  max-width: 220px;
  max-height: 2.25rem;
  height: auto;
}
.footer3_logo {
  max-width: 230px;
  height: auto; /* overrides Client-First's height:3rem which upscaled it */
}

/* --- Navigation: white bar, foreground links --- */
.navbar2_component {
  background-color: #fff;
  color: #114b4f;
}
.navbar2_link,
.navbar2_dropdwn-toggle {
  color: #114b4f;
}
/* mobile slide-out menu panel matches the white bar */
.navbar2_menu.is-page-height-tablet {
  background-color: #fff;
}
.navbar2_link:hover,
.navbar2_dropdwn-toggle:hover {
  color: #6cdbaa;
}

/* Nav buttons were styled for the OLD dark bar; restyle for the white bar.
   (Selectors match Client-First's specificity so these win.) */
/* Book Appointment -> primary: mint fill, foreground text */
.button.is-navbar2-button.hide-mobile-portrait {
  background-color: #6cdbaa;
  color: #114b4f;
}
.button.is-navbar2-button.hide-mobile-portrait:hover {
  background-color: #114b4f;
  color: #f8fafd;
}
/* Find Us -> secondary: foreground outline, foreground text */
.button.is-navbar2-button.hide-mobile-portrait.is-secondary {
  background-color: transparent;
  border-color: #114b4f;
  color: #114b4f;
}
.button.is-navbar2-button.hide-mobile-portrait.is-secondary:hover {
  background-color: #114b4f;
  color: #f8fafd;
}

/* --- Mobile nav ---
   Two problems inherited from the Webflow build:

   1. The header's "Find Us" / "Book Appointment" buttons are only hidden by
      .hide-mobile-portrait at <=479px, but the hamburger menu takes over at
      <=991px. In between, the buttons and the hamburger competed for the bar
      and overflowed it. Hide them for the whole hamburger range — both are
      still reachable inside the open menu.
   2. The hamburger lines are painted with --base-color-neutral--white, which
      this palette maps to the page background (#F8FAFD). On the white nav bar
      that made them invisible. Paint them the foreground teal. */
@media (max-width: 991px) {
  .navbar2_button-wrapper .button.is-navbar2-button { display: none; }

  .menu-icon2_line-top,
  .menu-icon2_line-middle,
  .menu-icon2_line-bottom {
    background-color: #114b4f;
  }

  /* Webflow gives the icon a -0.5rem right margin, which pushed it past the
     page gutter and caused a couple of pixels of horizontal scroll. */
  .menu-icon2 { margin-right: 0; }

  /* The menu's own copies of the buttons only switched on at <=479px, so the
     480-991px slice of the hamburger range had no booking button at all.
     Show them (and their spacer) across the whole range. */
  .navbar2_menu .button.show-mobile-portrati,
  .navbar2_menu .spacer-small.show-mobile-portrait {
    display: block;
  }

  /* Repaint for the white menu panel. Webflow styled these for the original
     DARK nav: a near-white fill on the primary and white text on the ghost
     variant — which on a white panel left one washed out and the other
     invisible. Selectors carry the extra .navbar2_menu class to outrank the
     inherited @media rules. */
  .navbar2_menu .button.show-mobile-portrati {
    display: flex;
    background-color: #6cdbaa;
    color: #114b4f;
    border: 0;
  }
  .navbar2_menu .button.show-mobile-portrati.is-secondary {
    background-color: transparent;
    color: #114b4f;
    border: 1px solid #114b4f;
  }
}

/* --- Trust banner (below nav): pale blue with foreground text --- */
.banner5_component {
  background-color: #e5f1f4;
  color: #114b4f;
}

/* --- Dark sections: the foreground teal. Includes the footer and any
   .section_* that opts into the dark scheme. --- */
.footer3_component,
.section_cta7,
.section_booksteps,
.section_layout1.background-color-primary {
  background-color: #114b4f;
}

/* --- About page "Our story": photo left, copy right ---
   Client-First's about1-story block stacks a full-width 37.5rem-tall photo
   under the text. This variant puts them side by side. The photo takes its
   height from a 4:3 ratio instead of a fixed 37.5rem, so a modestly sized
   shopfront photo is scaled down into the column rather than blown up. */
.about1-story_component.is-media-left {
  align-items: center;
}
.about1-story_component.is-media-left .about1-story_image {
  height: auto;
  aspect-ratio: 4 / 3;
}
/* Inherited rules collapse this grid to one column at 767px; bring that
   forward to 991px so the two columns never get too narrow to read. */
@media (max-width: 991px) {
  .about1-story_component.is-media-left { grid-template-columns: 1fr; }
  .about1-story_component.is-media-left .about1-story_image { aspect-ratio: 3 / 2; }
}

/* ============================================================
   "Book in 3 simple steps" — homepage step strip
   Custom block, not part of the inherited Client-First system.
   Dark teal band; the numbers, labels and copy sit on it in the
   light palette. Registered as a dark scope further up this file.
   ============================================================ */
.booksteps_list {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0 1rem;
  margin-top: 3.5rem;
}

.booksteps_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Numbered ring */
.booksteps_number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border: 1.5px solid rgba(219, 239, 244, 0.35);
  border-radius: 50%;
  color: #dbeff4;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

/* Icon + step name */
.booksteps_label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  color: #f8fafd;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.booksteps_icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: #6cdbaa;
}
.booksteps_icon svg { display: block; }

.booksteps_text {
  max-width: 22rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Chevron between steps — decorative, drops out when the grid stacks */
.booksteps_arrow {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 1.75rem;
  color: rgba(219, 239, 244, 0.28);
}
.booksteps_arrow svg { display: block; }

@media (max-width: 991px) {
  .booksteps_list { grid-template-columns: 1fr; gap: 3rem 0; margin-top: 3rem; }
  .booksteps_arrow { display: none; }
  .booksteps_text { max-width: 26rem; }
}