/**
Theme Name: Sweet Aloha Ice Cream
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra child theme for Sweet Aloha Ice Cream — aloha design system (mango #FEAC00, plum #A33EA4, cream #FFF7E8), premium light header/nav, Double Porter display type.
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sweet-aloha-ice-cream
Template: astra
*/

/* =========================================================
   T1 DESIGN SYSTEM — Sweet Aloha aloha palette
   mango #FEAC00 · plum #A33EA4 · cream #FFF7E8 · ink #3B3B3B
   ========================================================= */

/* --- Display font: Double Porter (self-hosted via Elementor upload) --- */
@font-face {
  font-family: 'Double Porter';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('/wp-content/uploads/2026/08/Double-Porter-1.woff') format('woff');
}

/* --- Brand tokens --- */
:root {
  --sa-mango: #FEAC00;
  --sa-plum: #A33EA4;
  --sa-cream: #FFF7E8;
  --sa-ink: #3B3B3B;
  --sa-pink: #FD5AAD;
  --sa-shadow: 0 6px 24px rgba(163, 62, 164, 0.10);
}

/* =========================================================
   HEADER — premium light bar, cream underline accent
   ========================================================= */

/* Header bar: white, soft shadow, rounded brand feel */
#ast-desktop-header .main-header-bar,
#masthead .main-header-bar {
  box-shadow: 0 1px 0 rgba(59, 59, 59, 0.06), 0 6px 20px rgba(59, 59, 59, 0.05);
}

/* Menu links: ink by default, plum on hover with mango underline sweep */
.main-header-menu .menu-link {
  transition: color .18s ease;
}
.main-header-menu > .menu-item > .menu-link {
  position: relative;
}
.main-header-menu > .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--sa-mango);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after {
  width: calc(100% - 40px);
}

/* Dropdown panels: white card, soft shadow, rounded, plum hover */
.main-header-menu .sub-menu {
  border-radius: 14px;
  box-shadow: var(--sa-shadow);
  border: 1px solid rgba(163, 62, 164, 0.08);
  padding: 8px 0;
}
.main-header-menu .sub-menu .menu-link {
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
  border-radius: 8px;
}
.main-header-menu .sub-menu .menu-link:hover {
  background: var(--sa-cream);
  color: var(--sa-plum) !important;
}

/* Submenu top accent */
.ast-dropdown-active .main-header-menu .sub-menu,
.main-header-menu .sub-menu {
  border-top: 3px solid var(--sa-mango);
}

/* Header CTA button — mango pill, plum hover, gentle lift */
.ast-header-button-1 .ast-custom-button {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 4px 14px rgba(254, 172, 0, 0.35);
  white-space: nowrap;
}

/* Desktop header row: keep menu on ONE line + button full label.
   Row is tight at 1440px (logo + 8 top items + CTA), so stop the
   flex-shrink squeeze that stacked the button text vertically. */
.ast-builder-menu-1 .main-header-menu { flex-wrap: nowrap; }
.ast-builder-menu-1 .main-header-menu > .menu-item { flex-shrink: 0; }
.ast-builder-menu-1 .main-header-menu .menu-link { white-space: nowrap; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
  padding-left: .5em;
  padding-right: .5em;
}
.ast-header-button-1 { flex-shrink: 0; }
/* Wide-header container so logo + menu + CTA fit at 1440 without clipping */
#ast-desktop-header .main-header-bar .ast-container { max-width: 1320px; }
.ast-header-button-1 .ast-custom-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(163, 62, 164, 0.30);
}

/* Below-header strip: soft cream ribbon */
.ast-below-header-wrap .ast-below-header {
  background: var(--sa-cream);
}

/* Hide the stray duplicate plain link Astra prints after the custom button */
.ast-header-button-1 .ast-builder-button-wrap a.menu-link {
  display: none;
}

/* WCAG: white-on-mango fails contrast — use ink text; hover inverts to plum bg/white */
.ast-header-button-1 .ast-custom-button { color: #3b3b3b !important; }
.ast-header-button-1 .ast-custom-button:hover { color: #ffffff !important; }

/* =========================================================
   MOBILE — off-canvas drawer: white, brand accents
   ========================================================= */
#ast-mobile-popup .ast-mobile-popup-inner {
  border-left: 4px solid var(--sa-mango);
}
.ast-mobile-popup-content .main-header-menu .menu-link {
  font-weight: 600;
}
.ast-mobile-popup-content .sub-menu {
  border-left: 2px solid var(--sa-cream);
  margin-left: 10px;
}
.ast-mobile-popup-toggle .ast-icon,
.main-header-menu-toggle .menu-toggle-icon {
  color: var(--sa-plum);
}

/* =========================================================
   BREADCRUMBS — quiet, brand-tinted
   ========================================================= */
.ast-breadcrumbs .ast-breadcrumbs-inner {
  font-size: 13px;
  color: #8a8a8a;
}
.ast-breadcrumbs a {
  color: var(--sa-plum);
  transition: color .15s ease;
}
.ast-breadcrumbs a:hover {
  color: var(--sa-mango);
}
.ast-breadcrumbs .trail-item-separator {
  color: #c9c9c9;
}

/* =========================================================
   HERO HEADLINE — fix mid-word wrap ("Experien/ce")
   Display type scales fluidly; never break words; tight tracking.
   ========================================================= */
/* The two hero display lines (Experience / Aloha) use Double Porter 140px.
   Scale with viewport width and clamp so the word always fits its column. */
.elementor-widget-heading .elementor-heading-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* Fluid display sizing for the hero family (Double Porter headings):
   140px at 1400px+ down to ~11vw on phones, 56px floor. */
h1.elementor-heading-title,
h2.elementor-heading-title {
  word-wrap: normal;
}
.elementor-element-216e894 .elementor-heading-title,
.elementor-element-1ab0b90 .elementor-heading-title {
  font-size: clamp(3.25rem, 9.2vw, 8.75rem) !important;
  line-height: 0.94 !important;
}
@media (max-width: 1024px) {
  .elementor-element-216e894 .elementor-heading-title,
  .elementor-element-1ab0b90 .elementor-heading-title {
    font-size: clamp(2.75rem, 10vw, 5.5rem) !important;
  }
}

/* Optic: script swashes overhang their box on mobile — nudge display lines right
   so the INK aligns optically with the eyebrow/body text. */
@media (max-width: 544px) {
  .elementor-element-216e894 .elementor-heading-title,
  .elementor-element-1ab0b90 .elementor-heading-title {
    padding-left: 0.35em;
  }
}

/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */
/* Decorative bleeds (hero image, wave SVG) must not create horizontal scroll */
body { overflow-x: clip; }
.main-header-menu .menu-link:focus-visible,
.ast-custom-button:focus-visible,
.ast-breadcrumbs a:focus-visible {
  outline: 3px solid var(--sa-pink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduced motion: disable sweep + lift */
@media (prefers-reduced-motion: reduce) {
  .main-header-menu > .menu-item > .menu-link::after,
  .ast-header-button-1 .ast-custom-button {
    transition: none;
  }
}