/* Premier Pharmacy — styles from Figma "Premier Pharmacy Page" (DP-Website-Dev, node 5232:58223).
   Design is drawn at 1920px; sizes scale down with clamp() and stack below 992px. */
:root {
  --pp-accent: #08559f;
  --pp-heading: #01101d;
  --pp-body: #666;
  --pp-answer: #05335f;
  --pp-line: #c1c7cd;
  --pp-bg: #fbfbfb;
  --pp-blue-bg: #f2f8ff;
  --pp-blue-line: #e0eaf5;
  --pp-green-bg: #e9f5e9;
  --pp-gutter: clamp(16px, 4.17vw, 80px);
  --pp-gap: 32px;
  --pp-h1: clamp(36px, 3.33vw, 64px);
  --pp-h2: clamp(28px, 2.5vw, 48px);
  --pp-xl: clamp(17px, 1.25vw, 24px);   /* 24px text */
  --pp-lg: clamp(16px, 1.05vw, 20px);   /* 20px text */
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }
body { font-family: 'General Sans', sans-serif; background: var(--pp-bg); color: var(--pp-heading); }
/* Figma text uses "auto" line height; Bootstrap's 1.5 made every block taller than the design. */
main, .pp-header, .pp-footer { line-height: normal; }
/* Policy pages still load style.css, whose global a/li/p rules (24-28px, 35px li indent) would leak into header/footer.
   Specificity (0,0,1) matches those element rules and wins by load order, but never beats our class rules. */
:where(.pp-header, .pp-footer) :is(a, li, p, dd) {
  font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; padding-left: 0;
}
:where(.pp-header, .pp-footer) ul { list-style: none; }
main h1, main h2, main h3, main p, .pp-footer p, .pp-info dd { margin: 0; }

.pp-container { max-width: 1920px; margin: 0 auto; padding-left: var(--pp-gutter); padding-right: var(--pp-gutter); }
.pp-section { padding-top: 60px; padding-bottom: 60px; background: var(--pp-bg); }
.pp-stack-16, .pp-stack-24, .pp-stack-40, .pp-stack-48 { display: flex; flex-direction: column; }
.pp-stack-16 { gap: 16px; }
.pp-stack-24 { gap: 24px; }
.pp-stack-40 { gap: 40px; }
.pp-stack-48 { gap: 48px; }
.pp-text-center { text-align: center; align-items: center; }
.pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-gap); }
.pp-center { align-items: center; }
.pp-sep { margin: 0 8px; }

/* Type */
main h1 { font-size: var(--pp-h1); line-height: 1.09; font-weight: 600; color: var(--pp-heading); }
main h2 { font-size: var(--pp-h2); line-height: 1.25; font-weight: 600; color: var(--pp-heading); }
.pp-heading { display: flex; flex-direction: column; gap: 4px; }
.pp-eyebrow { font-size: var(--pp-xl); font-weight: 500; color: var(--pp-accent); }
.pp-body { font-size: var(--pp-xl); color: var(--pp-body); line-height: 1.35; }

/* Buttons */
.pp-btn {
  display: inline-block; background: var(--pp-accent); color: var(--pp-bg);
  font-size: var(--pp-lg); font-weight: 500; line-height: 1.35; padding: 12px 24px;
  border-radius: 32px; text-decoration: none; white-space: nowrap; transition: background .2s;
}
.pp-btn:hover, .pp-btn:focus { background: var(--pp-answer); color: var(--pp-bg); }
.pp-btn-lg { font-size: var(--pp-xl); padding: 16px 32px; }

/* Header */
.pp-header {
  position: sticky; top: 0; z-index: 1030; background: var(--pp-bg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1); backdrop-filter: blur(5px);
}
.pp-nav { padding-top: 17.5px; padding-bottom: 17.5px; justify-content: space-between; }
.pp-logo img { height: 50px; width: auto; display: block; }
.pp-menu { justify-content: flex-end; gap: 40px; flex-grow: 0; }
.pp-menu .navbar-nav { gap: 40px; }
.pp-menu .navbar-nav a { font-size: var(--pp-xl); color: var(--pp-heading); text-decoration: none; white-space: nowrap; }
.pp-menu .navbar-nav a:hover { color: var(--pp-accent); }
.pp-toggler { border: 0; font-size: 26px; color: var(--pp-heading); padding: 4px 8px; }
.pp-toggler:focus { box-shadow: none; }

/* Hero */
.pp-hero-sub { font-size: clamp(20px, 1.67vw, 32px); font-weight: 500; color: var(--pp-heading); }
.pp-hero-body { font-size: clamp(18px, 1.46vw, 28px); line-height: 1.29; color: var(--pp-body); }
.pp-hero-img { width: 100%; height: auto; display: block; }

