/* 
 Theme Name:   Anchor Psychiatric
 Theme URI:    
 Description:  Child Theme of Divi
 Author:       Casey Landreth
 Author URI:   https://ecog.media
 Template:     Divi
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/
/* ---------- 1. Design Tokens (CSS custom properties) ---------- */ :root {
  /* Brand palette — two primaries: navy #253551 + greige #E0E0DB */
  --navy: #253551; /* PRIMARY */
  --navy-800: #1c283f; /* deeper navy for depth / gradients */
  --navy-600: #34496c; /* mid navy */
  --navy-100: #ececE8; /* light greige tint for alt sections */
  --teal: #3d5a80; /* steel-blue interactive accent (blue family) */
  --teal-600: #253551; /* accent hover -> navy */
  --teal-100: #e4e6ea; /* pale blue-greige wash (icon chips) */
  --gold: #c69a52; /* limited warm accent (veterans only) */
  --gold-100: #f4ecdd;
  --greige: #E0E0DB; /* SECONDARY PRIMARY */
  --greige-200: #cfcfc8; /* greige block edge / deeper border */
  --sand: #E0E0DB; /* greige section background (alias) */
  --paper: #f3f3ef; /* soft greige page background — open feel */
  --white: #ffffff;
  --ink: #232a35; /* body text */
  --ink-muted: #5b6472; /* secondary text */
  --line: #d4d4cd; /* greige hairline borders (blockier) */
  /* Fluid type scale (min .. max) */
  --fs-hero: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;
  /* Spacing + shape */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(37, 53, 81, .06);
  --shadow-md: 0 12px 30px rgba(37, 53, 81, .10);
  --shadow-lg: 0 26px 60px rgba(37, 53, 81, .16);
  --container: 1180px;
  --gutter: clamp(1.2rem, 4vw, 2.6rem);
  --section-y: clamp(4.5rem, 7vw, 7.5rem);
}

.et-menu-nav .nav-link A {
	background-color: var(--sand);
	color: var(--navy) !important;
	padding: 15px 20px !important;
	border-radius: 15px;
}


.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
  margin-top: 10px;
  margin-right: 10px;
}
.et_pb_number_counter .percent {
  height: auto !important;
}
.icon-small {
  background-color: #E4E6EA;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  padding: 10px;
  aspect-ratio: 1/1;
}
.icon-small IMG {
  width: 100%;
  aspect-ratio: 1/1;
}
/* ===== Eyebrow label for Divi Text modules =====
   Apply: Module → Advanced → CSS Class → add "eyebrow"
   Navy sections: Module → Design → Text → Text Color → "Light" */
/* 1. lay the tick + text on one line */
.eyebrow .et_pb_text_inner {
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* 2. the little accent tick (was the ::before on .eyebrow) */
.eyebrow .et_pb_text_inner::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: #3D5A80; /* steel-blue accent */
}
/* 3. the text itself — Divi wraps it in <p>, so style the <p> and kill its margin */
.eyebrow .et_pb_text_inner p {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: #3D5A80; /* steel-blue accent */
}
/* 4. center it when the module's Text Alignment is set to Center */
.eyebrow.et_pb_text_align_center .et_pb_text_inner {
  justify-content: center;
}
/* 5. light variant for navy sections (Divi adds this class when Text Color = Light) */
.eyebrow.et_pb_bg_layout_dark .et_pb_text_inner::before {
  background: #E0E0DB;
}
.eyebrow.et_pb_bg_layout_dark .et_pb_text_inner p {
  color: #E0E0DB;
}
.step-num {
  counter-increment: step;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

/* ---------------------------------------------------------------------
   HEADER MENU — put the "Appointments" button inline with the links.
   The button is a custom-link menu item with the class .nav-link.
   Root cause: the menu <ul> uses align-items:stretch, and the button's
   <a> has tall 15px padding, so it drops below the plain text links.
   --------------------------------------------------------------------- */
.et-menu{ align-items:center !important; }        /* vertically center the whole row */
.et-menu li.nav-link > a{
  padding:9px 18px !important;                     /* slimmer pill that matches the link height */
  line-height:1.2 !important;
}
/* optional: stop the button wrapping to a new line on narrower desktops */
.et-menu{ flex-wrap:nowrap !important; }


/* ---------------------------------------------------------------------
   MOBILE MENU — remove Divi's white background box so the menu blends
   with the navy header (your mobile link text is already light).
   --------------------------------------------------------------------- */
.et_mobile_menu{
  background-color:#253551 !important;   /* match navy header. Use "transparent" if you prefer see-through */
  border-top:none !important;
  box-shadow:none !important;
}
.et_mobile_menu li a{ color:#e6eaf1 !important; }                       /* light, readable on navy */
.et_mobile_menu li a:hover{ background-color:rgba(255,255,255,.10) !important; opacity:1 !important; }
.et_mobile_menu .menu-item-has-children > a{ background-color:transparent !important; }