/* =========================================
   HEBE CLINIC — Global Site Skin
   Pure White Luxury · Black · Gold Accents
   Apply to ALL pages except Homepage
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --hb-black: #0A0A0A;
  --hb-white: #FFFFFF;
  --hb-off:   #FAFAFA;
  --hb-g1:    #F5F5F5;
  --hb-g2:    #EEEEEE;
  --hb-gold:  #B8935A;
  --hb-gold2: #C9A96E;
  --hb-gold3: #DFC28E;
  --hb-text:  #1A1A1A;
  --hb-muted: #6B6B6B;
  --hb-max:   1320px;
}

/* ---- BASE ---- */
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--hb-white) !important;
  color: var(--hb-text) !important;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--hb-gold); border-radius: 4px; }

/* ---- HEADINGS ---- */
h1, h2, h3, h4, .entry-title, .page-title,
.elementor-heading-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: var(--hb-black) !important;
  line-height: 1.2;
}
h1 { font-size: clamp(2.4rem, 4vw, 3.6rem) !important; }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem) !important; }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem) !important; }

/* ---- ASTRA HEADER OVERRIDE ---- */
#masthead,
.site-header,
header.ast-header-break-point,
.ast-header-stacked,
.main-header-bar {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s !important;
}
body.scrolled #masthead,
body.scrolled .site-header {
  box-shadow: 0 4px 28px rgba(0,0,0,0.06) !important;
}

/* Site title / logo area */
.site-title a,
.ast-site-name-logo a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: var(--hb-black) !important;
  letter-spacing: 0.08em;
}
.ast-logo-img { max-height: 52px !important; width: auto !important; }

/* Nav menu */
.ast-header-break-point .main-navigation,
.main-navigation,
.primary-navigation,
.ast-main-menu-default .menu-link,
#site-navigation .menu-item > a,
.main-header-bar .ast-main-menu-default > li > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hb-text) !important;
  transition: color 0.2s !important;
}
.main-navigation a:hover,
.ast-main-menu-default > li > a:hover,
#site-navigation .menu-item > a:hover {
  color: var(--hb-gold) !important;
}
.ast-main-menu-default > li.current-menu-item > a,
.main-navigation li.current-menu-item > a {
  color: var(--hb-gold) !important;
  border-bottom: 1px solid var(--hb-gold) !important;
}

/* Mobile nav */
.ast-mobile-menu-trigger-fill,
.menu-toggle,
.ast-button-wrap .menu-toggle {
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

/* ---- TOP BAR (Astra) ---- */
.ast-top-bar,
.secondary-header,
.ast-above-header-bar {
  background: var(--hb-black) !important;
  border-bottom: none !important;
}
.ast-top-bar *,
.secondary-header *,
.ast-above-header-bar * {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.ast-top-bar a:hover,
.secondary-header a:hover { color: var(--hb-gold2) !important; }

/* ---- PAGE HERO / BANNER ---- */
.ast-page-banner,
.ast-page-header-wrap,
.page-header,
.wp-block-cover,
.entry-header {
  background: var(--hb-off) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  padding: 56px 0 48px !important;
}
.ast-page-banner .ast-page-banner-title,
.entry-title,
.page-title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--hb-black) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
}
.ast-breadcrumb-trail,
.breadcrumbs { font-size: 11px !important; color: var(--hb-muted) !important; }
.ast-breadcrumb-trail a,
.breadcrumbs a { color: var(--hb-gold) !important; }

/* ---- CONTENT AREA ---- */
.site-content,
#content,
.ast-container,
.entry-content,
.single-post .content-area {
  background: var(--hb-white) !important;
}
.entry-content p,
.entry-content li {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--hb-muted) !important;
  font-weight: 300 !important;
}
.entry-content strong { color: var(--hb-black) !important; font-weight: 600 !important; }

/* ---- BUTTONS SITE-WIDE ---- */
.ast-button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"],
.elementor-button,
.ast-custom-button {
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  border: none !important;
  padding: 14px 32px !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.ast-button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.elementor-button:hover {
  background: #1E1E1E !important;
  color: var(--hb-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
}

/* Outlined / secondary button variant */
.ast-outline-button,
.button.outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--hb-black) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}
.ast-outline-button:hover { border-color: var(--hb-gold) !important; color: var(--hb-gold) !important; }

