@charset "UTF-8";
/* ============================================================================
   NHÀ THÉP TIỀN CHẾ BÌNH DƯƠNG — DESIGN SYSTEM FOUNDATION
   Phase 3A · v1.0.0 · https://nhatheptienchebinhduong.com/

   SCOPE (Phase 3A only)
     1. Design tokens (single source of truth)
     2. Typography system (one family, fluid scale, Vietnamese-safe)
     3. Industrial colour system; the legacy violet tokens are retired
     4. Layout / container system
     5. Section rhythm
     6. Canonical button system
     7. Canonical card system
     8. Image / media system
     9. Header + footer compatibility layer (type, states, spacing only)
    10. Accessibility baseline (focus, contrast, reduced motion)
    11. Motion / visibility safety (root fix for the AOS opacity:0 defect)
    12. Responsive foundation

   DELIBERATELY NOT IN THIS FILE
     * the homepage layout (Batch 3B): no Elementor structure, section order,
       column layout or authored per-widget size is changed here;
     * the header/footer structure;
     * Elementor upgrades or page-builder architecture changes.

   CASCADE NOTE
     Enqueued last (priority 999) so it prints after style.min.css (theme),
     Elementor frontend CSS, Elementor post CSS and Elementor inline CSS.
     Where a rule would otherwise be order-dependent, specificity was raised
     instead (documented inline) so the system also holds if print order moves.

   `!important` POLICY — used in only four documented places, each of which must
     beat a declaration that cannot be matched or ordered otherwise:
       (a) Elementor per-widget button declarations (specificity 0-4-0) — §6
       (b) print / reduced-motion content guarantee                      — §11
       (c) the .ntc-visually-hidden utility                              — §10
       (d) hiding chrome (header, chat widgets, admin bar) in print      — §13
   ========================================================================= */

/* ==========================================================================
   0. PRIMARY TYPE FACE
   --------------------------------------------------------------------------
   Manrope (variable, weight axis 200–800) is the single primary family.

   Why not DM Sans, which the site's Font Library lists as "6 of 6 active"?
   Because the theme ships a REDUCED DM Sans: parsing the real `cmap` table of
   hostinger-ai-theme/assets/fonts/DMSans-{Regular,Medium,Bold}.ttf shows
   coverage of only 17 of 29 Vietnamese characters — `ơ`, `ư`, `ả`, `ạ`, `ế`,
   `ệ`, `ộ`, `ợ`, `ự` and `₫` are absent, so every Vietnamese word containing
   them (nhà xưởng, bảo trì, sửa chữa, chi phí…) would silently fall back to
   another font and render in a mixed typeface. Evidence:
   `node tools/design-system/check-font-glyphs.mjs` (MISSING list per face).

   Manrope was verified with the same parser: 29/29 Vietnamese characters,
   weight axis 200–800 in one file, already self-hosted by the theme
   (assets/fonts/Manrope-Variable.ttf, 163 KB), and it is one of the three
   families the Phase 3A brief nominates. No third-party font request is added.

   The theme declares its Manrope face without a weight range, which makes the
   browser treat the file as weight 400 only and synthesise every other weight.
   Re-declaring it here with the real axis fixes that; because this stylesheet
   loads last, this descriptor set wins over the theme's.

   Fallback chain: Manrope → system UI sans. A failure to load the file
   degrades to a system sans-serif, never to an invisible or missing glyph.
   ========================================================================= */
@font-face {
	font-family: Manrope;
	src:
		url("/wp-content/themes/hostinger-ai-theme/assets/fonts/Manrope-Variable.ttf") format("truetype-variations"),
		url("/wp-content/themes/hostinger-ai-theme/assets/fonts/Manrope-Variable.ttf") format("truetype");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
	/* --- 1.1 Typography ---------------------------------------------------
	   ONE primary family: Manrope. Self-hosted by the site (see §0). */
	--font-family-base: Manrope, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-family-mono: "IBM Plex Mono", Consolas, Menlo, Monaco, "Courier New", monospace;

	--font-size-body: clamp(16px, 0.28vw + 15px, 17.5px);
	--font-size-small: 14px;
	--font-size-caption: 13.5px;
	--font-size-button: 16px;
	--font-size-nav: 15.5px;

	--font-size-h1: clamp(34px, 2.6vw + 22.2px, 60px);
	--font-size-h2: clamp(28px, 1.6vw + 22px, 42px);
	--font-size-h3: clamp(22px, 0.9vw + 18.6px, 28px);
	--font-size-h4: clamp(19px, 0.45vw + 17.3px, 22px);
	--font-size-h5: 17.5px;
	--font-size-h6: 16px;

	--line-height-body: 1.65;
	--line-height-heading: 1.18;
	--line-height-tight: 1.1;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	--letter-spacing-eyebrow: 0.14em;
}

