/* =========================================================================
   HARD RESET — kills any browser/Astra/WordPress margin or container width
   that would otherwise show as left/right page gaps. Loaded as the very
   first override so the rest of the file builds on a clean baseline.
   ========================================================================= */
html { margin: 0 !important; padding: 0 !important; }
body.is-eduway { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }

/* Astra (and most WP themes) wrap content in #page > .site > .ast-container.
   If any of these are rendered by a plugin or filter we still neutralize
   them so Signal patterns can go edge-to-edge. */
body.is-eduway #page,
body.is-eduway .site,
body.is-eduway .site-content,
body.is-eduway .ast-container,
body.is-eduway .ast-container-fluid,
body.is-eduway .ast-row,
body.is-eduway [class^="ast-col-"],
body.is-eduway [class*=" ast-col-"] {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

/* Nav buttons (lang chip, hamburger, CTA) must not inherit Astra's button
   base styles (which add 0.6em padding + font sizing + uppercase, etc.). */
body.is-eduway .eduway-nav button,
body.is-eduway .eduway-drawer button,
body.is-eduway .modal button {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* =========================================================================
   ASTRA OVERRIDES — scoped to body.is-eduway so we don't break the WP admin
   theme or unrelated Astra surfaces.

   Rationale: Astra wraps content in `.ast-container` with default left/right
   padding and centers an inner column. The Signal patterns are full-bleed
   (edge-to-edge backgrounds, hero ribbons, dark sections). We need to:
     1. Kill the container max-width so backgrounds stretch
     2. Kill the body / wrapper padding that gives "page margin" gaps
     3. Hide Astra's title bar / breadcrumbs / page header (we render our own)
     4. Force our own `.eduway-container` to be the inner column
   ========================================================================= */

/* 1. Full-bleed body */
body.is-eduway,
body.is-eduway #page,
body.is-eduway .site,
body.is-eduway .site-content,
body.is-eduway #primary,
body.is-eduway #content,
body.is-eduway .ast-container,
body.is-eduway .entry-content,
body.is-eduway article,
body.is-eduway .post,
body.is-eduway .hentry {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: transparent;
}

/* The post/page wrapper inside Astra also adds padding */
body.is-eduway .entry-content,
body.is-eduway .entry-header,
body.is-eduway .entry-meta,
body.is-eduway .entry-summary,
body.is-eduway .post-thumb-img-content { padding: 0 !important; margin: 0 !important; }

/* Articles archive cards: WP renders <article class="post">, conflicts with
   the Signal `.post` card. Reset Astra's article styling inside our grid. */
body.is-eduway .articles-grid article,
body.is-eduway .article-related__grid article { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* 2. Kill Astra's title bar / single-page banner — our templates render headers */
body.is-eduway .ast-single-post-banner,
body.is-eduway .ast-archive-description,
body.is-eduway .entry-header,
body.is-eduway .post-thumb-img-content,
body.is-eduway header.entry-header,
body.is-eduway .ast-blog-single-element { display: none !important; }

/* 3. Sidebar off across the board */
body.is-eduway #secondary,
body.is-eduway .widget-area { display: none !important; }
body.is-eduway #primary { width: 100% !important; float: none !important; }

/* 4. Astra adds a top spacer; our nav handles that. Remove the WP admin bar push too. */
body.is-eduway.admin-bar { padding-top: 0; }
body.is-eduway #page { padding-top: 0 !important; margin-top: 0 !important; }

/* 5. Reset Astra heading colors — Signal sets its own. */
body.is-eduway h1, body.is-eduway h2, body.is-eduway h3,
body.is-eduway h4, body.is-eduway h5, body.is-eduway h6 { color: inherit; }

/* 6. Reset paragraph spacing so signal body styles win */
body.is-eduway p { margin: 0; }

/* 7. Block editor wrapper inside the_content() */
body.is-eduway .wp-block-group,
body.is-eduway .wp-block-columns { max-width: none; }

/* 8. Box-sizing reset (Astra sometimes overrides) */
body.is-eduway *, body.is-eduway *::before, body.is-eduway *::after { box-sizing: border-box; }

/* 9. Body background — paper, never inherit */
body.is-eduway { background: var(--paper); color: var(--ink-900); margin: 0; }

/* 10. Modal & overlay z-indexes need to beat Astra's sticky header */
body.is-eduway .modal-overlay,
body.is-eduway .nav-drawer { z-index: 9999; }

/* 11. WPForms shortcode container — drop padding so our modal controls spacing */
body.is-eduway .modal__body .wpforms-container { margin: 0; padding: 0; }
body.is-eduway .modal__body .wpforms-form { padding: 0; }

/* 12. Hide Astra's "Posts navigation" / pagination defaults (we render our own if needed) */
body.is-eduway .ast-pagination,
body.is-eduway .navigation.pagination,
body.is-eduway nav.post-navigation { display: none; }

/* =========================================================================
   Native "Talk to us" form (used when no WPForms shortcode is configured)
   ========================================================================= */
.talk-form { display: grid; gap: 16px; margin-top: 24px; }
.talk-form__row { display: grid; gap: 6px; }
.talk-form__row label {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-400);
}
.talk-form__row input,
.talk-form__row textarea {
	font: inherit;
	font-size: 15px;
	color: var(--ink-900);
	background: var(--paper-0);
	border: 1px solid var(--mist);
	border-radius: var(--r-2);
	padding: 12px 14px;
	width: 100%;
	transition: border-color var(--t1), box-shadow var(--t1);
}
.talk-form__row input:focus,
.talk-form__row textarea:focus {
	outline: none;
	border-color: var(--fire-500);
	box-shadow: 0 0 0 3px var(--fire-100);
}
.talk-form__row textarea { resize: vertical; min-height: 96px; }
.talk-form__row--actions { margin-top: 4px; }
.talk-form__status {
	margin: 0; min-height: 1.2em;
	font-size: 14px;
	color: var(--ink-400);
}
.talk-form__status.is-ok  { color: var(--volt-600); }
.talk-form__status.is-err { color: var(--sunset); }

/* =========================================================================
   Video modal frame (responsive 16:9 box around the bundled product story)
   ========================================================================= */
.modal-video__frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-3);
	overflow: hidden;
	background: #000;
}
.modal-video__el { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Modal open helper — shared.js adds .is-open and removes the hidden attr. */
.modal.is-open { display: flex; }
html.modal-open, body.modal-open { overflow: hidden; }

/* Drawer open helper */
.eduway-drawer.is-open { transform: none; visibility: visible; opacity: 1; pointer-events: auto; }

/* =========================================================================
   v3.1.2 PUNCH-LIST — round 2 fixes against user feedback on the live site
   ========================================================================= */

/* (1) BRAND LOGO — signal.css starts .brand at opacity:0 / max-width:0 and
   only reveals when the nav has class .is-revealed. The landing JS toggles
   that on scroll. For non-landing pages we add .is-revealed in header.php;
   the rules below are belt-and-suspenders to guarantee the logo can never
   collapse to 0 width once revealed. */
body.is-eduway .eduway-nav.is-revealed .brand {
	opacity: 1 !important;
	max-width: 200px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	margin-right: 4px !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
}
body.is-eduway .eduway-nav .brand__logo { display: block; height: 22px; width: auto; }

/* (2) RESPONSIVE NAV — when the brand is always visible on non-landing
   pages, the pill gets tight at tablet widths. Hide About/Articles/EN-chip
   on tablet and below so brand + hamburger + Talk-to-us fit. The drawer
   still has all the links. */
@media (max-width: 1023px) {
	body.is-eduway-about .eduway-nav .pages,
	body.is-eduway-articles .eduway-nav .pages,
	body.is-eduway-single .eduway-nav .pages,
	body.is-eduway-legal .eduway-nav .pages,
	body.is-eduway-about .eduway-nav .lang,
	body.is-eduway-articles .eduway-nav .lang,
	body.is-eduway-single .eduway-nav .lang,
	body.is-eduway-legal .eduway-nav .lang { display: none; }
	body.is-eduway .eduway-nav .hamburger { display: inline-flex !important; }
}
@media (max-width: 767px) {
	/* On mobile the pill gets even tighter — also hide the inline Talk CTA;
	   the drawer button replaces it. */
	body.is-eduway .eduway-nav .cta { display: none !important; }
}

/* (3) FLOATING CTA vs FOOTER LINKEDIN — the landing JS adds .is-on-dark
   when the floating pill is over a dark section (footer included). Fade
   the floating CTA when it overlaps the footer so the social icons remain
   tappable and visible. */
body.is-eduway .floating-cta.is-on-dark {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

/* (4) HERO SPACING — push the ribbon stack down so the big "eduway"
   wordmark doesn't crowd the nav pill at the top. Matches the preview. */
body.is-eduway-home .eduway-section--hero,
body.is-eduway-home .ribbon-preview { padding-top: clamp(48px, 8vh, 96px) !important; }
body.is-eduway-home .ribbon-stack { margin-top: clamp(32px, 6vh, 80px); }

/* (5) — video re-encoded with audio; no CSS change needed. */

/* (6) MODAL — make sure the panel scrolls inside itself when content is
   taller than the viewport, and center the close X cleanly. */
body.is-eduway .modal__panel {
	max-height: 90vh !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
body.is-eduway .modal__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	padding: 0 !important;
}
body.is-eduway .modal__close:focus { outline: none; }
body.is-eduway .modal__close:focus-visible { box-shadow: 0 0 0 3px var(--fire-200); }

/* (7) PROBLEM SECTION — give the vertical divider real breathing room
   from the giant italic numerals, and force the closing line centered
   regardless of any inherited flex parent. */
@media (min-width: 768px) {
	body.is-eduway .eduway-section--problem .problem-stat {
		padding-left: 40px !important;
	}
	body.is-eduway .eduway-section--problem .problem-stat:first-child {
		padding-left: 0 !important;
	}
}
body.is-eduway .problem-close {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 720px;
}
body.is-eduway .problem-close .hl-italic {
	display: block !important;
	text-align: center !important;
}

/* (8) LIGHTBOX — show a subtle "loading" spinner ring while the new full-
   size image decodes; suppress the previous src so it doesn't flicker. */
body.is-eduway .modal--lightbox.is-loading::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 999px;
	border: 3px solid rgba(255,255,255,0.25);
	border-top-color: var(--fire-400);
	animation: eduway-spin 0.9s linear infinite;
	z-index: 1;
}
body.is-eduway .modal--lightbox.is-loading .modal__lightbox-img { opacity: 0; }
body.is-eduway .modal--lightbox .modal__lightbox-img {
	transition: opacity 200ms ease;
}
@keyframes eduway-spin { to { transform: rotate(360deg); } }

/* (9) — integrations icon: see eduwayCfg.iconUrl in functions.php and
   the conveyor in eduway-landing.js; CSS unchanged. */

/* =========================================================================
   TALK PAGE — hero + form layout (replaces the modal flow)
   Layout cribbed from About hero so the page rhymes visually with the
   rest of the site: left copy column, right image bleed.
   ========================================================================= */
.talk-hero {
	padding: 80px 0 64px;
	position: relative;
	overflow: hidden;
	min-height: 60vh;
	min-height: 60svh;
	display: flex;
	align-items: center;
}
@media (min-width: 768px) { .talk-hero { padding: 96px 0 72px; } }
@media (min-width: 1024px) { .talk-hero { padding: 128px 0 88px; min-height: 70vh; } }
.talk-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
}
.talk-hero__bg img {
	position: absolute;
	top: 50%;
	right: -10%;
	transform: translateY(-50%);
	width: 75%;
	max-width: 900px;
	height: auto;
	/* Plain image bleed — no rounded corners, no shadow, no container. */
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* =========================================================================
   v3.2.4 — Astra-link override on themed buttons + nav-page hover
   Astra's defaults set `a:hover { color: var(--ast-global-color-1) }` (a
   blueish color) at high specificity. That bleeds into our orange "Talk to
   us" pill (which is an <a class="btn btn-fire">) and the page links in the
   nav. We force the right colors back here.
   ========================================================================= */
