/* ============================================================
   GRAVELLS PHARMACY — brand re-skin
   Loaded LAST, after the Client-First stylesheets, so it wins.
   Style guide:
     Gravells green  #1F7A3D  primary (logo cross, buttons, icons)
     Deep pine       #155C2C  headings, hover states
     Fascia indigo   #4B3F72  secondary (from shop sign)
     Soft lilac      #EDEAF5  section backgrounds
     Warm accent     #F4A93B  sparingly: CTAs, offers, badges
     Off-white       #FAFAF7  page background
     Charcoal        #2B2B2B  body copy
     Soft green tint #E9F3EC  section backgrounds
     Font: Urbanist — headings Medium (500), body Regular (400)
   ============================================================ */

:root {
  --g-green: #1f7a3d;
  --g-pine: #155c2c;
  --g-indigo: #4b3f72;
  --g-lilac: #edeaf5;
  --g-accent: #f4a93b;
  --g-offwhite: #fafaf7;
  --g-charcoal: #2b2b2b;
  --g-tint: #e9f3ec;

  /* --- Base palette --- */
  --base-color-neutral--pure-white: #ffffff;
  --base-color-neutral--white: #fafaf7;
  --base-color-neutral--black: #155c2c;          /* headings / dark accents */

  --base-color-brand--blue: #1f7a3d;             /* primary accent */
  --base-color-brand--blue-dark: #155c2c;
  --base-color-brand--blue-light: #e9f3ec;
  --base-color-brand--green: #e9f3ec;
  --base-color-brand--green-light: #edeaf5;      /* -> background-secondary (lilac) */
  --base-color-brand--beige-light: #e9f3ec;      /* -> background-tertiary (green tint) */
  --base-color-brand--orange: #f4a93b;           /* warm accent */

  --base-color-neutral--neutral-lightest: #dfe9e2;
  --base-color-neutral--neutral-darker: #2b2b2b;

  /* --- Semantic overrides --- */
  --text-color--text-primary: #2b2b2b;           /* body copy */
  --text-color--text-secondary: #2b2b2b;
  --background-color--background-primary: #155c2c;
  --background-color--background-secondary: #edeaf5;
  --background-color--background-tertiary: #e9f3ec;
  --background-color--background-alternate: #fafaf7;
  --link-color--link-primary: #1f7a3d;
  --border-color--border-primary: #dfe9e2;
}

/* --- Page --- */
body { background-color: var(--g-offwhite); color: var(--g-charcoal); font-weight: 400; }
.page-wrapper { background-color: var(--g-offwhite); }

/* --- Typography: green headings, Medium weight --- */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  font-weight: 500;
  color: var(--g-pine);
}
.text-color-accent { color: var(--g-green); }
.text-rich-text a, p a { color: var(--g-green); }
.text-rich-text a:hover, p a:hover { color: var(--g-pine); }

/* --- Eyebrow / tagline --- */
.text-style-tagline {
  color: var(--g-green);
  font-weight: 600;
  font-size: 12px;
  line-height: 150%;
}

/* --- CTAs --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  background-color: var(--g-green);
  border: 1px solid var(--g-green);
  color: #fff;
  box-shadow: none;
}
.button:hover { background-color: var(--g-pine); border-color: var(--g-pine); color: #fff; }
.button.is-secondary {
  background-color: transparent;
  border: 1px solid var(--g-green);
  color: var(--g-green);
}
.button.is-secondary:hover { background-color: var(--g-green); color: #fff; }
.button.is-alternate { background-color: var(--g-green); color: #fff; border-color: var(--g-green); }
.button.is-nhs { background-color: #fff; border: 1px solid var(--g-green); }
.button.is-nhs:hover { background-color: var(--g-tint); }

/* --- Logo sizing (wide wordmark; scale by width) --- */
.navbar2_logo { max-width: 200px; max-height: 2.6rem; height: auto; width: auto; }
.footer3_logo { max-width: 200px; height: auto; }