/* --- 1.2 Colour (industrial, restrained) --------------------------------
	   Three families only: deep navy / charcoal, neutral grey, ONE accent.
	   Violet (#3c06d9, #230f78) and the Elementor defaults (green/cyan) are
	   retired — the legacy-token mapping is in §3.
	   Contrast ratios below are computed per WCAG 2.1 against the stated
	   background. */
:root {
	--color-primary: #12314f;            /* deep navy — corporate base (14.6:1 on #fff) */
	--color-primary-dark: #0a1f33;       /* navy-charcoal — dark sections (17.4:1 on #fff) */
	--color-primary-light: #1e4c7a;      /* navy hover / raised surface (10.7:1 on #fff) */
	--color-steel: #5371b7;              /* controlled steel blue — existing brand tone, retained */
	--color-steel-dark: #42609e;         /* steel hover, white text = 5.8:1 */
	--color-accent: #c2410c;             /* industrial orange — CTA (5.2:1 on #fff) */
	--color-accent-dark: #9a3412;        /* accent hover */
	--color-accent-soft: #fdf1ea;        /* accent tint surface */

	--color-text: #1f2933;               /* body text (14.8:1 on #fff) */
	--color-text-muted: #5b6672;         /* secondary text (5.8:1 on #fff) */
	--color-text-inverse: #ffffff;
	--color-text-on-dark-muted: #c3cdd8; /* 7.2:1 on --color-primary-dark */

	--color-background: #ffffff;
	--color-surface: #f5f7f9;            /* light grey section surface */
	--color-surface-alt: #edeff2;        /* deeper light grey */
	--color-surface-dark: #12314f;       /* dark section surface */
	--color-border: #d8dee5;
	--color-border-strong: #b9c2cc;
	--color-border-dark: rgba(255, 255, 255, 0.22);

	--color-link: #1e4c7a;
	--color-link-hover: #c2410c;

	/* --- 1.3 Spacing & vertical rhythm ----------------------------------- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	--section-pad-sm: clamp(40px, 5vw, 56px);
	--section-pad-md: clamp(56px, 7vw, 88px);
	--section-pad-lg: clamp(72px, 8.5vw, 120px);

	--gap-grid: clamp(16px, 2.2vw, 32px);
	--gap-card: clamp(16px, 1.6vw, 24px);

	/* --- 1.4 Layout ------------------------------------------------------ */
	--container-max: 1240px;             /* brief: ≈1200–1280 px (was 1140 px) */
	--container-narrow: 760px;           /* readable measure (WP contentSize = 700 px) */
	--container-pad: clamp(16px, 4vw, 32px);

	/* --- 1.5 Radii, shadows, motion ------------------------------------- */
	--radius-sm: 4px;
	--radius-md: 6px;                    /* default — restrained, NOT pill shaped */
	--radius-lg: 10px;
	--radius-pill: 999px;                /* reserved for chips/tags only */

	--shadow-sm: 0 1px 2px rgba(10, 31, 51, 0.06);
	--shadow-md: 0 6px 18px rgba(10, 31, 51, 0.08);
	--shadow-lg: 0 14px 34px rgba(10, 31, 51, 0.12);

	--duration-fast: 160ms;
	--duration-base: 240ms;
	--duration-slow: 450ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- 1.6 Button system ----------------------------------------------- */
	--button-height: 48px;               /* ≥ 44 px tap target */
	--button-pad-x: 24px;
	--button-radius: var(--radius-md);
	--button-font-weight: var(--font-weight-bold);

	/* --- 1.7 Motion safety (see §11) ------------------------------------- */
	--aos-shift: 18px;

	/* --- 1.8 Breakpoint reference (documentation only — custom properties
	   cannot be used inside media queries; the values are repeated in §12) -- */
	--bp-xs: 375px;
	--bp-sm: 414px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1440px;
}

/* ==========================================================================
   2. TYPOGRAPHY SYSTEM
   ========================================================================= */

