/*
 Theme Name:   Aura Dental
 Theme URI:    https://eoshealthcaremarketing.com/
 Description:  Aura Dental — EOS Divi 5 child theme.
 Author:       EOS Healthcare Marketing
 Author URI:   https://eoshealthcaremarketing.com/
 Template:     Divi
 Version:      1.0.0
 Text Domain:  aura-dental
*/


:root {

  /* Fonts */
  --font-ivy-ora-text : "ivyora-text", serif;
  --font-brother-1816 : "brother-1816", sans-serif;

  /* Colors */
  --darkest-green : #303423;
  --dark-green    : #2B362A;
  --medium-green  : #3A4738;
  --olive-green   : #545C47;
  --light-green   : #717B5E;
  --lightest-green: #978F64;
  --creme         : #F6F2E8;
  --cream         : #E8E2D6;
  --soft-beige    : #C9C2AC;
  --medium-beige  : #C9BEAA;

}


/* ═════════════════════════════════════════════════════════════
   GLOBAL / REUSABLE — used on every page
   ═════════════════════════════════════════════════════════════ */


/* ── Primary Button ───────────────────────────────────────── */
/* Apply .btn-primary in Divi Button module "CSS Class" field,    */
/* or as a class on any <a> / <button> inside a Code module.      */
.btn-primary {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  padding          : 0.75rem 1.25rem;
  background-color : var(--medium-green);
  color            : var(--cream);
  font-family      : var(--font-brother-1816);
  font-size        : clamp(0.8125rem, 0.761rem + 0.222vw, 1rem);   /* 13px → 16px */
  font-weight      : 400;
  line-height      : normal;
  letter-spacing   : clamp(0.244rem, 0.228rem + 0.067vw, 0.3rem);  /* 3.9px → 4.8px */
  text-transform   : uppercase;
  text-decoration  : none;
  white-space      : nowrap;
  border           : 0;
  border-radius    : 0;
  cursor           : pointer;
  transition       : background-color 0.2s ease, color 0.2s ease;
}

.btn-primary:hover {
  background-color : var(--dark-green);
  color            : var(--cream);
}

/* Divi Button module overrides — neutralize Divi defaults */
.et_pb_module .et_pb_button.btn-primary,
.et_pb_module .et_pb_button.btn-primary:hover {
  padding-left  : 1.25rem !important;
  padding-right : 1.25rem !important;
}
.et_pb_module .et_pb_button.btn-primary::after,
.et_pb_module .et_pb_button.btn-primary::before {
  display: none !important;
}


/* ── CTA Button ───────────────────────────────────────────── */
/* Use in a Code Module:                                          */
/* <a class="btn-cta" href="/book/">Book Now <svg class="btn-cta__icon">…</svg></a> */
.btn-cta {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  gap              : 0.625rem;
  min-width        : clamp(14.75rem,  13.364rem + 5.913vw, 19.75rem);   /* 236px → 316px */
  min-height       : clamp(4.0625rem, 3.682rem  + 1.626vw, 5.4375rem);  /* 65px  → 87px  */
  padding          : 0.75rem 0.9375rem;
  background-color : var(--cream);
  color            : var(--dark-green);
  font-family      : var(--font-brother-1816);
  font-size        : clamp(1.25rem,   1.111rem + 0.591vw, 1.75rem);    /* 20px → 28px */
  font-weight      : 350;
  line-height      : normal;
  letter-spacing   : clamp(0.1875rem, 0.167rem + 0.089vw, 0.2625rem);
  text-transform   : uppercase;
  text-decoration  : none;
  white-space      : nowrap;
  border           : 1px solid var(--dark-green);
  border-radius    : 0.9375rem;
  cursor           : pointer;
  transition       : background-color 0.2s ease, color 0.2s ease;
}

.btn-cta__icon {
  width       : 1.5rem;
  height      : 1.5rem;
  flex-shrink : 0;
}

.btn-cta:hover {
  background-color : var(--dark-green);
  color            : var(--cream);
}


/* ── Call Us Button ───────────────────────────────────────── */
/* Widescreen (≥1025px): plain creme-colored text link.           */
/* Tablet/mobile (≤1024px): beige pill button, "Call Us at"       */
/* breaks above the number.                                       */
/* Markup: <a class="btn-call" href="tel:+16789409674">            */
/*           <span>Call Us at</span> <span>678.940.9674</span>    */
/*         </a>                                                   */
.btn-call {
  display          : inline-block;
  text-decoration  : none;
  font-family      : var(--font-brother-1816);
  font-weight      : 400;
  line-height      : normal;
  cursor           : pointer;
}