/* --- Navigation: off-white bar, green links --- */
.navbar2_component { background-color: var(--g-offwhite); color: var(--g-charcoal); }
.navbar2_link, .navbar2_dropdwn-toggle { color: var(--g-charcoal); font-size: 14px; }
.navbar2_link:hover, .navbar2_dropdwn-toggle:hover { color: var(--g-green); }
.navbar2_dropdown-list { background-color: #fff; border-radius: 8px; }
.navbar2_dropdown-link { color: var(--g-charcoal); }
.navbar2_dropdown-link:hover, .navbar2_dropdown-link.w--current { color: var(--g-green); background-color: var(--g-tint); }
.navbar2_menu.is-page-height-tablet { background-color: var(--g-offwhite); }

.button.is-navbar2-button.hide-mobile-portrait { background-color: var(--g-green); color: #fff; border-color: var(--g-green); font-size: 14px; }
.button.is-navbar2-button.hide-mobile-portrait:hover { background-color: var(--g-pine); border-color: var(--g-pine); }
.button.is-navbar2-button.hide-mobile-portrait.is-secondary { background-color: transparent; border-color: var(--g-green); color: var(--g-green); }
.button.is-navbar2-button.hide-mobile-portrait.is-secondary:hover { background-color: var(--g-green); color: #fff; }

@media screen and (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: var(--g-green); }
  .navbar2_menu .spacer-small.show-mobile-portrait { display: block; }
  .navbar2_menu .button.show-mobile-portrati { display: block; background-color: var(--g-green); border: 1px solid var(--g-green); color: #fff; }
  .navbar2_menu .button.show-mobile-portrati.is-secondary { background-color: transparent; color: var(--g-green); }
}

/* --- Trust strip (below nav): soft lilac, small dark text --- */
.banner5_component { background-color: var(--g-lilac); color: var(--g-charcoal); font-size: 11px; }
.banner5_component .banner-item { color: var(--g-charcoal); }
.banner5_component .icon-embed-xxsmall { color: var(--g-indigo); }

/* --- Hero --- */
.header1_image, .hp_image-wrap { border-radius: 16px; }
.hp-hero_button { background-color: #fff; color: var(--g-pine); border-radius: 6px; }
.label-wrap, .label-wrap div { color: #fff; }
.label-wrap { background-color: var(--g-accent); }
.label-wrap .icon-embed-xxsmall { color: #fff; }

/* --- Service cards: white on soft-green section --- */
.section_layout302 { background-color: var(--g-tint); }
.section_layout302.is-white { background-color: var(--g-offwhite); }
.layout302_item { background-color: #fff; border: 1px solid #dfe9e2; border-radius: 12px; color: var(--g-charcoal); }
.layout302_item:hover { border-color: var(--g-green); }
.layout302_item-icon-wrapper, .layout302_item .icon-embed-xsmall { color: var(--g-green); }
.layout302_item h3 { color: var(--g-pine); }
.card-arrow_wrap { color: var(--g-green); background-color: transparent; }

/* --- Repeat prescription block: light --- */
.section_repeat { background-color: var(--g-offwhite); }
.section_repeat .layout1_image, .layout1_image { border-radius: 8px; }
.section_repeat .layout1_image-wrapper { border-radius: 8px; overflow: hidden; }

/* --- Visit block: lilac + address columns --- */
.section_layout1.background-color-secondary { background-color: var(--g-lilac); }
.section_layout1 .icon-1x1-medium { width: 2.5rem; height: auto; }
.visit-details { display: flex; gap: 2.5rem; padding-left: 1rem; border-left: 2px solid var(--g-green); font-size: 14px; }
.visit-details_col { margin: 0; }
@media screen and (max-width: 479px) { .visit-details { flex-direction: column; gap: 1rem; } }

/* --- Reviews: soft green --- */
.section_testimonial20 { background-color: var(--g-tint); }
.testimonial20_card { background-color: #fff; border: 1px solid #dfe9e2; border-radius: 12px; color: var(--g-charcoal); }
.icon-embed-xsmall.is-star { color: var(--g-accent); }
.icon-embed-xsmall.is-star path { fill: var(--g-accent); }

/* --- Story / about strip --- */
.section_layout47 { background-color: var(--g-lilac); }
.section_content29.background-color-secondary { background-color: var(--g-tint); }
.section_cta7 { background-color: var(--g-green); }
.section_cta7 h2, .section_cta7 p { color: #fff; }
.section_cta7 .button, .section_cta7 .button.is-alternate { background-color: #fff; color: var(--g-pine); border-color: #fff; }
.section_cta7 .button:hover { background-color: var(--g-tint); }

/* --- Footer: light, with green rule --- */
.footer3_component, .section_layout1.background-color-primary { background-color: var(--g-offwhite); color: var(--g-charcoal); }
.footer3_component { border-top: 1px solid var(--g-green); }
.footer3_component .text-weight-medium { color: var(--g-pine); }
.footer3_link, .footer3_legal-link, .footer3_credit-text, .text-size-small.link-color-white { color: var(--g-charcoal); }
.footer3_link:hover, .footer3_legal-link:hover, .text-size-small.link-color-white:hover { color: var(--g-green); }
.footer3_component .divider-horizontal { background-color: var(--g-green); opacity: .35; }
.footer3_list-spacer { visibility: hidden; }
.footer_nhs-logo { height: 1.5rem; width: auto; }

/* --- Body copy: charcoal (paragraph colour in the base sheet follows the heading token) --- */
p, li, .text-size-medium, .text-size-large, .text-size-regular, .text-size-small,
.text-rich-text p, .text-rich-text li { color: var(--g-charcoal); }
.section_cta7 .text-color-alternate, .section_cta7 p { color: #fff; }

/* Shopfront photo is portrait: keep the sign and windows in frame when cropped wide */
.about1-story_image, .contact3-header_image, .layout1_image { object-position: center 30%; }

/* Footer social icons */
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social_link { color: var(--g-green); display: inline-flex; }
.footer-social_link:hover { color: var(--g-pine); }