html {
	font-family: var(--font-family-base);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings. Elementor widgets and the block editor keep ownership of their
   authored per-element sizes (those are layout values and belong to Batch 3B);
   this section sets the *system* baseline only. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.elementor-heading-title {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: inherit;
}

h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p, li, dd, dt, figcaption, blockquote {
	font-size: inherit;
	line-height: var(--line-height-body);
}

small, .wp-block-footnotes { font-size: var(--font-size-small); }

/* The theme clamps several small elements to a 12 px floor through
   `--hostinger-ai-min-font-size`. 12 px is below the readable minimum for this
   audience, so the floor is raised here — no theme file is touched. */
:root { --hostinger-ai-min-font-size: 14px; }

strong, b { font-weight: var(--font-weight-bold); }

code, pre, kbd, samp { font-family: var(--font-family-mono); font-size: 0.9em; }

blockquote {
	margin: var(--space-lg) 0;
	padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
	border-left: 3px solid var(--color-accent);
	color: var(--color-text-muted);
}

/* Eyebrow / kicker label (the existing homepage uses 12 px uppercase). */
.ntc-eyebrow {
	margin: 0 0 var(--space-xs);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Readable measure for long copy. */
.ntc-measure { max-width: var(--container-narrow); }

/* Text links inside flow content. */
.ntc-link,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-out);
}
.ntc-link:hover,
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   3. ELEMENTOR GLOBAL-KIT TOKEN BRIDGE (legacy → industrial)
   --------------------------------------------------------------------------
   The kit (`.elementor-kit-5`) is the canonical token source for every
   Elementor widget. Phase 3A does NOT rewrite the kit's stored values (no
   database surgery); it re-declares the kit's custom properties here. That is
   sufficient because every consumer reads them through `var()`, and it
   centralises the mapping in ONE place — including for widgets that do not
   exist yet.

   Specificity `html body.elementor-kit-5` = 0-1-2 beats the kit's own
   `.elementor-kit-5` (0-1-0) independently of print order.

   MEASURED BEFORE THE CHANGE (live, anonymous): #6EC1E4, #61CE70, #7A7A7A and
   #54595F were registered in the kit but rendered on ZERO elements, so
   remapping them is visually inert. The only kit colour actually rendered on
   the homepage was #5371b7 (CTA button background + final CTA section), which
   is remapped to navy.
   ========================================================================= */
html body.elementor-kit-5 {
	font-family: var(--font-family-base);

	/* Elementor defaults — retired (they were unused in the rendered site) */
	--e-global-color-primary: var(--color-primary);
	--e-global-color-secondary: var(--color-primary-dark);
	--e-global-color-text: var(--color-text);
	--e-global-color-accent: var(--color-accent);

	/* Tokens created by the previous builder pass */
	--e-global-color-b5aeb33: #ffffff;                   /* white  (unchanged)   */
	--e-global-color-c58817e: var(--color-primary-dark); /* #172036 → navy-charcoal */
	--e-global-color-5420d44: var(--color-primary);      /* #5371b7 → navy (CTA) */
	--e-global-color-58be983: #ffffff;                   /* white  (unchanged)   */
	--e-global-color-09cc561: var(--color-primary-dark); /* #0d141a → navy-charcoal */
	--e-global-color-a495fd4: var(--color-text-muted);   /* #707375 → muted grey */
	--e-global-color-d5ac99a: #c3cdd8;                   /* #b1bfde → neutral    */
	--e-global-color-8a9e7e1: var(--color-accent);       /* #3c06d9 → VIOLET REMOVED */
	--e-global-color-c4cbb8a: var(--color-primary-dark); /* #230f78 → VIOLET REMOVED */
	--e-global-color-b1c2d3e: var(--color-text);         /* #23282C → body text  */
	--e-global-color-e3ded6a: var(--color-surface-alt);  /* #ededee → light grey */
	--e-global-color-a7b8c9d: #ffffff;

	/* Typography tokens written by the builder ("Times New Roman" ×7). All
	   family tokens collapse onto the single system family. Sizes/weights of the
	   authored presets are preserved because they are layout values (Batch 3B). */
	--e-global-typography-primary-font-family: var(--font-family-base);
	--e-global-typography-primary-font-weight: var(--font-weight-bold);
	--e-global-typography-secondary-font-family: var(--font-family-base);
	--e-global-typography-text-font-family: var(--font-family-base);
	--e-global-typography-text-font-weight: var(--font-weight-regular);
	--e-global-typography-accent-font-family: var(--font-family-base);
	--e-global-typography-accent-font-weight: var(--font-weight-medium);
	--e-global-typography-5535e8e-font-family: var(--font-family-base);
	--e-global-typography-c83476d-font-family: var(--font-family-base);
	--e-global-typography-ff8f921-font-family: var(--font-family-base);
	--e-global-typography-887fca2-font-family: var(--font-family-base);
	--e-global-typography-2142591-font-family: var(--font-family-base);
	--e-global-typography-6e52843-font-family: var(--font-family-base);
	--e-global-typography-v2hfont-font-family: var(--font-family-base);
	--e-global-typography-v2bfont-font-family: var(--font-family-base);
	--e-global-typography-v2btnft-font-family: var(--font-family-base);
}

/* The kit's own base/heading declarations (0-1-1) are re-stated with the system
   family so that any Elementor widget without an authored size follows the
   design system. `Times New Roman` is therefore unreachable in rendered output. */
html body.elementor-kit-5 h1,
html body.elementor-kit-5 h2,
html body.elementor-kit-5 h3,
html body.elementor-kit-5 h4,
html body.elementor-kit-5 h5,
html body.elementor-kit-5 h6,
html body.elementor-kit-5 button,
html body.elementor-kit-5 input[type="button"],
html body.elementor-kit-5 input[type="submit"],
html body.elementor-kit-5 .elementor-button {
	font-family: var(--font-family-base);
}

