/* Static overrides for the archived MedicineChest layout. */

:root {
  --ep-green: #91c647;      /* brand green (decorative) */
  --ep-green-text: #4a7a1c; /* brand green darkened for text on white: 5.0:1 */
  --ep-orange: #f38040;
  --ep-orange-text: #b4501a;/* 4.9:1 on white */
  --ep-ink: #1f1f1f;
  --ep-muted: #555;
  --ep-line: #e6e6e6;
  --ep-soft: #f7f9f3;
}

/* h1 replaced the header <div>s: keep their original look */
h1.ep-h1 { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }

/* the SPA scrolled an absolutely positioned wrapper; let the document scroll */
/* ONE scroll container — the document. The archived CSS made <html> position:absolute at
   viewport height (so <html> scrolled), and an earlier body{overflow:auto} added a second,
   nested scroller on <body>: a double scrollbar on desktop and a 21px "jump" on the first wheel tick. */
html { position: static !important; height: auto !important; min-height: 100% !important;
       overflow-x: hidden !important; overflow-y: auto !important; }
body { position: relative; height: auto !important; min-height: 100vh;
       overflow: visible !important; opacity: 1 !important; visibility: visible !important; }
._hr { position: relative !important; height: auto !important; min-height: 100vh;
       overflow: visible !important; }
._gh, ._zs { display: none !important; }
/* SPA helper <input class="_gg"> sat absolutely below <body>: +21px empty strip and a stray tab stop */
input._gg { display: none !important; }

/* menu button: the SPA faded it in after boot */
/* (the SPA removed the hiding class ._a24 = opacity:0 + pointer-events:none after boot) */
._a2i, ._a2i._a24 { opacity: 1 !important; pointer-events: auto !important;
                     cursor: pointer; z-index: 1001 !important; }
/* decorative skewed header shape sits over the menu button; let clicks through */
._88a { pointer-events: none; }

/* side menu slide-in */
._ll0 { position: fixed !important; top: 0; bottom: 0; height: 100vh !important;
        overflow-y: auto; transition: transform .25s ease; }
body.ep-menu-open ._ll0 { transform: none !important; box-shadow: 0 0 40px rgba(0,0,0,.35); }
body.ep-menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 999; }

/* header panels keep the original stacking (backdrop 10 < panel 11 < header 12) */
body.ep-menu-open ._a2i { opacity: 0 !important; pointer-events: none !important; }

/* parts that needed the vanished backend: login, basket */
._977, ._jjk { display: none !important; }