body.is-eduway .eduway-nav .cta,
body.is-eduway .eduway-nav .cta:hover,
body.is-eduway .eduway-nav .cta:focus,
body.is-eduway .eduway-nav .cta:active,
body.is-eduway .eduway-nav .cta:visited,
body.is-eduway .eduway-drawer__cta .btn,
body.is-eduway .eduway-drawer__cta .btn:hover,
body.is-eduway .eduway-drawer__cta .btn:focus,
body.is-eduway .floating-cta .btn,
body.is-eduway .floating-cta .btn:hover,
body.is-eduway .btn.btn-fire,
body.is-eduway .btn.btn-fire:hover,
body.is-eduway .btn.btn-fire:focus,
body.is-eduway .btn.btn-fire:visited {
	color: #fff !important;
	text-decoration: none !important;
}
body.is-eduway .btn.btn-ghost,
body.is-eduway .btn.btn-ghost:hover,
body.is-eduway .btn.btn-ghost:focus { color: var(--ink-900) !important; text-decoration: none !important; }

/* Nav page links (About / Articles / lang chip) — keep them ink, not Astra blue. */
body.is-eduway .eduway-nav .pages a,
body.is-eduway .eduway-nav .links a,
body.is-eduway .eduway-nav .lang {
	color: var(--ink-700) !important;
	text-decoration: none !important;
}
body.is-eduway .eduway-nav .pages a:hover,
body.is-eduway .eduway-nav .links a:hover,
body.is-eduway .eduway-nav .lang:hover {
	color: var(--fire-600) !important;
}
@media (min-width: 900px) {
	.talk-hero__bg img { right: -2%; width: 55%; }
}
@media (min-width: 1200px) {
	.talk-hero__bg img { right: 4%; width: 50%; }
}
.talk-hero > .eduway-container { width: 100%; position: relative; z-index: 1; }
.talk-hero__content { max-width: 540px; }
@media (min-width: 900px) { .talk-hero__content { max-width: 480px; } }
.talk-hero__headline {
	font-size: var(--fs-h1);
	line-height: 1.04;
	letter-spacing: -0.028em;
	font-weight: 700;
	margin: 0 0 24px;
	text-wrap: balance;
	color: var(--ink-900);
}
.talk-hero__lede {
	font-size: var(--fs-lede);
	line-height: 1.55;
	color: var(--ink-400);
	max-width: 46ch;
}

