/*
 Theme Name:   Canmore Pharmacy Child
 Theme URI:    https://canmorepharmacy.ca
 Description:  Divi Child Theme for Canmore Pharmacy
 Author:       Roha Tech Corp
 Author URI:   https://rohatech.ca
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  canmore-pharmacy-child
*/

/* ── Smooth in-page anchor scrolling (nav "Transfer Rx", hero CTA, etc.) ──
   scroll-padding-top offsets the landing position so content doesn't end up
   hidden under the fixed #main-header (89px tall). Respects reduced-motion. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Brand tokens ─────────────────────────────────────── */
:root {
  --navy:    #003B71;
  --navy-d:  #002450;
  --navy-l:  #1a5296;
  --white:   #ffffff;
  --cream:   #f4f6fa;
  --mist:    #e8edf5;
  --text:    #1a2035;
  --sub:     #3a4a6a;
}

/* ── Typography ───────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.et_pb_slide_title,
.et_pb_module_header {
  font-family: 'DM Serif Display', serif !important;
  color: var(--navy) !important;
}

/* ── Header ───────────────────────────────────────────── */
#main-header,
#main-header.et-fixed-header {
  background-color: var(--white) !important;
  box-shadow: 0 2px 16px rgba(0,59,113,0.08);
}

#main-header #top-menu a,
#main-header #top-menu li a {
  color: var(--navy) !important;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

#main-header #top-menu a:hover,
#main-header #top-menu li a:hover,
#main-header #top-menu li.current-menu-item > a {
  color: var(--navy-l) !important;
  opacity: 1;
}

/* Logo height */
#logo { max-height: 55px !important; }

/* Nav CTA — "Transfer Rx" pill button, rightmost menu item */
#main-header #top-menu li.menu-cta {
  margin-left: 8px;
}

#main-header #top-menu li.menu-cta > a,
#main-header #top-menu li.menu-cta.current-menu-item > a {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  padding: 9px 22px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}

#main-header #top-menu li.menu-cta > a:hover {
  background-color: var(--navy-l) !important;
  color: var(--white) !important;
}

/* ── Buttons ──────────────────────────────────────────── */
/* Default Divi buttons are left unstyled here so per-button colors set in
   the builder (background/text/radius) take effect. Apply the .canmore-btn-primary
   class (via the module's CSS Class field) to get the navy pill treatment. */
body .et_pb_button.canmore-btn-primary,
body a.et_pb_button.canmore-btn-primary {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 12px 28px !important;
  transition: background 0.2s, transform 0.2s !important;
}

body .et_pb_button.canmore-btn-primary:hover,
body a.et_pb_button.canmore-btn-primary:hover {
  background-color: var(--navy-l) !important;
  border-color: var(--navy-l) !important;
  transform: translateY(-2px);
}

/* ── Links ────────────────────────────────────────────── */
a { color: var(--navy); }
a:hover { color: var(--navy-l); }

/* ── Footer ───────────────────────────────────────────── */
#main-footer {
  background-color: var(--navy-d) !important;
}

#main-footer .footer-widget h4,
#main-footer .et_pb_widget_area_title {
  font-family: 'DM Serif Display', serif !important;
  color: var(--white) !important;
}

#main-footer,
#main-footer p,
#main-footer a,
#main-footer li {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.85rem;
}

#main-footer a:hover { color: var(--white) !important; }

#et-footer-nav { background-color: #001830 !important; }
#et-footer-nav .bottom-nav a { color: rgba(255,255,255,0.6) !important; }

/* Footer widget grid — brand column wider than the two link columns */
#main-footer #footer-widgets {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 40px !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

#main-footer .footer-widget {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

#main-footer .footer-widget h4 {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 14px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.canmore-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.canmore-footer-links a {
  font-size: 0.83rem !important;
  text-decoration: none;
}