/* header photos the archive never captured: brand gradient instead of flat grey */
/* default: a light brand wash (sections whose text is dark) */
.ep-nobg { background-image: linear-gradient(120deg, #f4f8ee 0%, #fbf4ee 100%) !important; background-size: cover !important; }
/* dark brand gradient only behind white text: page headers, hero slide, appointment banner */
._axp.ep-nobg, ._xl.ep-nobg, ._778.ep-nobg {
  background-image: linear-gradient(120deg, rgba(10,14,6,.72), rgba(10,14,6,.5)),
                    linear-gradient(120deg, #4f7a22 0%, #6f9a35 50%, #b8622a 100%) !important;
  background-size: cover !important;
}
/* destination tiles without their photo: compact labelled pills instead of empty boxes */
._774.ep-nobg { display: none !important; }
._ll8:has(._774.ep-nobg) { background: #fff; border: 1px solid #dfe8d3; border-radius: 999px;
  min-height: 48px; display: flex !important; align-items: center; justify-content: center; }
._ll8:has(._774.ep-nobg) ._llu { color: #1f1f1f !important; position: static !important; font-weight: 700; }

/* ---------- content recovered from the archive (ep-*) ---------- */
.ep-content { background: #fff; color: var(--ep-ink); font: 16px/1.6 SourceSansPro, "Helvetica Neue", Arial, sans-serif; }
.ep-content .ep-wrap { max-width: 1140px; margin: 0 auto; padding: 48px 20px 56px; }
.ep-content h2 { font: 26px/1.25 MuseoSansBold, SourceSansPro, Arial, sans-serif; color: var(--ep-green-text);
  margin: 0 0 14px; text-transform: none; }
.ep-content h3 { font: 19px/1.3 MuseoSansBold, SourceSansPro, Arial, sans-serif; color: var(--ep-ink); margin: 0 0 8px; }
.ep-content p { margin: 0 0 12px; }
.ep-content a { color: var(--ep-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.ep-content a:hover { color: #8a3c12; }
.ep-lead { font-size: 18px; color: var(--ep-muted); max-width: 760px; margin-bottom: 28px !important; }

.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 0 0 32px;
  align-items: start; }
.ep-news.ep-noimg { grid-template-columns: 1fr; }
.ep-news.ep-noimg > div { padding: 20px 22px 16px; }
.ep-card { border: 1px solid var(--ep-line); border-top: 4px solid var(--ep-green); border-radius: 10px;
  padding: 22px 22px 16px; background: #fff; display: flex; flex-direction: column; }
.ep-card h2, .ep-card h3 { font-size: 19px; color: var(--ep-ink); }
.ep-card .ep-rich { color: #333; font-size: 15px; flex: 1; }
.ep-card .ep-rich ul { padding-left: 20px; margin: 0 0 10px; }
.ep-card .ep-more { margin: 8px 0 0; font-size: 15px; }

.ep-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }
.ep-contact { background: var(--ep-soft); border-radius: 10px; padding: 22px; }
.ep-contact a { font-weight: 700; }
.ep-hours { width: 100%; border-collapse: collapse; background: var(--ep-soft); border-radius: 10px; overflow: hidden; }
.ep-hours caption { text-align: left; font: 19px MuseoSansBold, SourceSansPro, Arial, sans-serif; padding: 0 0 10px; }
.ep-hours th, .ep-hours td { text-align: left; padding: 9px 16px; border-bottom: 1px solid #e9eee2; font-weight: 400; }
.ep-hours th { width: 40%; font-weight: 700; }

.ep-news-list { display: grid; gap: 24px; }
.ep-news { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start;
  border: 1px solid var(--ep-line); border-radius: 10px; overflow: hidden; background: #fff; }
.ep-news img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; background: var(--ep-soft); }
.ep-news > div { padding: 20px 20px 16px 0; }
.ep-news time { color: var(--ep-muted); font-size: 14px; }
.ep-news h2 { font-size: 22px; color: var(--ep-ink); margin: 4px 0 8px; }
@media (max-width: 640px) {
  .ep-news { grid-template-columns: 1fr; }
  .ep-news > div { padding: 0 18px 16px; }
  .ep-news img { min-height: 0; aspect-ratio: 16 / 9; }
}

.ep-az-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.ep-az-index a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
  border-radius: 8px; background: var(--ep-soft); border: 1px solid #dfe8d3; text-decoration: none;
  font-weight: 700; color: var(--ep-green-text); }
.ep-az-group { border-top: 1px solid var(--ep-line); padding: 22px 0 6px; scroll-margin-top: 100px; }
.ep-az-group h2 { font-size: 30px; margin-bottom: 10px; }
.ep-az-group ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ep-az-group li { background: #fff; border: 1px solid var(--ep-line); border-radius: 10px; padding: 18px; }

.ep-pills { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ep-pills li { background: var(--ep-soft); border: 1px solid #dfe8d3; border-radius: 999px; padding: 8px 16px; }

.ep-prose .ep-wrap { max-width: 820px; }
.ep-prose h2 { font-size: 22px; margin-top: 28px; }
.ep-visit { background: var(--ep-soft); }
.ep-visit .ep-wrap { padding-top: 40px; padding-bottom: 44px; }
.ep-visit .ep-contact, .ep-visit .ep-hours { background: #fff; }

/* services accordion */
._aqv ._aq4 { cursor: pointer; }
._aqv._aqv.ep-open ._aqq { display: block; }
._aqq ._aqj { line-height: 1.6; }

/* ---------- accessibility fixes from the audit ---------- */
/* brand green stays bright where it sits on the black header / dark hero (8:1+) */
._a2m ._82, ._a2m ._8d, ._akh, ._axq ._akh, ._77c ._77h,
.ep-nobg ._akh, [data-customsectionid="home_section_imageslider"] [id^="ccisst"] { color: var(--ep-green) !important; }

/* footer: white on brand orange was 2.63:1 -> near-black on orange 7.0:1 */
._a5v, ._a5v * { color: #1a1a1a !important; }
._a5v ._a5o, ._a5v ._a5p, ._a5v ._a2a { font-weight: 700; letter-spacing: .04em; }

/* side menu rows: 20px tall links -> 44px targets (WCAG 2.5.8 / 2.5.5) */
._ll0 nav a { display: flex !important; align-items: center; min-height: 44px; padding: 0 4px; }
.ep-card .ep-more a, .ep-az-group li > a, .ep-contact a { display: inline-block; padding: 12px 0; }

.ep-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; color: #1f1f1f !important; background: #ffffff !important; }
/* skip link */
.ep-skip { position: absolute; left: 8px; top: -60px; z-index: 2000; background: #fff; color: #000;
  padding: 10px 16px; border-radius: 6px; font: 700 16px SourceSansPro, Arial, sans-serif; }
.ep-skip:focus { top: 8px; }

/* mobile hero: headline barely larger than body (ratio 1.09) */
@media (max-width: 600px) {
  [data-customsectionid="home_section_imageslider"] [id^="ccisst"] { font-size: 32px !important; line-height: 1.15 !important; }
}

[role="button"], [role="link"] { cursor: pointer; }
[role="button"]:focus-visible, [role="link"]:focus-visible, a:focus-visible {
  outline: 2px solid #f5813f; outline-offset: 2px;
}


/* ---------- UI/UX Audit Polish (Spacing, Contrast & Layout) ---------- */
/* Fixed hamburger MENU button: give it a clean dark pill container so orange #f38040 never floats raw on white/orange backgrounds */
._a2i, ._a2i._a24 {
  top: 16px !important;
  left: 16px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  background: rgba(16, 16, 16, 0.92) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
._a2i:hover { background: #222 !important; }

/* About Easton Pharmacy section: accessible 5.0:1 heading color on light background + vertical alignment between photo and text */
[data-customsectionid="home_section_about"] h1._kj span:last-child,
[data-customsectionid="home_section_about"] ._asq {
  color: var(--ep-green-text) !important;
}
[data-customsectionid="home_section_about"] ._77o {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
[data-customsectionid="home_section_about"] ._k3 {
  padding-bottom: 12px !important;
}
[data-customsectionid="home_section_about"] ._asm {
  padding-bottom: 36px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[data-customsectionid="home_section_about"] ._zg {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
@media (min-width: 860px) {
  [data-customsectionid="home_section_about"] ._asb {
    padding-top: 0 !important;
    padding-bottom: 16px !important;
  }
}

/* Order Online section: clean rhythm & balanced cards */
[data-customsectionid="home_section_features_2"] {
  height: auto !important;
  min-height: 0 !important;
  padding: 56px 0 64px !important;
}
[data-customsectionid="home_section_features_2"] ._ze {
  padding-bottom: 24px !important;
}
[data-customsectionid="home_section_features_2"] ._zc {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}

/* Health News section: consistent container & spacing */
[data-customsectionid="home_section_healthnews"] {
  padding: 56px 0 64px !important;
}
[data-customsectionid="home_section_healthnews"] ._zh {
  padding-bottom: 28px !important;
}

/* Features 4-card band: cleaner padding */
[data-customsectionid="home_section_features"] {
  padding: 56px 24px 48px !important;
}

/* Static inner pages (/head-office, /branches, /mhra, etc.): compact hero band & aligned content columns */
._axm, ._axm > div, ._axp, ._axw, ._axq {
  min-height: 0 !important;
}
._axm { height: auto !important; }
._axp, ._axw { position: absolute !important; inset: 0; height: auto !important; }
._axq { position: relative !important; height: auto !important; padding: 36px 20px !important; }
._aka { position: relative !important; top: auto !important; transform: none !important; padding: 8px 0 !important; max-width: 1140px !important; margin: 0 auto !important; }
._akf:empty { display: none; }

/* /head-office content alignment */
._a7n { padding-top: 40px !important; }
._a7b {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 24px 40px !important;
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}
._a7r { flex: 1 1 520px; max-width: 680px; float: none !important; width: auto !important; line-height: 1.65; }
._a7q { flex: 0 0 auto; float: none !important; position: static !important; background: var(--ep-soft); border: 1px solid #dfe8d3; border-radius: 10px; padding: 16px 22px; }
._a7p { border-top: 1px solid var(--ep-line); }
._a73 { max-width: 1140px !important; margin: 0 auto !important; padding: 36px 24px !important; box-sizing: border-box; }

/* Footer spacing, icon alignment & sub-footer balance */
._a5v {
  max-width: 1180px !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 48px 24px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 48px;
}
._a5i {
  display: flex !important;
  flex-wrap: wrap;
  gap: 32px 48px;
  flex: 2 1 520px;
  float: none !important;
  width: auto !important;
}
._a54, ._a5j {
  padding-right: 0 !important;
  flex: 1 1 240px;
  float: none !important;
  width: auto !important;
}
._a5w {
  flex: 1 1 280px;
  float: none !important;
  width: auto !important;
}
._a5v ._8z { margin-bottom: 12px !important; }
._a5v ._8x, ._a5v ._8y { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; position: relative !important; }
._a5v ._80 { position: static !important; float: none !important; width: 20px !important; height: auto !important; padding: 2px 0 0 !important; flex: 0 0 20px; text-align: center !important; }
._a5v ._8d { position: static !important; width: auto !important; height: auto !important; line-height: 1.2 !important; }
._a5v ._82 { position: static !important; float: none !important; padding: 0 !important; line-height: 1.45; }
._a5v ._8l { position: static !important; float: none !important; padding: 0 !important; font-weight: 700; line-height: 1.45; }
/* Health News "See All News" button centered cleanly */
[data-customsectionid="home_section_healthnews"] ._99a {
  display: flex !important;
  justify-content: center !important;
  padding-top: 28px !important;
}
[data-customsectionid="home_section_healthnews"] ._996 {
  float: none !important;
  margin: 0 auto !important;
}
._a20 {
  padding: 22px 24px !important;
}
._a22 {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}