/* Form section sits below the hero. White card centered, max ~640px wide. */
.talk-form-section { background: var(--paper-2); padding: 56px 0 96px; }
@media (min-width: 768px) { .talk-form-section { padding: 80px 0 120px; } }
.talk-form__wrap {
	max-width: 640px;
	margin: 0 auto;
	background: var(--paper-0);
	border: 1px solid var(--mist);
	border-radius: var(--r-4);
	padding: 32px 24px;
	box-shadow: 0 14px 40px -16px rgba(0,0,0,0.08);
}
@media (min-width: 640px) { .talk-form__wrap { padding: 40px 36px; } }
.talk-form__wrap .talk-form { margin-top: 0; }
.talk-form__direct {
	text-align: center;
	margin: 28px 0 0;
	color: var(--ink-300);
	font-size: 14px;
}
.talk-form__direct a { color: var(--fire-600); text-decoration: underline; text-underline-offset: 3px; }
.talk-form__direct a:hover { color: var(--fire-500); }

/* WPForms compatibility — when the admin enables a WPForms shortcode,
   tone WPForms' default chrome to match Signal so it doesn't look pasted-in. */
.talk-form__wrap .wpforms-container .wpforms-field-label,
.talk-form__wrap .wpforms-container label.wpforms-field-label {
	font-family: var(--mono);
	font-size: 11px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-400) !important;
	margin-bottom: 6px;
}
.talk-form__wrap .wpforms-container input.wpforms-field-medium,
.talk-form__wrap .wpforms-container input[type="text"],
.talk-form__wrap .wpforms-container input[type="email"],
.talk-form__wrap .wpforms-container textarea {
	background: var(--paper-0) !important;
	border: 1px solid var(--mist) !important;
	border-radius: var(--r-2) !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	color: var(--ink-900) !important;
}
.talk-form__wrap .wpforms-container button[type="submit"] {
	background: var(--fire-500) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--r-pill) !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	cursor: pointer;
}
.talk-form__wrap .wpforms-container button[type="submit"]:hover {
	background: var(--fire-600) !important;
}