@media (min-width: 1025px) {
  .btn-call {
    display          : inline-block;
    background       : transparent;
    border           : none;
    padding          : 0;
    color            : var(--creme);
    font-size        : 2.25rem;
    text-align       : left;
    width            : fit-content;
    align-self       : flex-start;
  }
}

@media (max-width: 1024px) {
  .btn-call {
    display          : flex;
    flex-direction   : column;
    gap              : 0.625rem;
    background-color : var(--soft-beige);
    border-radius    : 1rem;
    padding          : 0.75rem 1rem 0.75rem 1.5rem;
    width            : 11.25rem;
    color            : var(--dark-green);
    font-size        : 1.25rem;
    text-align       : left;
    transition       : background-color 0.2s ease, color 0.2s ease;
  }
  .btn-call:hover {
    background-color : var(--dark-green);
    color            : var(--soft-beige);
  }
  .btn-call > span { display: block; }
}


/* ── Mobile Menu Fix (Divi Plus plugin pair) ──────────────── */
/* Apply .pa-open-mobile-menu to the footer Menu module along       */
/* with .footer-nav. The Divi Plus add-on suppresses the hamburger */
/* and keeps the desktop nav visible at all widths; this block      */
/* takes that visible nav and stacks it cleanly at ≤980px.          */
@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
  /* Stack logo above menu inside the Menu module, with 3rem between */
  .pa-open-mobile-menu .et_pb_menu__wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem;
  }
  /* Menu items as a centered column with 1rem between */
  #menu-footer-menu {
    flex-direction: column !important;
    align-items: center;
    gap: 1rem;
  }
}


/* ── Footer Menu ──────────────────────────────────────────── */
/* Apply .footer-nav to the footer Menu module's CSS Class field. */
@media (max-width: 980px) {
  /* Center the menu block within the footer column */
  .footer-nav .et_pb_menu__wrap,
  .footer-nav .et_pb_menu__menu {
    justify-content : center !important;
    align-items     : center !important;
    width           : 100% !important;
  }
  .footer-nav .et-menu-nav,
  .footer-nav ul.et-menu {
    margin-left  : 0 !important;
    margin-right : 0 !important;
    width        : 100% !important;
  }
  .footer-nav ul.et-menu {
    align-items : center !important;
    row-gap     : 0 !important;
  }
  .footer-nav ul.et-menu > li {
    justify-content : center !important;
    width           : 100% !important;
  }

  /* Tighter item spacing — overrides Divi's ~31px link padding */
  .footer-nav.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a,
  .footer-nav .et-menu li > a {
    padding-top    : 0.4rem !important;
    padding-bottom : 0.4rem !important;
  }

  /* Center the logo and zero Divi's built-in 30px right margin */
  .footer-nav .et_pb_menu__logo-wrap { justify-content: center !important; }
  .footer-nav .et_pb_menu__logo      { margin: 0 !important; }

  /* 3.5rem gap between logo and menu */
  .footer-nav .et_pb_menu_inner_container { row-gap: 3.5rem !important; }
}