/* Location */
.pp-map { border: 1px solid var(--pp-line); border-radius: 16px; overflow: hidden; height: 540px; }
.pp-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.pp-info { display: flex; flex-direction: column; gap: 20px; margin: 0; font-size: var(--pp-xl); color: var(--pp-body); }
.pp-info div { display: flex; flex-direction: column; gap: 4px; }
.pp-info dt { font-weight: 600; font-style: italic; }
.pp-info dd { font-weight: 400; }
.pp-info a { color: inherit; text-decoration: none; }
.pp-info a:hover { color: var(--pp-accent); text-decoration: underline; }

/* About */
.pp-about { grid-template-columns: 1013fr 715fr; }
.pp-about-img { width: 100%; height: auto; border-radius: 16px; display: block; }

/* Products */
.pp-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pp-gap); }
.pp-product {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--pp-line); border-radius: 20px; background: var(--pp-bg);
}
.pp-product > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.pp-product::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 75%, #000); pointer-events: none; }
.pp-product-arrow { position: absolute; top: 19px; right: 19px; z-index: 1; }
.pp-product h3 {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px;
  font-size: clamp(20px, 1.46vw, 28px); line-height: 1.21; font-weight: 600; color: var(--pp-bg);
}
.pp-product:hover > img:first-child { transform: scale(1.04); }

/* Book a demo */
.pp-demo { background: var(--pp-blue-bg); }
.pp-demo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-gap); }
.pp-demo-row > .pp-stack-40 { max-width: 1013px; }
.pp-nabp {
  flex-shrink: 0; width: 410px; height: 231px; background: #fff; border: 1px solid var(--pp-line);
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
}

/* FAQs */
.pp-faq-row { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-gap); }
.pp-faq-list { flex: 0 1 1013px; display: flex; flex-direction: column; gap: 32px; }
.pp-faq { border-bottom: 2px solid var(--pp-line); padding-bottom: 24px; }
.pp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: var(--pp-xl); font-weight: 500; color: var(--pp-heading);
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: ""; flex-shrink: 0; width: 30px; height: 30px; background: url("img/caret-down.svg") center / contain no-repeat; transition: transform .2s; }
.pp-faq[open] summary::after { transform: rotate(180deg); }
.pp-faq summary:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 4px; }
.pp-faq-answer { padding-top: 16px; font-size: var(--pp-xl); color: var(--pp-answer); }
.pp-faq-answer p { margin: 0 0 12px; }
.pp-faq-answer ul { margin: 0 0 12px; padding-left: 36px; }
.pp-faq-answer a { color: var(--pp-accent); overflow-wrap: anywhere; }
.pp-faq-card {
  flex: 0 0 565px; background: var(--pp-blue-bg); border-radius: 32px; padding: 60px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.pp-faq-card h3 { font-size: var(--pp-xl); font-weight: 500; color: var(--pp-heading); margin-bottom: 8px; }
.pp-faq-card p { font-size: var(--pp-lg); color: var(--pp-body); }

/* Contact (HubSpot form styles live in index.php: the form renders in an iframe) */
.pp-contact { display: grid; grid-template-columns: 716fr 1012fr; gap: var(--pp-gap); align-items: stretch; }
.pp-contact-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }

/* Footer */
.pp-footer { background: var(--pp-green-bg); padding: 60px 0 20px; color: var(--pp-heading); }
.pp-footer-main { display: grid; grid-template-columns: 716fr 1004fr; gap: 40px; align-items: center; }
.pp-footer-map { height: 448px; }
.pp-footer-logo { height: 80px; width: auto; display: block; }
.pp-footer-cols { display: flex; gap: clamp(40px, 8.3vw, 160px); }
.pp-footer-info { flex: 0 1 550px; gap: 24px; color: rgba(1, 16, 29, .7); }
.pp-footer-info dt { font-style: normal; font-weight: 500; color: var(--pp-heading); }
.pp-footer-info div { gap: 8px; }
.pp-footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.pp-footer-nav li, .pp-menu .navbar-nav li { line-height: normal; padding-left: 0; } /* beats style.css "ul li" (50px line-height, 35px indent) */
.pp-footer-nav a { font-size: var(--pp-xl); font-weight: 500; color: var(--pp-heading); text-decoration: none; }
.pp-footer-nav a:hover, .pp-legal a:hover { color: var(--pp-accent); }
.pp-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0; margin-top: 40px; }
.pp-footer-bottom p { font-size: 16px; }
.pp-legal { display: flex; align-items: center; flex-wrap: wrap; font-size: 18px; color: rgba(1, 16, 29, .7); }
.pp-legal a { color: inherit; text-decoration: none; }
.pp-legal .pp-sep { margin: 0 12px; color: var(--pp-heading); }

/* Responsive — mobile layout follows Figma "Pharmacy Mobile layout" (node 5329:82018, 430px frame). */