/* ---- FORMS ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select,
.wpcf7-form-control {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 2px !important;
  padding: 12px 16px !important;
  background: var(--hb-white) !important;
  color: var(--hb-text) !important;
  outline: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  -webkit-appearance: none;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--hb-gold) !important;
  box-shadow: 0 0 0 3px rgba(184,147,90,0.1) !important;
}
label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hb-black) !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ---- CARDS / POST GRID ---- */
.ast-article-single,
.elementor-post,
.post,
.type-post,
.hentry {
  background: var(--hb-white) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 2px !important;
  transition: box-shadow 0.35s, transform 0.35s !important;
  overflow: hidden;
}
.ast-article-single:hover,
.elementor-post:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.09) !important; transform: translateY(-4px) !important; }

/* Post meta */
.post-meta,
.entry-meta,
.ast-post-meta,
.posted-on,
.byline { font-size: 10px !important; color: var(--hb-muted) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }

/* ---- SIDEBAR ---- */
.widget-area,
#secondary,
.sidebar {
  background: var(--hb-off) !important;
  border-left: 1px solid rgba(0,0,0,0.06) !important;
  padding: 32px 28px !important;
}
.widget-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--hb-black) !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(184,147,90,0.25);
  margin-bottom: 16px;
}

/* ---- FOOTER ---- */
.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-overlay,
.ast-small-footer {
  background: var(--hb-black) !important;
  color: rgba(255,255,255,0.4) !important;
  border-top: none !important;
}
.site-footer *,
#colophon *,
.footer-widget-area *,
.ast-footer-overlay * {
  font-family: 'DM Sans', sans-serif !important;
}
.site-footer h2,
.site-footer h3,
.site-footer .widget-title,
.footer-widget-area .widget-title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--hb-white) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer a,
.footer-widget-area a {
  color: rgba(255,255,255,0.38) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  transition: color 0.2s !important;
}
.site-footer a:hover,
.footer-widget-area a:hover { color: var(--hb-gold2) !important; }
.ast-small-footer-wrap,
.footer-credits,
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 20px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.18) !important;
}

/* ---- LINKS ---- */
a { color: var(--hb-gold); transition: color 0.2s; }
a:hover { color: var(--hb-black); }
.entry-content a { color: var(--hb-gold) !important; text-decoration: underline; text-decoration-color: rgba(184,147,90,0.3); }

/* ---- DIVIDERS / HR ---- */
hr { border: none; border-top: 1px solid rgba(0,0,0,0.07); }

/* ---- SERVICE PAGE CONTENT BLOCKS ---- */
.service-section,
.treatment-block,
.ast-flex-posts-grid,
.elementor-section {
  background: var(--hb-white) !important;
}

/* Service tabs / accordions */
.elementor-tab-title,
.elementor-accordion-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--hb-text) !important;
  background: var(--hb-g1) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  padding: 16px 20px !important;
  transition: background 0.2s, color 0.2s !important;
}
.elementor-tab-title.elementor-active,
.elementor-accordion-title[aria-expanded="true"] {
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
  border-color: var(--hb-black) !important;
}
.elementor-tab-content,
.elementor-accordion-content {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  color: var(--hb-muted) !important;
  font-weight: 300 !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-top: none !important;
  padding: 24px !important;
  background: var(--hb-white) !important;
}

/* Elementor icon boxes */
.elementor-icon-box-title { font-family: 'Cormorant Garamond', serif !important; font-size: 1.2rem !important; }
.elementor-icon i { color: var(--hb-gold) !important; }

/* Elementor image boxes */
.elementor-image-box-title { font-family: 'Cormorant Garamond', serif !important; }

/* ---- GOLD ACCENT UTILITIES ---- */
.hb-gold-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hb-gold3), transparent);
  margin: 0;
}
.hb-section-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hb-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hb-section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--hb-gold);
  flex-shrink: 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  h1 { font-size: clamp(2rem,8vw,2.8rem) !important; }
  h2 { font-size: clamp(1.5rem,6vw,2.2rem) !important; }
  .ast-page-banner { padding: 40px 0 32px !important; }
}

/* ---- SCROLL REVEAL (matches homepage classes) ---- */
body .r  { opacity: 0; transform: translateY(28px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
body .rl { opacity: 0; transform: translateX(-32px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
body .rr { opacity: 0; transform: translateX(32px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
body .r.on, body .rl.on, body .rr.on { opacity: 1; transform: none; }
body .d1 { transition-delay: .1s; }
body .d2 { transition-delay: .2s; }
body .d3 { transition-delay: .3s; }
body .d4 { transition-delay: .4s; }