/* Desktop: spread items across with 10% gap between logo and menu */
@media (min-width: 981px) {
  .footer-nav .et_pb_menu__menu {
    flex         : 1;
    margin-left  : 10% !important;
  }
  .footer-nav .et-menu-nav,
  .footer-nav ul.et-menu {
    width           : 100% !important;
    justify-content : space-between !important;
    flex-wrap       : nowrap !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   MULTI-PAGE COMPONENTS — used on more than one page
   ═════════════════════════════════════════════════════════════ */


/* ── Hero Image — equal-height responsive crop ───────────── */
/* Used on: About Us, Meet The Doctor, Services, Contact Us.       */
/* Apply .hero-img to each Divi Image module's CSS Class field.    */
/* All images sharing the class crop to the same height per         */
/* breakpoint using object-fit: cover.                              */
.hero-img img {
  width      : 100%;
  height     : 500px;
  object-fit : cover;
  display    : block;
}
@media (max-width: 1100px) {
  .hero-img img { height: 40vw; }
}
@media (max-width: 980px) {
  .hero-img img { height: 320px; }
}
@media (max-width: 480px) {
  .hero-img img { height: 240px; }
}


/* ═════════════════════════════════════════════════════════════
   HOME PAGE (/)
   ═════════════════════════════════════════════════════════════ */


/* ── Text Button (with divider underneath) ────────────────── */
/* Use in a Code Module: <a class="btn-text" href="...">Book Now</a> */
.btn-text {
  display          : inline-block;
  padding          : 0 0 0.5rem;
  background       : transparent;
  color            : var(--cream);
  font-family      : var(--font-brother-1816);
  font-size        : 1.5rem;
  font-weight      : 350;
  line-height      : normal;
  letter-spacing   : 0.225rem;
  text-transform   : uppercase;
  text-decoration  : none;
  white-space      : nowrap;
  border           : none;
  border-bottom    : 1px solid var(--cream);
  cursor           : pointer;
  transition       : opacity 0.2s ease;
}

.btn-text:hover {
  opacity: 0.75;
}

/* Color variant — apply alongside .btn-text. Fluid type scale: */
/*   font-size      16px → 24px (1rem → 1.5rem)                  */
/*   letter-spacing 0.15rem → 0.225rem                           */
.btn-text-green {
  color               : var(--medium-green);
  border-bottom-color : var(--medium-green);
  font-size           : clamp(1rem,    0.861rem + 0.591vw, 1.5rem);
  letter-spacing      : clamp(0.15rem, 0.129rem + 0.089vw, 0.225rem);
}


/* ── 2x2 Card Grid — "Your Partners in Every Step" ───────── */
/* Apply .card-grid to the Row, .card-img to each Image module,    */
/* .swap-img to the lady-image column, .swap-text to the           */
/* Comprehensive text column.                                       */

/* Image cards match the grid box height, no distortion */
.card-grid .card-img,
.card-grid .card-img .et_pb_image_wrap,
.card-grid .card-img .et_pb_image_wrap img { height: 100%; }
.card-grid .card-img { margin: 0; }
.card-grid .card-img .et_pb_image_wrap,
.card-grid .card-img .et_pb_image_wrap img { display: block; width: 100%; }
.card-grid .card-img .et_pb_image_wrap img { object-fit: cover; object-position: center; }

/* Swap lady image and Comprehensive card on tablet + mobile only */
@media (max-width: 980px) {
  .card-grid .swap-text { order: 3; }
  .card-grid .swap-img  { order: 4; }
}


/* ═════════════════════════════════════════════════════════════
   ABOUT US PAGE (/dental-office/)
   ═════════════════════════════════════════════════════════════ */


/* ── "What We Stand For" Grid ─────────────────────────────── */
/* Apply .wsf-grid to the Row containing the .about-us-what blurbs. */
/* Works whether blurbs live in one column or are split across many */
/* Divi columns — the grid flattens them and auto-wraps 3→2→1.    */
.wsf-grid {
  display               : grid !important;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
  gap                   : 1px;
  background-color      : var(--medium-beige);
}

@media (max-width: 767px) {
  .wsf-grid {
    grid-template-columns: 1fr !important;
  }
}

.wsf-grid .et_pb_column {
  width      : auto !important;
  max-width  : 100% !important;
  margin     : 0 !important;
  padding    : 0 !important;
}

.wsf-grid .about-us-what {
  margin    : 0 !important;
  max-width : none;
}


/* ── About Us "What" blurb ────────────────────────────────── */
/* Apply .about-us-what to a Divi Blurb module's CSS Class field. */
/*   Heading → .subheading-md  ·  Body → .body-md                 */
.about-us-what,
.about-us-what .et_pb_blurb_content,
.about-us-what .et_pb_blurb_container {
  height: 100%;
}

.about-us-what .et_pb_blurb_container {
  display        : flex !important;
  flex-direction : column;
}

.about-us-what .et_pb_main_blurb_image {
  display: none !important;
}

.about-us-what .et_pb_module_header {
  font-family    : var(--font-brother-1816) !important;
  font-size      : var(--text-sub-md) !important;
  font-weight    : 400 !important;
  line-height    : normal !important;
  letter-spacing : 0.15em !important;
  text-transform : uppercase !important;
}

.about-us-what .et_pb_blurb_description {
  margin-top  : auto;
}

.about-us-what .et_pb_blurb_description,
.about-us-what .et_pb_blurb_description p,
.about-us-what .et_pb_blurb_description li {
  font-family : var(--font-brother-1816) !important;
  font-size   : var(--text-body-md) !important;
  font-weight : 350 !important;
  line-height : normal !important;
}

/* Position context for the hover overlay (all viewports) */
.about-us-what {
  position : relative;
  overflow : hidden;
}
.about-us-what .et_pb_blurb_content {
  position : relative;
  z-index  : 1;
}

/* Desktop: hover image fades in, no overlay. */
/* Each .about-us-what blurb sets --hover-bg in Divi's Custom CSS */
/* (Main Element field): --hover-bg: url('/path/to/image.webp');   */
@media (hover: hover) and (min-width: 981px) {
  /* Suppress Divi's instant hover background swap so only ::before fades */
  .about-us-what:hover {
    background-image : none !important;
    background-color : var(--dark-green) !important;
  }
  .about-us-what::before {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : var(--hover-bg) center / cover no-repeat;
    opacity        : 0;
    transition     : opacity 0.4s ease;        /* fades both directions */
    pointer-events : none;
    z-index        : 0;
  }
  .about-us-what:hover::before {
    opacity: 1;
  }
}

/* Tablet/mobile: no hover effect, aspect ratio held at 25:24 (Figma),  */
/* no internal padding inside the card.                                  */
@media (max-width: 980px) {
  .about-us-what {
    aspect-ratio : 25 / 24;
    padding      : 0 !important;
  }
  .about-us-what .et_pb_blurb_content,
  .about-us-what .et_pb_blurb_container {
    padding: 0 !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   SERVICES PAGE (/dental-care/)
   ═════════════════════════════════════════════════════════════ */


/* ── "What We Offer" Carousel ─────────────────────────────── */
/* Apply .wwo-track to the Row, .wwo-card to each Blurb inside. */

/* Track: horizontal scroll-snap row */
.wwo-track .et_pb_column {
  display                   : flex;
  flex-wrap                 : nowrap;
  overflow-x                : auto;
  scroll-snap-type          : x mandatory;
  scroll-behavior           : smooth;
  gap                       : 24px;
  max-width                 : 100%;
  padding                   : 2px 4px;
  scroll-padding-left       : 4px;
  scroll-padding-right      : 4px;
  scrollbar-width           : none;
  -webkit-overflow-scrolling: touch;
}
.wwo-track .et_pb_column::-webkit-scrollbar { display: none; }

/* Cards: 3-up desktop, 2-up tablet, 1-up mobile */
.wwo-card {
  flex              : 0 0 calc(33.333% - 16px);
  scroll-snap-align : start;
  margin            : 0 !important;
  max-width         : none;
  display           : flex;
  flex-direction    : column;
}
.wwo-card .et_pb_blurb_content {
  display        : flex;
  flex-direction : column;
  flex           : 1;
}
.wwo-card .et_pb_blurb_container {
  flex : 1;
}
@media (max-width: 980px) {
  .wwo-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 600px) {
  .wwo-card                 { flex: 0 0 100%; }
  .wwo-track .et_pb_column  { gap: 16px; }
}

/* Card content styling — heading/body/border auto-applied */
.wwo-card .et_pb_module_header {
  font-family    : var(--font-brother-1816) !important;
  font-size      : var(--text-sub-sm) !important;
  font-weight    : 400 !important;
  line-height    : normal !important;
  letter-spacing : 0.15em !important;
  text-transform : uppercase !important;
  margin-bottom  : 1rem !important;
}

.wwo-card .et_pb_blurb_description,
.wwo-card .et_pb_blurb_description p,
.wwo-card .et_pb_blurb_description li {
  font-family : var(--font-brother-1816) !important;
  font-size   : var(--text-body-sm) !important;
  font-weight : 350 !important;
  line-height : normal !important;
}

.wwo-card .et_pb_blurb_container {
  border        : 2px solid var(--lightest-green);
  border-radius : 2.5rem;
  padding       : 1.5rem 10% 0.5rem;
}


/* ═════════════════════════════════════════════════════════════
   CONTACT US PAGE (/dental-appointment/)
   ═════════════════════════════════════════════════════════════ */


/* ── Map Embed Wrapper ────────────────────────────────────── */
/* Apply .map-wrap to a div around a Google Maps iframe in a Code  */
/* Module. Maintains a 45:40.375 aspect ratio with a rounded border;*/
/* between 768-980px (tablet), switches to a vh-based height with    */
/* min/max bounds for better tablet proportions.                     */
.map-wrap {
  position      : relative;
  z-index       : 2;
  width         : 45rem;
  max-width     : 100%;
  aspect-ratio  : 45 / 40.375;
  border-radius : 2.5rem;
  border        : 1px solid #897E51;
  overflow      : hidden;
}
.map-wrap iframe {
  width   : 100%;
  height  : 100%;
  display : block;
  border  : 0;
}
@media (min-width: 768px) and (max-width: 980px) {
  .map-wrap {
    height       : 70vh;
    max-height   : 40.375rem;
    min-height   : 25rem;
    aspect-ratio : auto;
  }
}


/*  Divi Accessibility Skip to Content Contrast Error Fix for WAVE tool */
.skip-link.da-screen-reader-text,
.skip-link.da-screen-reader-text:focus {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    outline: 2px solid #2ea3f2 !important;
}