/* ≤ 1399px: side cards shrink, nav tightens */
@media (max-width: 1399.98px) {
  .pp-menu, .pp-menu .navbar-nav { gap: clamp(20px, 2.08vw, 40px); }
  .pp-faq-card { flex-basis: 420px; }
  .pp-nabp { width: 320px; height: 190px; }
  .pp-footer-cols { gap: 40px; }
}

/* ≤ 1199px: two-column sections get more room for text */
@media (max-width: 1199.98px) {
  .pp-footer-main { grid-template-columns: 1fr 1.4fr; }
  .pp-footer-map { height: 100%; min-height: 360px; }
  .pp-footer-cols { flex-direction: column; gap: 32px; }
  .pp-footer-nav { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .pp-footer-info { flex-basis: auto; }
}

/* ≤ 991px (tablet + phone): hamburger menu, every section stacks */
@media (max-width: 991.98px) {
  :root { --pp-gutter: 24px; --pp-h1: 32px; --pp-h2: 28px; --pp-xl: 18px; --pp-lg: 16px; }
  html { scroll-padding-top: 80px; }
  .pp-nav { padding-top: 12px; padding-bottom: 12px; }
  .pp-logo img { height: 44px; }
  .pp-menu { gap: 16px; padding: 12px 0 8px; align-items: flex-start; }
  .pp-menu .navbar-nav { gap: 0; }
  .pp-menu .navbar-nav a { display: block; padding: 10px 0; }

  .pp-section { padding-top: 32px; padding-bottom: 32px; }
  .pp-split, .pp-about, .pp-contact { grid-template-columns: 1fr; gap: 32px; }
  .pp-stack-40 { gap: 24px; }
  .pp-stack-48 { gap: 28px; }
  .pp-stack-16 { gap: 8px; }
  main h1 { line-height: 1.25; }
  main h2 { line-height: 1.21; }
  .pp-hero-sub { font-size: 20px; }
  .pp-hero-body { font-size: 18px; line-height: normal; }
  .pp-btn, .pp-btn-lg { font-size: 18px; padding: 12px 24px; }

  #location .pp-split { gap: 24px; }
  .pp-map { height: 360px; }
  .pp-info { gap: 16px; font-size: 16px; }
  .pp-info dt { font-size: 18px; }

  .pp-products { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .pp-product h3 { font-size: 20px; padding: 20px; }

  .pp-demo-row { flex-direction: column; align-items: stretch; gap: 28px; }
  .pp-nabp { width: auto; height: auto; background: none; border: 0; border-top: 1px solid var(--pp-line);
    border-radius: 0; padding-top: 28px; justify-content: flex-start; }

  .pp-faq-row { flex-direction: column; align-items: stretch; gap: 40px; }
  .pp-faq-list { flex-basis: auto; gap: 0; }
  .pp-faq { padding: 24px 0; }
  .pp-faq summary::after { width: 24px; height: 24px; }
  .pp-faq-answer { font-size: 16px; }
  .pp-faq-card { flex-basis: auto; padding: 32px 24px; gap: 28px; border-radius: 24px; }

  .pp-contact-img { height: auto; aspect-ratio: 716 / 669; }

  .pp-footer { padding: 30px 0 20px; }
  .pp-footer .pp-container { padding: 0; }
  .pp-footer-main { grid-template-columns: 1fr; gap: 28px; }
  .pp-footer-map { display: none; } /* mobile design drops the footer map; #location already has one */
  .pp-footer-main > .pp-stack-40 { gap: 24px; }
  .pp-footer-main > .pp-stack-40 > a, .pp-footer-info { padding: 0 var(--pp-gutter); }
  .pp-footer-logo { height: 50px; }
  .pp-footer-cols { flex-direction: column; gap: 28px; }
  .pp-footer-info { flex-basis: auto; gap: 16px; font-size: 16px; }
  .pp-footer-info dt { font-size: 16px; font-weight: 600; }
  .pp-footer-nav { flex-direction: column; gap: 0; border-top: 1px solid var(--pp-line); }
  .pp-footer-nav li { border-bottom: 1px solid var(--pp-line); }
  .pp-footer-nav a { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--pp-gutter); font-size: 16px; }
  .pp-footer-nav a::after { content: "\f105"; font-family: FontAwesome; font-size: 18px; }
  .pp-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; padding: 20px var(--pp-gutter) 0; }
  .pp-footer-bottom p, .pp-legal { font-size: 14px; }
  .pp-legal .pp-sep { margin: 0 10px; }
}

/* ≤ 575px (phones): single-column cards, portrait like the mobile design */
@media (max-width: 575.98px) {
  .pp-products { grid-template-columns: 1fr; }
  .pp-product { aspect-ratio: 382 / 550; }
  .pp-map { height: auto; aspect-ratio: 382 / 239; }
  .pp-hero-img, .pp-about-img { border-radius: 16px; }
}