/* The kit's global heading scale is replaced by the design-system scale for any
   Elementor heading that has no authored size (widgets with an explicit size
   keep it — Batch 3B owns those). */
html body.elementor-kit-5 h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: -0.02em; }
html body.elementor-kit-5 h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); letter-spacing: -0.01em; }
html body.elementor-kit-5 h3 { font-size: var(--font-size-h3); }
html body.elementor-kit-5 h4 { font-size: var(--font-size-h4); }

/* `img{border-radius:8px}` from the kit is superseded by the media system (§8). */
html body.elementor-kit-5 img { border-radius: var(--radius-md); }

/* ==========================================================================
   4. LAYOUT / CONTAINER SYSTEM
   --------------------------------------------------------------------------
   One container for the whole site. Elementor's own `--container-max-width`
   (1140 px, declared by the kit on `.e-con`) is bridged onto the design-system
   value so that Elementor containers, Elementor sections and the block layer
   all agree. `html body .e-con` (0-1-2) beats the kit's `.e-con` (0-1-0).
   ========================================================================= */
html body .e-con {
	--container-max-width: var(--container-max);
}

/* Elementor legacy sections */
html body .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--container-max);
}

/* Consistent horizontal gutters on Elementor boxes. Only the *padding* is
   normalised; the brief's "no random per-section widths" requirement is met by
   the single container token above. */
html body .e-con-boxed > .e-con-inner {
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

/* The block layer (all 14 foundation pages) keeps its readable 700 px measure
   from theme.json contentSize; the surrounding block group gets a consistent
   gutter so it lines up with the Elementor container edges. */
.ntc-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.ntc-container--narrow { max-width: var(--container-narrow); }
.ntc-container--full { max-width: none; }

/* ==========================================================================
   5. SECTION RHYTHM
   --------------------------------------------------------------------------
   Three sizes, one scale. Applied to the block/content layer here; the
   homepage's authored Elementor paddings (64/48/10 px, per-widget) are left to
   Batch 3B on purpose — forcing them now would be the homepage redesign this
   batch excludes.
   ========================================================================= */
.ntc-section { padding-block: var(--section-pad-md); }
.ntc-section--sm { padding-block: var(--section-pad-sm); }
.ntc-section--md { padding-block: var(--section-pad-md); }
.ntc-section--lg { padding-block: var(--section-pad-lg); }
.ntc-section--none { padding-block: 0; }

.ntc-section--surface { background-color: var(--color-surface); }
.ntc-section--surface-alt { background-color: var(--color-surface-alt); }
.ntc-section--dark {
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}
.ntc-section--dark :where(h1, h2, h3, h4, h5, h6, p, li) { color: inherit; }

/* Vertical flow rhythm for block content: a predictable, single source of
   vertical spacing between the blocks of the 14 foundation pages, replacing the
   browser/theme defaults. */
.wp-block-post-content > * + * { margin-block-start: var(--space-md); }
.wp-block-post-content > * + h2,
.wp-block-post-content > * + h3 {
	margin-block-start: var(--space-2xl);
	padding-block-start: 0;
}
.wp-block-post-content > * + h4 { margin-block-start: var(--space-xl); }
.wp-block-post-content > h2 + *,
.wp-block-post-content > h3 + * { margin-block-start: var(--space-sm); }
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	padding-inline-start: 1.35em;
}
.wp-block-post-content li + li { margin-block-start: var(--space-2xs); }
.wp-block-post-content li > ul,
.wp-block-post-content li > ol { margin-block-start: var(--space-2xs); }

/* ==========================================================================
   6. CANONICAL BUTTON SYSTEM
   --------------------------------------------------------------------------
   One geometry for every button on the site, five semantic variants, and a
   full state set (hover / focus-visible / active / disabled). Height 48 px
   satisfies the ≥44 px mobile tap-target requirement; the radius is restrained
   (6 px) rather than pill-shaped, matching the industrial positioning.

   Usage: class="ntc-btn ntc-btn--primary"
   ========================================================================= */
.ntc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: var(--button-height);
	padding: 13px var(--button-pad-x);
	border: 1px solid transparent;
	border-radius: var(--button-radius);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-base);
	font-size: var(--font-size-button);
	font-weight: var(--button-font-weight);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}
.ntc-btn:hover { background-color: var(--color-primary-light); color: var(--color-text-inverse); }
.ntc-btn:active { transform: translateY(1px); }

/* --- variants ------------------------------------------------------------ */

/* NHẬN BÁO GIÁ — strongest conversion action */
.ntc-btn--accent {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff; /* 5.2:1 */
}
.ntc-btn--accent:hover {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: #ffffff;
}

