/*
	Theme Name: Culture Counts v3
	Author: MJAD advertising + design
	Author URI: https://masarjohnston.com
	Description: Custom WordPress theme built for Culture Counts, design by Tekwani.
	Template: Divi
	Version: 1.0.6
*/

/* ==========================================================================
   CultureCounts.biz — Divi Theme Builder fixed header, rev 20260827

   3 columns: logo (left) · pill menu (center) · CTA button (flush right)

   Sizing model: the pill and the rail have explicit heights, and all
   padding is horizontal. Nothing here is sized by line-height, which is
   what keeps Divi's `line-height: 1.7em !important` from breaking the
   CTA/rail height match. Change --cc-pill-h to scale the whole header.

   --cc-rail-pad is 0, so the pills run the full height of the rail and
   --cc-rail-h resolves to --cc-pill-h. The CTA is bound to --cc-rail-h,
   so it tracks the rail automatically. Set --cc-rail-pad back to 6px if
   the pills should ever be inset again.

   Selector note: Divi puts a module's CSS Class value on its OUTER element.
   For the Menu and Image modules that's a wrapping div, so `.cc-menu .et-menu`
   works. For the Button module the outer element IS the <a>, so the class
   lands as `a.et_pb_button.cc-cta` — combined, never descendant. Every CTA
   rule below reflects that.
   ========================================================================== */

:root {
  
  /* Brand Colors */
  --cc-cream:         #f0ede5; /* CC Cream - section backgrounds      		*/
  --cc-navy:          #192b3c; /* CC Dark Navy 								*/
  --cc-ink:           #1d4835; /* menu label color                          */
  --cc-green:         #1d4835; /* CC Deep Forest - active pill, CTA			*/
  --cc-green-hover:   #446B52; /* CC Forest Light - CTA hover               */
  --cc-orange:		  #de4139; /* CC Impact Orange - accents                */
  --cc-sage:   		  #9dc568; /* CC Sage                          			*/
  --cc-sky:		      #7fb3d5; /* CC Sky									*/
  --cc-slate:		  #37526d; /* CC Slate									*/

  /* Utility Colors */
  --cc-white:         #ffffff; /* CC White							        */
  --cc-spring-wood:   #f9f8f4; /* CC Spring Wood (lt cream)			        */
  --cc-athens-gray:   #e5e7eB; /* CC Athens Gray (lt cool gray)			    */
  --cc-graylabel:     #99a1af; /* CC Gray Label  (med cool gray)		    */
  --cc-mine-shaft:    #222222; /* CC Mine Shaft  (drk gray)			        */
  --cc-bg:            #faf8f3; /* header background (Light Cream)        	*/
  --cc-rail:          #e2e6dd; /* light sage pill rail behind the menu      */
  --cc-accent:        #8cbf4c; /* logo (CultureCounts Green)                */
  --cc-hairline:      #e0ddd3; /* 1px rule under the header                 */
  
  /* Elements */
  --cc-header-h:      96px;    /* header height — used by the fixed offset  */
  --cc-pill-radius:   999px;
  --cc-pill-h:        44px;    /* height of a menu pill = height of rail    */
  --cc-rail-pad:      0px;     /* 0 = pills flush to rail top and bottom    */
  --cc-rail-h:        calc(var(--cc-pill-h) + (var(--cc-rail-pad) * 2));
  --cc-nav-font:      14px;    /* Pills, CTA, footer share one size         */
}

.cc-arrow {
  display: inline-block;
  margin-left: 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   1. Header shell
   -------------------------------------------------------------------------- */

.et-l--header .cc-header {
  background-color: var(--cc-bg);
  border-bottom: 1px solid var(--cc-hairline);
  padding: 0 !important;
}

/* Row becomes the 3-column flex track. Divi's default 5.5% gutter and
   float-based columns are overridden here so the outer columns can hug
   the edges while the menu stays optically centered. */
.et-l--header .cc-header .et_pb_row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 92%;
  max-width: 1600px;
  padding: 0 !important;
  min-height: var(--cc-header-h);
}

.et-l--header .cc-header .et_pb_column {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  float: none;
}

