/*
Theme Name: One10 Child
Theme URI: https://one10counseling.com
Description: Child theme for One10 Men's Counseling. Rebuilds the navigation bar, makes the hero type scale fluidly on small screens, replaces the leftover Astra demo logo, and sets readable article typography. Built on Astra.
Author: Market Minds Global
Author URI: https://marketmindsglobal.com
Template: astra
Version: 1.0.0
Text Domain: one10-child
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root{
  --one10-teal:#1A6C7A;
  --one10-terra:#D45C38;
  --one10-navy:#153243;
  --one10-ink:#3A3A3A;
  --one10-wash:#F3F9FB;
}

/* ==========================================================================
   1. SMALL-SCREEN TYPE
   The hero runs 29px uppercase with 6.4px letter-spacing on phones, which is
   very tight on a 360-390px screen. These rules make it scale smoothly with
   the viewport instead of jumping at Elementor's breakpoints.

   Note: no overflow-x:hidden on html/body here. It is a blunt fix that also
   breaks position:sticky, which the header below relies on.
   ========================================================================== */

.hfe-infocard-title,
.elementor-heading-title,
h1,h2,h3{
  overflow-wrap:break-word;
  word-break:normal;
  max-width:100%;
}

/* Fluid hero title: scales with the screen instead of jumping at breakpoints. */
.elementor-30 .elementor-element.elementor-element-280a15b .hfe-infocard-title{
  font-size:clamp(26px,7.2vw,48px);
  letter-spacing:clamp(1px,0.9vw,7px);
  line-height:1.16;
}
.elementor-30 .elementor-element.elementor-element-e3cf46e .elementor-heading-title{
  font-size:clamp(13px,3.4vw,24px);
  letter-spacing:.14em;
}
/* Phone. These selectors deliberately mirror Elementor's own specificity and
   its 767px breakpoint, so they win on source order rather than !important.
   The letter-spacing, not the font-size, was what pushed the line past the
   viewport: 6.4px across a 14-character word adds ~90px on its own. */
@media (max-width:767px){
  .elementor-30 .elementor-element.elementor-element-280a15b .hfe-infocard-title{
    font-size:clamp(21px,6vw,30px);
    letter-spacing:.02em;
    line-height:1.18;
  }
  .elementor-30 .elementor-element.elementor-element-e3cf46e .elementor-heading-title{
    font-size:13px;
    letter-spacing:.12em;
  }
  .elementor-30 .elementor-element.elementor-element-93a966b{
    --padding-left:18px;
    --padding-right:18px;
  }
  /* Nothing in the hero may exceed the screen, whatever Elementor sets. */
  .elementor-30 .elementor-element.elementor-element-93a966b *{max-width:100%;}
}

/* ==========================================================================
   2. NAVIGATION BAR
   ========================================================================== */
.ast-primary-header-bar,
.main-header-bar{
  padding-top:6px;
  padding-bottom:6px;
  transition:background-color .25s ease, box-shadow .25s ease;
}

/* Keep the bar on screen as you scroll. */
#ast-desktop-header .ast-main-header-wrap{
  position:sticky; top:0; z-index:99;
  backdrop-filter:saturate(140%) blur(7px);
  -webkit-backdrop-filter:saturate(140%) blur(7px);
  background-color:rgba(21,50,67,.30);
}

/* Menu items: room to breathe, no wrapping onto a second line. */
.main-header-menu > .menu-item > .menu-link{
  padding-left:14px;
  padding-right:14px;
  white-space:nowrap;
  font-size:15px;
  letter-spacing:.012em;
  position:relative;
}
.main-header-menu{flex-wrap:nowrap;}

/* Underline that grows from the left on hover and stays on the current page. */
.main-header-menu > .menu-item > .menu-link::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s ease;
}
.main-header-menu > .menu-item > .menu-link:hover::after,
.main-header-menu > .menu-item > .menu-link:focus-visible::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current_page_item > .menu-link::after{transform:scaleX(1);}

/* Visible keyboard focus. Astra ships almost none. */
.main-header-menu a:focus-visible,
.ast-builder-button-wrap a:focus-visible,
.site-logo-img a:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:2px;
}

/* Logo sizing so it stops crowding the menu. */
.site-logo-img .custom-logo{height:46px;width:auto;}
@media (max-width:921px){ .site-logo-img .custom-logo{height:38px;} }

/* ==========================================================================
   3. THE SCHEDULE NOW BUTTON  (its label was wrapping inside the box)
   ========================================================================== */
.ast-builder-button-wrap .ast-custom-button{
  white-space:nowrap;
  padding:12px 22px;
  border-radius:6px;
  font-size:14px;
  letter-spacing:.09em;
  line-height:1.1;
  background-color:var(--one10-terra);
  transition:filter .18s ease, transform .18s ease;
}
.ast-builder-button-wrap .ast-custom-button:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* ==========================================================================
   4. MOBILE MENU
   ========================================================================== */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle{
  color:#fff !important;
  background:rgba(0,0,0,.28) !important;
  border-radius:6px;
  padding:8px 10px;
}
@media (max-width:921px){
  .ast-mobile-header-wrap .ast-primary-header-bar{padding:8px 0;}
  .main-navigation .main-header-menu .menu-link{
    padding:14px 20px;
    font-size:16px;
    white-space:normal;
  }
  .ast-builder-button-wrap .ast-custom-button{width:auto;display:inline-block;}
}

/* ==========================================================================
   5. ARTICLES  (the blog just went live and was running on defaults)
   ========================================================================== */
.single-post .entry-content{
  font-size:18px;
  line-height:1.75;
  color:var(--one10-ink);
}
.single-post .entry-content > p{margin-bottom:1.35em;}
.single-post .entry-content h2{
  font-size:26px;
  line-height:1.28;
  margin:2.1em 0 .6em;
  color:var(--one10-navy);
}
.single-post .entry-content a{
  color:var(--one10-teal);
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.single-post .entry-content strong{color:var(--one10-navy);}
/* Keep body copy at a readable measure instead of full-bleed. */
.single-post .ast-container .entry-content{max-width:68ch;margin-inline:auto;}

.blog .ast-article-post,
.archive .ast-article-post{
  border:1px solid #E1EBEF;
  border-radius:10px;
  padding:22px 24px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.blog .ast-article-post:hover,
.archive .ast-article-post:hover{
  box-shadow:0 12px 30px -16px rgba(19,43,55,.35);
  transform:translateY(-2px);
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer .widget_media_image img{max-width:170px;height:auto;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .main-header-menu > .menu-item > .menu-link::after{transition:none;}
}