/* ĐĂNG KÝ KHẢO SÁT / XEM CHI TIẾT — secondary on light surfaces */
.ntc-btn--secondary {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary); /* 14.6:1 */
}
.ntc-btn--secondary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* GỌI KỸ SƯ — neutral / steel */
.ntc-btn--steel { background-color: var(--color-steel); border-color: var(--color-steel); color: #ffffff; }
.ntc-btn--steel:hover { background-color: var(--color-steel-dark); border-color: var(--color-steel-dark); color: #ffffff; }

/* Ghost — only for use on dark sections */
.ntc-btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
}
.ntc-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.12); border-color: #ffffff; color: #ffffff; }

/* Tertiary — inline text action with a chevron */
.ntc-btn--tertiary {
	min-height: 44px;
	padding: 8px 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--color-link);
	text-decoration: none;
}
.ntc-btn--tertiary:hover { background-color: transparent; color: var(--color-link-hover); text-decoration: underline; }

/* --- sizes & layout ------------------------------------------------------ */
.ntc-btn--sm { min-height: 44px; padding: 10px 18px; font-size: var(--font-size-small); }
.ntc-btn--block { display: flex; width: 100%; }
.ntc-btn__icon { display: inline-flex; flex: none; width: 1.1em; height: 1.1em; }

/* --- disabled ------------------------------------------------------------ */
.ntc-btn[aria-disabled="true"],
.ntc-btn:disabled {
	background-color: var(--color-surface-alt);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* --- 6.1 Builder integration ---------------------------------------------
   Existing Elementor and block buttons are brought onto the canonical
   geometry so the site has ONE button system without touching any page.

   `!important` (documented exception (a) in the file header) is required
   because Elementor writes per-widget button declarations such as

     .elementor-22 .elementor-element.elementor-element-hai00004 .elementor-button

   which have specificity 0-4-0. Matching that without !important needs
   artificial selector padding, which is harder to review and more fragile than
   one documented, cohesive override block. Colours are NOT forced here: they
   keep flowing from the design-system tokens (§3), so a per-widget colour
   still wins and no page-specific design is overwritten. */
.elementor-button,
.wp-elementor-button,
.wp-block-button__link,
.wp-element-button {
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5em !important;
	min-height: var(--button-height) !important;
	padding: 13px var(--button-pad-x) !important;
	border-radius: var(--button-radius) !important;
	border-width: 1px !important;
	border-style: solid !important;
	font-family: var(--font-family-base) !important;
	font-size: var(--font-size-button) !important;
	font-weight: var(--button-font-weight) !important;
	line-height: 1.15 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

/* --- 6.2 Canonical colour for the legacy Elementor buttons ------------------
   Elementor's per-widget rule declares, on the homepage CTA:

       background-color: var(--e-global-color-5420d44);   → now navy  #12314f
       color:            var(--e-global-color-b1c2d3e);   → now text  #1F2933

   and on the closing CTA button:

       background-color: var(--e-global-color-b1c2d3e);   → now text  #1F2933
       color:            var(--e-global-color-58be983);   → #ffffff

   Measured: the first pair was charcoal on steel blue = 3.13:1 (already a WCAG
   AA failure), the second was fine, but once the palette tokens were remapped
   both became unreliable (a dark button on the dark CTA section, and a
   foreground/background pair that only contrasts by accident).

   The canonical system therefore owns BOTH the background and the foreground of
   Elementor buttons, exactly as `.ntc-btn` does — background and foreground are
   always declared as a pair, so contrast is guaranteed in every context:
   industrial orange (#C2410C) + white = 5.2:1, and the button stays clearly
   distinguishable on light sections, on navy sections and on photography.

   `!important` (documented exception (a)) is required because these values must
   beat the per-widget declarations above at specificity 0-4-0.

   An earlier revision of this fix re-declared `--e-global-color-b1c2d3e` on the
   button instead; that was REJECTED after verification because the same token is
   used as a *background* by the closing CTA button, which turned it white on
   white (contrast 1.0:1). Declaring the pair explicitly is not clever, but it is
   correct. */
.elementor-button {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: var(--color-text-inverse) !important;
	fill: var(--color-text-inverse) !important;
}
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:visited {
	background-color: var(--color-accent-dark) !important;
	border-color: var(--color-accent-dark) !important;
	color: var(--color-text-inverse) !important;
}
.elementor-button:active { background-color: var(--color-accent-dark) !important; }

/* Block-editor buttons inherit the canonical palette. */
.wp-block-button__link { background-color: var(--color-primary); color: var(--color-text-inverse); }
.wp-block-button__link:hover { background-color: var(--color-primary-light); color: var(--color-text-inverse); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* ==========================================================================
   7. CANONICAL CARD SYSTEM
   --------------------------------------------------------------------------
   ONE card behaviour for service / project / knowledge / capability cards:
   same radius, border, shadow, padding, image ratio and hover. The theme's own
   `.hostinger-ai-card` component is mapped onto the same tokens so both the
   block and the Elementor layers behave identically.

   Usage: <article class="ntc-card"><div class="ntc-card__media">…</div>
          <div class="ntc-card__body"><h3 class="ntc-card__title">…</h3></div></article>
   ========================================================================= */
.ntc-card,
.ntc-card--service,
.ntc-card--project,
.ntc-card--knowledge,
.ntc-card--capability,
.hostinger-ai-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out),
		border-color var(--duration-base) var(--ease-out);
}

.ntc-card:hover,
.hostinger-ai-card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.ntc-card__media,
.ntc-card > figure,
.ntc-card > .wp-block-image {
	flex: none;
	overflow: hidden;
	background-color: var(--color-surface-alt);
}
.ntc-card__media img,
.ntc-card > figure img,
.ntc-card > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.ntc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--space-2xs);
	padding: var(--space-md);
}