/* Logo column: natural width, left aligned */
.et-l--header .cc-header .et_pb_column:nth-child(1) {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* Menu column: absorbs remaining space, contents centered */
.et-l--header .cc-header .et_pb_column:nth-child(2) {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0; /* lets the menu shrink instead of pushing the CTA off-canvas */
}

/* CTA column: natural width, flush right */
.et-l--header .cc-header .et_pb_column:nth-child(3) {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.et-l--header .cc-header .et_pb_module {
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Logo
   -------------------------------------------------------------------------- */

.et-l--header .cc-logo img,
.et-l--header .cc-logo svg {
  display: block;
  height: var(--cc-pill-h);
  width: auto;
}

/* --------------------------------------------------------------------------
   3. Menu — the sage rail
   The rail lives on ul.et-menu so it wraps the items exactly, with no
   dependence on the module's own width.
   -------------------------------------------------------------------------- */

.et-l--header .cc-menu.et_pb_menu {
  background-color: transparent !important;
}

/* The module is set to left-aligned in Divi (et_pb_menu--style-left_aligned).
   The column centers the rail; this keeps the wrap from fighting it. */
.et-l--header .cc-menu .et_pb_menu__wrap {
  justify-content: center;
}

.et-l--header .cc-menu .et_pb_menu__menu > nav > ul.et-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--cc-rail-h);
  padding: var(--cc-rail-pad);
  margin: 0;
  background-color: var(--cc-rail);
  border-radius: var(--cc-pill-radius);
  box-sizing: border-box;
}

/* Divi ships per-item margin and a padding-bottom used for its underline
   hover styles — both have to go or the pills sit off-center. The vertical
   margin reset is what lets the pills reach the rail edges. */
.et-l--header .cc-menu .et-menu > li {
  display: flex;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Menu items — pill buttons
   -------------------------------------------------------------------------- */

.et-l--header .cc-menu .et-menu > li > a {
  display: flex;
  align-items: center;
  height: var(--cc-pill-h);
  margin: 0;
  padding: 0 22px;
  border-radius: var(--cc-pill-radius);
  color: var(--cc-ink);
  font-size: var(--cc-nav-font);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Divi's underline/opacity hover effects, off */
.et-l--header .cc-menu .et-menu > li > a:before,
.et-l--header .cc-menu .et-menu > li > a:after {
  display: none !important;
}

.et-l--header .cc-menu .et-menu > li > a:hover {
  background-color: rgba(30, 59, 44, 0.10);
  color: var(--cc-green);
  opacity: 1;
}

/* Active page pill */
.et-l--header .cc-menu .et-menu > li.current-menu-item > a,
.et-l--header .cc-menu .et-menu > li.current_page_item > a,
.et-l--header .cc-menu .et-menu > li.current-menu-ancestor > a,
.et-l--header .cc-menu .et-menu > li.current-menu-parent > a {
  background-color: var(--cc-green);
  color: #ffffff;
}

.et-l--header .cc-menu .et-menu > li.current-menu-item > a:hover {
  background-color: var(--cc-sage);
  color: #ffffff;
}

/* Keyboard focus — visible without changing the resting look */
.et-l--header .cc-menu .et-menu > li > a:focus-visible,
body #page-container .et-l--header a.et_pb_button.cc-cta:focus-visible {
  outline: 2px solid var(--cc-green);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Dropdowns
   Unused today — no sub-menus in the current nav. Kept for when Resources
   or Work with Us gains children.
   -------------------------------------------------------------------------- */

.et-l--header .cc-menu .et-menu li ul.sub-menu {
  top: calc(100% + var(--cc-rail-pad) + 8px);
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 12px 32px rgba(22, 40, 31, 0.12);
}

.et-l--header .cc-menu .et-menu li ul.sub-menu li {
  display: block;
}

.et-l--header .cc-menu .et-menu li ul.sub-menu li a {
  padding: 10px 16px;
  width: auto;
  min-width: 200px;
  border-radius: 12px;
  color: var(--cc-ink);
  font-size: var(--cc-nav-font);
  font-weight: 500;
}

.et-l--header .cc-menu .et-menu li ul.sub-menu li a:hover {
  background-color: var(--cc-rail);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. CTA button
   Height is bound to --cc-rail-h, so it matches the rail without a
   separate number to keep in sync.

   The `body #page-container` prefix outranks Divi's own
   `body #page-container .et_pb_section .et_pb_button`, so almost nothing
   here needs !important. The exceptions are line-height, which Divi
   declares !important in core, and the pseudo-elements.
   -------------------------------------------------------------------------- */

body #page-container .et-l--header a.et_pb_button.cc-cta,
body #page-container .et-l--header a.et_pb_button.cc-cta:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cc-rail-h);
  min-height: 0;
  padding: 0 22px;
  border: 0;
  border-radius: var(--cc-pill-radius);
  background-color: var(--cc-green);
  color: #ffffff;
  font-size: var(--cc-nav-font);
  font-weight: 500;
  line-height: 1 !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

body #page-container .et-l--header a.et_pb_button.cc-cta:hover {
  background-color: var(--cc-green-hover);
}

/* Divi's left-icon slot, unused — would otherwise become a flex item */
body #page-container .et-l--header a.et_pb_button.cc-cta:before {
  display: none !important;
}

/* Arrow: in flow rather than absolutely positioned, so flex centers it */
body #page-container .et-l--header a.et_pb_button.cc-cta:after {
  color: #fff;
  content: "\2192" !important;
  font-family: "Helvetica", Arial, sans-serif !important;
  font-weight:500;
  position: static !important;
  opacity: 1 !important;
  margin-left: 10px;
  padding-right:0px !important;
  line-height: 1;
  font-size: 18px;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. Fixed positioning
   Prefer Divi's built-in sticky (Section → Advanced → Position → Sticky).
   Use this block only if you're pinning the header with CSS instead.
   -------------------------------------------------------------------------- */

.et-l--header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* Push page content clear of the fixed header */
#page-container .et-l--body,
#page-container #et-main-area {
  padding-top: var(--cc-header-h);
}

/* Divi admin bar offset */
.admin-bar .et-l--header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .et-l--header { top: 46px; }
}

