/*
Theme Name:   My Utah Pharmacy
Theme URI:    https://myutahpharmacy.com
Description:  Divi child theme for My Utah Pharmacy — matching original design.
Author:       Your Name
Template:     Divi
Version:      1.1.1
Text Domain:  myutahpharmacy
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@400;600;700;800&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --maroon:     #7b1c2c;
  --maroon-dk:  #5a1220;
  --green:      #52a55a;
  --green-dk:   #3a8242;
  --navy:       #1c2841;
  --white:      #ffffff;
  --off-white:  #f9f9f9;
  --border:     #e0e0e0;
  --text:       #444444;
  --radius:     3px;
  --ease:       0.2s ease;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER — WHITE BG, CENTERED LOGO, NAV BELOW ─────────── */
#main-header,
.et-fixed-header,
#top-header {
  background: var(--white) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  border-bottom: 3px solid var(--green) !important;
}

#main-header .container { display: block !important; text-align: center; }

#main-header .logo_container,
.et-fixed-header .logo_container {
  position: static !important;
  float: none !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  padding: 14px 0 6px !important;
}

#main-header .logo_helper { display: none !important; }

#logo, .et-fixed-header #logo {
  max-height: 80px !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 auto !important;
  float: none !important;
}

#et-top-navigation,
.et-fixed-header #et-top-navigation {
  float: none !important;
  display: block !important;
  width: 100% !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
}

#top-menu-nav { float: none !important; display: block !important; text-align: center !important; }

#top-menu {
  display: inline-block !important;
  float: none !important;
  white-space: nowrap !important;
}

#top-menu > li { display: inline-block !important; float: none !important; padding-right: 16px !important; }
#top-menu > li:last-child { padding-right: 0 !important; }

#top-menu a {
  color: var(--maroon) !important;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color var(--ease);
}
#top-menu a:hover,
#top-menu li.current-menu-item > a { color: var(--green) !important; }

/* Dropdowns */
#top-menu li ul.sub-menu {
  background: var(--white) !important;
  border-top: 3px solid var(--green) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  white-space: normal !important;
  text-align: left !important;
}
#top-menu li ul.sub-menu li { display: block !important; padding-right: 0 !important; }
#top-menu li ul.sub-menu a { color: var(--maroon) !important; width: 200px; }
#top-menu li ul.sub-menu a:hover { color: var(--green) !important; background: var(--off-white) !important; }

#et-top-navigation .et_duplicate_menu { display: none !important; }

/* Mobile menu */
@media (max-width: 980px) {
  #top-menu { white-space: normal !important; }
  #et_mobile_nav_menu { float: none !important; text-align: center !important; }
  .mobile_menu_bar:before { color: var(--maroon) !important; }
  #mobile_menu { background: var(--white) !important; border-top: 3px solid var(--green) !important; }
  #mobile_menu a { color: var(--maroon) !important; }
}

/* ── FOOTER ───────────────────────────────────────────────── */
#footer-widgets,
#et-footer-nav { background: var(--navy) !important; }
#footer-bottom  { background: #121c2e !important; }
#footer-widgets h4.widgettitle {
  color: var(--white) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-bottom: 2px solid var(--green) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}
#footer-widgets p,
#footer-widgets li,
#footer-widgets a { color: rgba(255,255,255,0.72) !important; font-size: 13px !important; }
#footer-widgets a:hover { color: var(--green) !important; }
#footer-info { color: rgba(255,255,255,0.45) !important; font-size: 12px !important; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.et_pb_button,
input[type="submit"],
button[type="submit"] {
  background: var(--green) !important;
  color: var(--white) !important;
  border: 2px solid var(--green) !important;
  border-radius: var(--radius) !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  transition: all var(--ease) !important;
}
.et_pb_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--green-dk) !important;
  border-color: var(--green-dk) !important;
}

/* ── GENERAL CONTENT ──────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Raleway', sans-serif;
  color: var(--navy);
}
a { color: var(--maroon); }
a:hover { color: var(--green); }

/* Page title */
.et_pb_title_container h1 { font-family: 'Raleway', sans-serif !important; }

/* Search widget */
.et_pb_widget input[type="search"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .logo_container { padding: 8px 0 !important; }
  #logo { max-height: 60px !important; }
  #main-header .et_mobile_menu { background: var(--white) !important; }
  #main-header .et_mobile_menu li a { color: var(--maroon) !important; }
}

/* ── HEADER POSITION FIX ──────────────────────────────────
   Make header static (always visible, not overlapping content)
───────────────────────────────────────────────────────── */
#main-header {
  position: relative !important;
  top: auto !important;
}

/* Remove Divi's automatic padding compensation for fixed header */
body.et_fixed_nav #page-container,
#page-container {
  padding-top: 0 !important;
}

/* Keep admin bar spacing correct */
.admin-bar #main-header {
  top: 0 !important;
}

/* ── FORCE HEADER VISIBLE — override et_hide_nav ─────────── */
.et_hide_nav #main-header,
.et_hide_nav #top-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* ── HIDE SECONDARY (TOP) NAV BAR ─────────────────────────
   The original site had only one nav. Hide Divi's top bar.
───────────────────────────────────────────────────────── */
#top-header,
#et-secondary-menu {
  display: none !important;
}