.ntc-card__title {
	margin: 0;
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.ntc-card__title a { color: inherit; text-decoration: none; }
.ntc-card__title a:hover { color: var(--color-link-hover); }

.ntc-card__text {
	margin: 0;
	font-size: var(--font-size-body);
	color: var(--color-text-muted);
}

.ntc-card__meta {
	margin-top: auto;
	padding-top: var(--space-xs);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* A grid of cards always uses the same gap token. */
.ntc-card-grid {
	display: grid;
	gap: var(--gap-card);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* The theme's own card padding override is replaced by the system value. */
.hostinger-ai-card > *:not(figure):not(.hostinger-ai-card-content) { padding-inline: var(--space-md); }

/* ==========================================================================
   8. IMAGE / MEDIA SYSTEM
   --------------------------------------------------------------------------
   Consistent aspect ratios, object-fit and radius, ready for real project
   photography in a later batch. No existing image is replaced and no
   AI-generated image is presented as a delivered project.
   ========================================================================= */
:where(img, video, svg, iframe) { max-width: 100%; }

.ntc-media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-alt);
}
.ntc-media img,
.ntc-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Ratios */
.ntc-media--16x9 { aspect-ratio: 16 / 9; }
.ntc-media--3x2  { aspect-ratio: 3 / 2; }
.ntc-media--4x3  { aspect-ratio: 4 / 3; }
.ntc-media--1x1  { aspect-ratio: 1 / 1; }
.ntc-media--4x5  { aspect-ratio: 4 / 5; }

.ntc-media--radius-sm { border-radius: var(--radius-sm); }
.ntc-media--radius-md { border-radius: var(--radius-md); }
.ntc-media--radius-lg { border-radius: var(--radius-lg); }
.ntc-media--radius-none { border-radius: 0; }

/* Content images: never upscale beyond their authored size, always cover their
   ratio box, and keep the same corner radius everywhere. */
.wp-block-post-content img,
.elementor-widget-image img {
	max-width: 100%;
	height: auto;
}
.ntc-figure-contained img { object-fit: contain; }

/* ==========================================================================
   9. HEADER + FOOTER COMPATIBILITY FOUNDATION
   --------------------------------------------------------------------------
   Typography, link states and spacing only. No structural change: the header
   markup, the navigation post, the sticky behaviour and the footer layout are
   untouched.
   ========================================================================= */
.hostinger-ai-menu {
	font-family: var(--font-family-base);
	background-color: var(--color-background);
}

/* Primary navigation */
.hostinger-ai-menu :where(.wp-block-navigation-item__content, .wp-block-navigation-item > a, .wp-block-navigation-submenu > a) {
	font-family: var(--font-family-base);
	font-size: var(--font-size-nav);
	font-weight: var(--font-weight-medium);
	line-height: 1.35;
	letter-spacing: 0.005em;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}
.hostinger-ai-menu :where(.wp-block-navigation-item__content, .wp-block-navigation-item > a):hover {
	color: var(--color-link-hover);
}
.hostinger-ai-menu .wp-block-navigation-item.current-menu-item > a,
.hostinger-ai-menu .wp-block-navigation-item.current-menu-ancestor > a {
	font-weight: var(--font-weight-bold);
}

/* Dropdown (8 services) */
.wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: var(--space-2xs);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--color-surface);
	color: var(--color-link-hover);
}

/* Header CTA keeps the canonical button geometry. */
.hostinger-ai-menu .ntc-btn,
.hostinger-ai-menu .wp-element-button,
.hostinger-ai-menu .wp-block-button__link {
	min-height: 44px;
	font-size: var(--font-size-small);
}