/* --------------------------------------------------------------------------
   8. Responsive
   All breakpoint rules live here — one block per breakpoint. Between
   ~1180px and 981px the rail is the first thing to run out of room, so it
   tightens before Divi hands off to the hamburger at 980px.

   Font size holds at 14px throughout; only the horizontal padding and the
   pill height shrink. CTA rules carry the same `body #page-container`
   prefix as section 6 — without it they lose to the base rule on
   specificity, media query or not.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --cc-pill-h: 40px; }

  .et-l--header .cc-menu .et-menu > li > a {
    padding: 0 16px;
  }

  body #page-container .et-l--header a.et_pb_button.cc-cta,
  body #page-container .et-l--header a.et_pb_button.cc-cta:hover {
    padding: 0 20px;
  }
}

@media (max-width: 980px) {
  :root { --cc-header-h: 76px; }

  .et-l--header .cc-header .et_pb_row {
    width: 90%;
  }

  /* Menu column collapses to the hamburger; keep it beside the CTA */
  .et-l--header .cc-header .et_pb_column:nth-child(2) {
    flex: 0 0 auto;
    order: 3;
  }
  .et-l--header .cc-header .et_pb_column:nth-child(3) {
    flex: 1 1 auto;
    order: 2;
    padding-right: 16px !important;
  }

  .et-l--header .cc-menu .et_pb_menu__menu {
    display: none;
  }

  .et-l--header .cc-menu .et_mobile_nav_menu {
    display: block;
    margin: 0;
  }

  .et-l--header .cc-menu .mobile_menu_bar:before {
    color: var(--cc-green);
    font-size: 30px;
  }

  .et-l--header .cc-menu .et_mobile_menu {
    padding: 8px;
    border-top: 0;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(22, 40, 31, 0.14);
  }

  .et-l--header .cc-menu .et_mobile_menu li a {
    padding: 12px 18px;
    border-bottom: 0;
    border-radius: 12px;
    color: var(--cc-ink);
    font-size: 16px; /* mobile drawer, not the rail — 14px is too small here */
    font-weight: 500;
  }

  .et-l--header .cc-menu .et_mobile_menu li.current-menu-item > a {
    background-color: var(--cc-green);
    color: #ffffff;
  }

  .et-l--header .cc-logo img,
  .et-l--header .cc-logo svg {
    height: 36px;
  }
}

@media (max-width: 560px) {
  body #page-container .et-l--header a.et_pb_button.cc-cta,
  body #page-container .et-l--header a.et_pb_button.cc-cta:hover {
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .et-l--header .cc-menu .et-menu > li > a,
  body #page-container .et-l--header a.et_pb_button.cc-cta {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   10. Nav click transition
   Paired with js/nav-transition.js. The transition itself is already
   declared on the pill in section 4; these rules only supply the states.
   -------------------------------------------------------------------------- */

/* Outgoing — the current page's pill fades back into the rail */
.et-l--header .cc-menu.cc-nav-leaving .et-menu > li.current-menu-item > a,
.et-l--header .cc-menu.cc-nav-leaving .et-menu > li.current_page_item > a {
  background-color: transparent;
  color: var(--cc-ink);
}

/* Incoming — the clicked pill fills in. Declared last so it beats both the
   :hover rule and the outgoing rule at equal specificity; the cursor is
   sitting on this pill during the whole transition. */
.et-l--header .cc-menu .et-menu > li.cc-nav-target > a,
.et-l--header .cc-menu.cc-nav-leaving .et-menu > li.cc-nav-target > a {
  background-color: var(--cc-green);
  color: #ffffff;
}