/* Keep the brand visible at all times on the home page, in EVERY state:
   - non-mobile: signal.css's default opacity:0 + max-width:0 (we override)
   - mobile (<768): signal.css adds `display:none` on `:not(.is-revealed)`
     when the hero is in view (we override display too)
   - any scroll position (is-revealed on/off): brand stays visible
   All properties are !important so no late signal.css rule can re-hide it. */
body.is-eduway-home .eduway-nav .brand,
body.is-eduway-home .eduway-nav:not(.is-revealed) .brand {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto !important;
    max-width: 200px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-right: 4px !important;
    display: inline-flex !important;
}

/* Force-hide the hamburger on the home page at desktop. signal.css has
   a later "hard-hide" rule with !important, but if a stale cached
   signal.css is loaded (Hostinger caches for 7 days), that rule may be
   missing and an earlier non-!important rule re-shows the hamburger.
   Putting the hide here in overrides.css (which we edit fresh every
   round) guarantees the hamburger stays hidden regardless. On the
   home page at desktop the section links, About/Articles, and lang
   chip are inline — the hamburger drawer is redundant. */
@media (min-width: 768px) {
    body.is-eduway-home .eduway-nav .hamburger { display: none !important; }
}

/* Home-page responsive nav:
   - >= 1024px: full nav (logo + 5 section links + sep + About + Articles
     + AR). Hamburger hidden. CTA absent (rendered conditionally in
     header.php to keep the pill from overflowing at narrow viewports).
   - 768-1023px: section links + separator collapse into the hamburger
     drawer. Pill carries logo + About + Articles + AR + hamburger. The
     drawer still has the section links inside so they're reachable.
   - < 768px: the theme's own rule in signal.css hides About + Articles
     + AR too, leaving just logo + hamburger. No change needed there. */
@media (min-width: 1024px) {
    body.is-eduway-home .eduway-nav .hamburger { display: none !important; }
}
@media (max-width: 1023.98px) {
    body.is-eduway-home .eduway-nav .links,
    body.is-eduway-home .eduway-nav .nav-sep      { display: none !important; }
    body.is-eduway-home .eduway-nav .hamburger    { display: inline-flex !important; }
}

/* Remove the pill's max-width cap. signal.css sets max-width:
   calc(100vw - 24px), which constrains the pill to viewport-minus-24px
   and lets items overflow visually past its right edge (the "AR leak"
   you've been seeing). With max-width:none the pill grows to its exact
   natural content width — items can't be wider than their container,
   so nothing leaks. At viewports narrower than the natural width, the
   @media rules above collapse items into the hamburger, so the pill
   stays comfortably inside the viewport regardless. */
.eduway-nav { max-width: none !important; }