/* Footer */
footer,
.site-footer {
	font-family: var(--font-family-base);
	font-size: var(--font-size-small);
	line-height: 1.6;
	color: var(--color-text-muted);
}
footer h1, footer h2, footer h3, footer h4 { color: var(--color-text); }
footer a,
.site-footer a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}
footer a:hover,
.site-footer a:hover { color: var(--color-link-hover); text-decoration: underline; }
footer .wp-block-navigation-item__content { font-size: var(--font-size-small); font-weight: var(--font-weight-regular); }
footer .wp-block-group > * + * { margin-block-start: var(--space-2xs); }
footer .wp-block-navigation__container { row-gap: var(--space-3xs); }
footer .hostinger-reach-block-submit { border-radius: var(--radius-md); font-weight: var(--font-weight-bold); }

/* ==========================================================================
   10. ACCESSIBILITY FOUNDATION
   ========================================================================= */

/* Keyboard focus. A two-tone ring (white inside + navy outside) stays visible
   on both light and dark surfaces, which a single-colour outline cannot do
   (WCAG 1.4.11 needs 3:1 against the adjacent colour, and no single colour
   clears 3:1 against both #ffffff and #0a1f33). Focus indicators are never
   removed. */
:where(a, area, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
	border-radius: var(--radius-sm);
}
.ntc-section--dark :where(a, button, [tabindex]):focus-visible,
footer :where(a, button, [tabindex]):focus-visible,
.hostinger-ai-menu :where(a, button, [tabindex]):focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 5px var(--color-primary);
}

/* Skip link: the theme already renders one; make certain it becomes visible
   for keyboard users instead of relying on the theme's default. */
a[href="#wp--skip-link--target"] {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100000;
	padding: 12px 20px;
	background-color: var(--color-primary);
	color: #ffffff;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	border-radius: var(--radius-md);
}
a[href="#wp--skip-link--target"]:focus {
	top: 8px;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	white-space: normal;
}

/* Assistive-technology-only content (!important exception (c): the utility must
   win over any author styling of the element it is applied to). */
.ntc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Muted text is guaranteed to stay legible on the light surfaces. */
.ntc-text-muted { color: var(--color-text-muted); }
.ntc-section--dark .ntc-text-muted { color: var(--color-text-on-dark-muted); }

/* ==========================================================================
   11. MOTION / VISIBILITY SAFETY — root fix for the AOS `opacity: 0` defect
   --------------------------------------------------------------------------
   THE DEFECT (measured live, anonymous, 2026-09-19)
     * The theme tags Elementor blocks with `data-aos="fade-up"` and the class
       `hostinger-elementor-aos`; the homepage has 31 such blocks.
     * Elementor prints SERVER-SIDE, unconditionally:
           .hostinger-elementor-aos { opacity: 0 }            ← (0-1-0)
           .hostinger-elementor-aos.aos-animate { opacity: 1 }
     * The AOS library stylesheet (also printed server-side) adds:
           [data-aos^=fade][data-aos^=fade] { opacity: 0 }      ← (0-2-0)
           [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1 }
           [data-aos=fade-up] { transform: translate3d(0,100px,0) }
     * The reveal is produced ONLY by JavaScript: the theme bundles AOS inside
       hostinger-ai-theme/assets/js/front-scripts.min.js and initialises it on
       `jQuery(window).on("load", …)`. `window.AOS` is never exposed.
     => `opacity: 0` was a server-rendered state while visibility was a
        client-side consequence. 26 of 31 blocks measured `opacity: 0` on a
        normal load (the 5 above the fold had animated); with JS disabled,
        blocked, errored, or a `load` event delayed by third-party resources,
        those blocks were permanently invisible: white void, invisible headings,
        invisible buttons.

   THE ARCHITECTURE (content first, animation second)
     11.1  CONTENT FIRST — the default in every environment is VISIBLE. Output
           is only ever hidden while `html.ntc-motion` is present, and that
           class is added exclusively by assets/motion-safety.js after it has
           verified: IntersectionObserver support, no `prefers-reduced-motion`,
           and that AOS blocks actually exist. The script removes the class —
           restoring visible content instantly — when the animation engine does
           not initialise in time, when it initialises but stops revealing, or
           when the page cannot reach `load` (slow loading).
     11.2  ANIMATION SECOND — when everything works, the same fade-up entrance
           the theme intended still plays, driven by AOS adding `.aos-animate`.
     11.3  NEVER PERMANENT — the hidden state cannot outlive the gate: the
           script's failsafes run at load+0.9 s, at 5 s and at 10 s, and the
           reduced-motion / print rules below neutralise the hidden state even
           if the script never ran or its timers were throttled.

   Specificity is primed explicitly (0-2-2 → 0-3-2 → 0-4-2) so no `!important`
   is needed to beat either the theme rule or the AOS library rule, and so the
   result does not depend on stylesheet order.
   ========================================================================= */