@media (max-width: 767px) {
  #main-footer #footer-widgets {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ── Utility classes (use in Divi CSS field) ──────────── */
.bg-navy    { background-color: var(--navy) !important; }
.bg-cream   { background-color: var(--cream) !important; }
.text-navy  { color: var(--navy) !important; }
.text-white { color: var(--white) !important; }

/* ── Contact forms — 2-column field grid ───────────────
   The Divi 5 contact form's field wrapper is a column-flex
   (fields stack one-per-row regardless of each field's own
   width). Re-flowing it as a 2-col grid lets 12_24 (half-width)
   fields pair up automatically while 24_24 (full-width) fields
   still span both columns. */
.et_pb_contact_form_container .et_pb_contact_form.et_flex_module {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 20px !important;
}

.et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field.et_flex_column_12_24 {
  grid-column: span 1 !important;
  width: auto !important;
  max-width: none !important;
}

.et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field:not(.et_flex_column_12_24) {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 767px) {
  .et_pb_contact_form_container .et_pb_contact_form.et_flex_module {
    grid-template-columns: 1fr !important;
  }
  .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field.et_flex_column_12_24 {
    grid-column: 1 / -1 !important;
  }
}

/* Contact form field labels */
.et_pb_contact_form_label {
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  letter-spacing: 0.06em !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Transfer Rx / contact form card — the cream background + radius are set
   directly on the column in the generator; the box-shadow is added here since
   Divi 5's column module has no shadow option exposed through the builder
   helper. :has() targets the column that wraps a contact-form, wherever it
   appears (Home Transfer Rx, About Us Contact). */
.et_pb_column:has(.et_pb_contact_form_container) {
  box-shadow: 0 8px 30px rgba(0,59,113,0.10) !important;
}

/* Contact form submit button — keep label on one line, fill the card width */
.et_pb_contact_submit {
  white-space: nowrap !important;
  width: 100% !important;
}

/* Home hero photo background — Divi 5's PHP background renderer never picks up
   an image set via raw JSON attrs on this install (color-only backgrounds work
   fine; see generate-home.js for the investigation), so the photo + navy tint
   is applied here instead. .home is WordPress's own body class for whichever
   page is set as the static front page — no custom class needed. The Hero
   section is always the first section on Home (.et_pb_section_0).
   Path is relative to this stylesheet (wp-content/themes/canmore-child-theme/)
   so it resolves the same on local and production without editing per-environment. */
body.home .et_pb_section_0 {
  background-image: linear-gradient(rgba(0,59,113,0.72), rgba(0,59,113,0.72)), url('../../uploads/2026/09/IMG_0374-scaled.jpeg') !important;
  background-size: cover !important;
  background-position: center center !important;
  min-height: 85vh !important;
  display: flex !important;
  /* Divi's own CSS sets flex-direction: column on .et_pb_section (so a section
     can stack multiple rows) -- on a column flex container, align-items
     controls the horizontal axis, not vertical. justify-content is the one
     that centers along the main (vertical, here) axis. */
  flex-direction: column !important;
  justify-content: center !important;
}

/* ── Location / contact info cards (mockup .loc-item / .loc-icon) ────── */
.loc-item {
  background: var(--white);
  border-radius: 13px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(0,59,113,.08);
  margin-bottom: 12px;
}
.loc-icon {
  width: 36px;
  height: 36px;
  background: var(--mist);
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.loc-item strong {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  margin-bottom: 3px;
}
.loc-item span {
  font-size: .88rem;
  color: var(--sub);
  line-height: 1.5;
}
.loc-item span a { color: inherit; }

/* On the About Us contact card (cream card background), give loc-items a
   slightly lighter fill so they still read as distinct boxes. */
.et_pb_column .loc-item {
  background: var(--white);
}

/* ── Photo border-radius — image module decoration attrs weren't picked up
   by the renderer here, so applied via CSS instead, scoped by alt text since
   these are the only two content photos using this exact wording. ────────── */
img[alt="Inside Canmore Pharmacy, serving the Bow Valley community"],
img[alt="Inside Canmore Pharmacy, licensed and accredited"] {
  border-radius: 16px !important;
}

/* ── Team member photos ───────────────────────────────────────────────── */
.canmore-team-photo,
img[alt^="Pranav Vaidya"],
img[alt^="Jaimin Patel"] {
  border-radius: 50% !important;
  width: 180px !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: top !important;
  margin: 0 auto 16px !important;
  display: block !important;
}

/* ── Services category filter tabs (mockup .cat-tabs / .cat-tab) ─────── */
.cat-tabs {
  background: var(--white);
  border-bottom: 2px solid var(--mist);
  padding: 0 5%;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 90;
}
.cat-tabs::-webkit-scrollbar {
  height: 4px;
}
.cat-tabs::-webkit-scrollbar-thumb {
  background: var(--mist);
  border-radius: 4px;
}
.cat-tab {
  padding: 16px 22px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sub);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
  letter-spacing: .03em;
  font-family: 'DM Sans', sans-serif;
}
.cat-tab:hover { color: var(--navy); }
.cat-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ── Services filter — fade transition instead of an instant display:none
   cut. The category sections use display:none/"" (see the Filter Script code
   module on the Services page) since opacity alone would leave blank gaps
   where a hidden section used to be; the opacity fade is timed to finish
   before that display swap happens, so it reads as a smooth cross-fade. ── */
[data-category] {
  transition: opacity .2s ease;
}
[data-category].canmore-filtering-out {
  opacity: 0;
}

/* ── Hero heading — "Pharmacy" italic/muted, rest stays bold white ────── */
body.home .et_pb_section_0 h1 em,
body.home .et_pb_section_0 .et_pb_module_header em {
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.6) !important;
}

/* Hero eyebrow pill — green "now open" dot */
.canmore-hero-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5cb85c;
  margin-right: 8px;
  vertical-align: middle;
}

/* ── Contact info cards — 2-up row (Phone/Fax) ─────────────────────────── */
.loc-row {
  display: flex;
  gap: 12px;
}
.loc-row .loc-item {
  flex: 1 1 0;
  /* Flex items default to min-width:auto, which refuses to shrink below the
     unwrapped phone-number text width. On narrow columns (mobile) that blew
     out this row's parent and forced the whole page to scroll horizontally. */
  min-width: 0;
}
.loc-row .loc-item span {
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .loc-row {
    flex-direction: column;
  }
}

/* ── Transfer Rx numbered steps — styled circles ───────────────────────── */
.rx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rx-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .85rem;
  color: var(--sub);
}
.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Native contact-form fields — explicit override of Divi's default
   input styling (equivalent of the requested .wpcf7 rules; this site uses
   Divi 5's native Contact Form module, not Contact Form 7). ────────────── */
.et_pb_contact_form_container input[type="text"],
.et_pb_contact_form_container input[type="email"],
.et_pb_contact_form_container input[type="tel"],
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select {
  border: 1.5px solid rgba(0,59,113,0.15) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 0.88rem !important;
  font-family: 'DM Sans', sans-serif !important;
}
.et_pb_contact_form_container input[type="text"]:focus,
.et_pb_contact_form_container input[type="email"]:focus,
.et_pb_contact_form_container input[type="tel"]:focus,
.et_pb_contact_form_container textarea:focus,
.et_pb_contact_form_container select:focus {
  outline: none;
  border-color: var(--navy) !important;
}