/* Override hero heading font size for draft homepage */
.elementor-element-ywhhybi h1.elementor-heading-title {
	  font-size: clamp(32px, 3.5vw, 56px) !important;
}
}

/* Make How We Work Together boxes more visible */
.smedia-step {
	    background: rgba(6,140,151,0.08) !important;
	    border-right: 1px solid rgba(6,140,151,0.35) !important;
	    border-bottom: 1px solid rgba(6,140,151,0.35) !important;
}
}

/* ===== SOJOURN MEDIA - DARK HEADER STYLING ===== */
/* Applied to pages 1-HOME, 2-ABOUT US, 3-OUR SERVICES, 4-OUR WORK */

/* Dark header background */
#masthead,
.site-header,
.ast-header-break-point .site-header {
  background-color: #0d1117 !important;
}

/* Header row background */
.ast-primary-header-bar,
.main-header-bar {
  background-color: #0d1117 !important;
}

/* White nav links */
.main-header-bar .main-header-menu .menu-item > a,
.main-header-bar .main-navigation .menu-item > a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.main-header-bar .main-header-menu .menu-item > a:hover,
.main-header-bar .main-navigation .menu-item > a:hover {
  color: #00bfcf !important;
}

/* "START A PROJECT" button - already styled via Customizer */
/* Additional styling for button in header */
.ast-header-custom-item .ast-custom-button-link .ast-custom-button {
  background-color: #00bfcf !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.ast-header-custom-item .ast-custom-button-link .ast-custom-button:hover {
  background-color: #009aaa !important;
}
/* ===== END DARK HEADER STYLING ===== */


/* ===== SOJOURN MEDIA - HEADER ENHANCEMENTS ===== */

/* Box the header inner content to max-width */
.main-header-bar .ast-container,
#masthead .ast-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Teal accent border at bottom of header */
#masthead,
.site-header {
  border-bottom: 3px solid #00bfcf !important;
  box-shadow: 0 2px 12px rgba(0, 191, 207, 0.15);
}
/* ================================================ */

/* ---------------------------------------------------------------
   Sojourn Media - accessibility: reduced motion (added 2026-09-22)
   Elementor entrance animations ship content with visibility:hidden
   (.elementor-invisible) until its scroll JS reveals it. Visitors who ask
   their OS for reduced motion now get the content straight away instead
   of depending on the animation running.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .elementor-invisible{visibility:visible !important;animation:none !important;}
  .animated{animation:none !important;}
}


/* ---------------------------------------------------------------
   Sojourn Media - mobile form tap targets (added 2026-09-22)
   Fluent Forms renders its 15 project-type checkboxes at 13x13px inside an
   18px label row, which is cramped on a phone. This gives each choice a 44px
   row and a 20px box on phones and tablets. Desktop above 1024px is unchanged, and the
   form's fields, validation and notification settings are untouched.
   --------------------------------------------------------------- */
@media (max-width:1024px){
  .fluentform .ff-el-form-check-label{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;line-height:1.45;}
  .fluentform .ff-el-form-check-input{width:20px;height:20px;margin-top:1px;flex:0 0 auto;}
}

/* ---------------------------------------------------------------
   Sojourn Media - compact desktop header 922-1199px (added 2026-09-24)
   With six menu items plus the Start a Project button, the desktop header
   wrapped and squeezed the button between 922 and 1199px. This block only
   applies in that range: tighter menu spacing/type, a slightly smaller logo
   and button, and a content-sized grid so the menu gets the free space.
   The last rule hands control to Astra's own mobile header whenever Astra's
   script is already in mobile mode (clientWidth <= 921, e.g. 922-936px
   windows with a classic scrollbar), so its toggle and submenus work.
   Remove this whole block to roll back.
   --------------------------------------------------------------- */
@media (min-width:922px) and (max-width:1199.98px){
  #masthead .ast-container{padding-left:16px !important;padding-right:16px !important;}
  #ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row.ast-grid-center-col-layout{grid-template-columns:auto 1fr auto;column-gap:12px;}
  #masthead #ast-hf-menu-1 > .menu-item > .menu-link{padding-left:7px !important;padding-right:7px !important;font-size:12px !important;letter-spacing:.5px !important;}
  #masthead #ast-desktop-header .custom-logo{max-width:120px !important;height:auto !important;}
  #masthead #ast-desktop-header .ast-custom-button{padding:9px 12px !important;font-size:12px !important;}
}
@media (min-width:922px) and (max-width:1023.98px){
  #masthead #ast-hf-menu-1 > .menu-item > .menu-link{padding-left:5px !important;padding-right:5px !important;font-size:11.5px !important;letter-spacing:.3px !important;}
  #masthead #ast-desktop-header .custom-logo{max-width:104px !important;}
}
@media (min-width:922px){
  body.ast-header-break-point #ast-desktop-header{display:none !important;}
  body.ast-header-break-point #ast-mobile-header{display:block !important;}
}
/* ---------------- end compact desktop header block ---------------- */

/* ---------------------------------------------------------------
   Sojourn Media - header keyboard focus (added 2026-09-25)
   Shows a clear outline only for keyboard focus (:focus-visible),
   so mouse and touch look unchanged. White on the dark header bars
   and the black dropdown; charcoal inside the white mobile menu.
   Remove this whole block to roll back.
   --------------------------------------------------------------- */
#ast-desktop-header .custom-logo-link:focus-visible,
#ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link:focus-visible,
#ast-desktop-header .dropdown-menu-toggle:focus-visible,
#ast-desktop-header .ast-custom-button-link:focus-visible .ast-custom-button,
#ast-mobile-header .custom-logo-link:focus-visible,
#ast-mobile-header .menu-toggle:focus-visible{outline:2px solid #FFFFFF !important;outline-offset:3px !important;}
#ast-desktop-header #ast-hf-menu-1 .sub-menu .menu-link:focus-visible{outline:2px solid #FFFFFF !important;outline-offset:-4px !important;}
#ast-mobile-header #ast-hf-mobile-menu .menu-link:focus-visible,
#ast-mobile-header #ast-hf-mobile-menu .ast-menu-toggle:focus-visible{outline:2px solid #0A1117 !important;outline-offset:-3px !important;}
/* ---------------- end header keyboard focus block ---------------- */


/* Session 20 (Sep 25, 2026): unified Sojourn footer on blog, posts, archives and 404 (Astra footer widget area 2). Remove this block to roll back. */
#colophon .site-primary-footer-wrap { background-color: #080c10; border-top: 0; }
#colophon .site-primary-footer-wrap .ast-builder-footer-grid-columns { padding-left: 10px; padding-right: 10px; }
#colophon .site-primary-footer-wrap .footer-widget-area .widget { margin: 0; }