/* 11.0  Neutralise the theme's raw class rule for the case where AOS removes
   the `data-aos` attributes (its no-support path) — the class alone must never
   hide content. Selector (0-1-2) beats `.hostinger-elementor-aos` (0-1-0). */
html body .hostinger-elementor-aos {
	opacity: 1;
}

/* 11.1  CONTENT FIRST — beats both the theme rule (0-1-0) and the AOS library
   rule (0-2-0). This is the state of every environment without the gate.
   Deliberately NO transition here: when the failsafe releases the gate the
   content must become visible immediately, without depending on the browser's
   animation timeline (headless, background-tab and throttled environments do
   not advance one). The entrance transition lives in 11.2, inside the gate. */
html body [data-aos].hostinger-elementor-aos {
	opacity: 1;
	transform: none;
	transition: none;
}

/* 11.2  ANIMATION SECOND — active only while the JavaScript bootstrap has
   confirmed it can complete the reveal. (0-3-2) */
html.ntc-motion body [data-aos].hostinger-elementor-aos {
	opacity: 0;
	transform: translate3d(0, var(--aos-shift), 0);
	transition: opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
}

/* 11.2b The reveal: AOS adds `.aos-animate` when the block enters the
   viewport. (0-4-2) */
html.ntc-motion body [data-aos].hostinger-elementor-aos.aos-animate {
	opacity: 1;
	transform: none;
}

/* 11.3a Reduced motion is an explicit request: never hide, never animate. */
@media (prefers-reduced-motion: reduce) {
	html.ntc-motion body [data-aos].hostinger-elementor-aos,
	html body [data-aos].hostinger-elementor-aos {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 11.3b Printed / exported documents keep every block. (!important exception
   (b): a PDF export must never lose content to an animation state.) */
@media print {
	.hostinger-elementor-aos,
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* 11.4  The design system's own transitions also honour the motion preference.
   (Scoped on purpose: a global `animation-duration: 0 !important` hammer would
   be an undocumented fourth use of `!important` and would fight third-party
   components that do their own reduced-motion handling.) */
@media (prefers-reduced-motion: reduce) {
	.ntc-btn,
	.ntc-card,
	.ntc-media,
	.elementor-button,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
		animation: none;
	}
	.ntc-btn:active,
	.ntc-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   12. RESPONSIVE FOUNDATION
   --------------------------------------------------------------------------
   The type scale is fluid (clamp) so it needs no breakpoints. These rules only
   handle container gutters, grid behaviour and the small-screen ergonomics.
   Verified viewports: 375 / 390 / 414 / 768 / 1024 / 1440.
   ========================================================================= */

/* Tablet — matches the page-builder tablet boundary (≤1024 px) */
@media (max-width: 1024px) {
	html body .e-con-boxed > .e-con-inner {
		padding-left: max(16px, 3.5vw);
		padding-right: max(16px, 3.5vw);
	}
	.ntc-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}

/* Phone — matches the theme's 781 px boundary and the builder's 767 px one */
@media (max-width: 767px) {
	html body .e-con-boxed > .e-con-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	.ntc-container { padding-inline: 16px; }

	/* Long horizontal content must scroll inside itself, never push the page */
	.wp-block-post-content table,
	.ntc-table-scroll table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Cards go single-column with the same gutter tokens */
	.ntc-card-grid { grid-template-columns: 1fr; gap: var(--gap-card); }
	.ntc-card__body { padding: var(--space-sm); }

	/* Buttons keep a ≥44 px tap target and full-width when declared block */
	.ntc-btn,
	.elementor-button,
	.wp-element-button,
	.wp-block-button__link {
		min-height: 46px;
	}
	.ntc-btn--block,
	.ntc-btn--block-xs { width: 100%; }
	.ntc-btn--tertiary { width: auto; }
}

/* Very small phones (≤390 px) — keep gutters and never allow overflow */
@media (max-width: 390px) {
	.ntc-container { padding-inline: 14px; }
	html body .e-con-boxed > .e-con-inner { padding-left: 14px; padding-right: 14px; }
}

/* Long unbreakable strings (URLs, codes) must wrap instead of creating a
   horizontal scrollbar. */
:where(p, li, h1, h2, h3, h4, h5, h6, td, th, figcaption) {
	overflow-wrap: break-word;
}

/* ==========================================================================
   13. PRINT
   ========================================================================= */
@media print {
	a[href="#wp--skip-link--target"],
	.hostinger-ai-menu,
	.chatbot,
	.kodee-fab,
	.sales-chatbot-widget,
	#wpadminbar {
		display: none !important;
	}
	body {
		font-size: 11pt;
		line-height: 1.45;
		color: #000000;
		background: #ffffff;
	}
	.ntc-card,
	.ntc-section {
		box-shadow: none;
		border-color: #cccccc;
	}
	a { text-decoration: underline; }
}

/* END OF PHASE 3A DESIGN SYSTEM — v1.5.0 */