/*
 * KKI Design System — Canonical hero template
 *
 * Standardizes the harington theme's `.hero-title` across the main landing
 * pages to a single visual template:
 *
 *   - Cormorant Garamond italic, weight 500
 *   - clamp(48px, 5.4vw, 72px) — fluid but capped
 *   - text-transform: none (overrides the body.uppercase-text default)
 *   - centered, single-line, color var(--color-foreground)
 *
 * The pattern was already in use on Methodology, Services, Projects, and
 * Portfolio (via existing page-scoped overrides in switcher.css). This file
 * extends the same template to:
 *
 *   - About (page IDs 2711 EN / 4516 TH) — was 115px UPPERCASE
 *   - Insights (4487 EN / 4523 TH) — was 72px UPPERCASE
 *   - Contact (2713 EN / 4522 TH) — was 72px UPPERCASE
 *   - Project detail (body.single-kki_project) — was 72px UPPERCASE
 *   - Portfolio Case detail (body.single-harington_portfolio) — was 72px UPPERCASE
 *
 * Home page (4122 / 4519) keeps its unique brand-pillar treatment (76px
 * normal, multi-line) — that's a deliberate marketing surface, not a
 * pattern page.
 */

body.page-id-2711 #hero .hero-title,
body.page-id-2711 #hero .hero-title span,
body.page-id-4516 #hero .hero-title,
body.page-id-4516 #hero .hero-title span,
body.page-id-4487 #hero .hero-title,
body.page-id-4487 #hero .hero-title span,
body.page-id-4523 #hero .hero-title,
body.page-id-4523 #hero .hero-title span,
body.page-id-2713 #hero .hero-title,
body.page-id-2713 #hero .hero-title span,
body.page-id-4522 #hero .hero-title,
body.page-id-4522 #hero .hero-title span,
body.single-kki_project #hero .hero-title,
body.single-kki_project #hero .hero-title span,
body.single-harington_portfolio #hero .hero-title,
body.single-harington_portfolio #hero .hero-title span {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(48px, 5.4vw, 72px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    text-align: center !important;
    color: var(--color-foreground) !important;
    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Subtitle pattern — Poppins, muted cream, centered, narrow column. */
body.page-id-2711 #hero .hero-subtitle,
body.page-id-2711 #hero .hero-subtitle span,
body.page-id-4516 #hero .hero-subtitle,
body.page-id-4516 #hero .hero-subtitle span,
body.page-id-4487 #hero .hero-subtitle,
body.page-id-4487 #hero .hero-subtitle span,
body.page-id-4523 #hero .hero-subtitle,
body.page-id-4523 #hero .hero-subtitle span,
body.page-id-2713 #hero .hero-subtitle,
body.page-id-2713 #hero .hero-subtitle span,
body.page-id-4522 #hero .hero-subtitle,
body.page-id-4522 #hero .hero-subtitle span,
body.single-kki_project #hero .hero-subtitle,
body.single-kki_project #hero .hero-subtitle span,
body.single-harington_portfolio #hero .hero-subtitle,
body.single-harington_portfolio #hero .hero-subtitle span {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: clamp(15px, 1.32vw, 20px) !important;
    font-weight: 400 !important;
    color: rgba(247, 240, 223, 0.78) !important;
    text-align: center !important;
    line-height: 1.55 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-title-wrapper alignment (override left-aligned defaults) */
body.page-id-2711 #hero .hero-title-wrapper,
body.page-id-4516 #hero .hero-title-wrapper,
body.page-id-4487 #hero .hero-title-wrapper,
body.page-id-4523 #hero .hero-title-wrapper,
body.page-id-2713 #hero .hero-title-wrapper,
body.page-id-4522 #hero .hero-title-wrapper,
body.single-kki_project #hero .hero-title-wrapper,
body.single-harington_portfolio #hero .hero-title-wrapper {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.page-id-2711 #hero #hero-caption .inner,
body.page-id-4516 #hero #hero-caption .inner,
body.page-id-4487 #hero #hero-caption .inner,
body.page-id-4523 #hero #hero-caption .inner,
body.page-id-2713 #hero #hero-caption .inner,
body.page-id-4522 #hero #hero-caption .inner,
body.single-kki_project #hero #hero-caption .inner,
body.single-harington_portfolio #hero #hero-caption .inner {
    text-align: center !important;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero height force-visible rules REMOVED -- the harington #hero is now
 * hidden on ALL internal pages (Methodology, Services, About, Insights,
 * Portfolio, Projects, Contact, all CPT singles) via balance-overrides.css.
 * Internal pages have their own .kki-{s2,m2,a2,cx,pf}-hero content hero.
 * Home (4122, 4519) still uses harington #hero as main brand cover.
 * The H1 typography rules below still apply to the harington hero markup
 * in case it's ever restored on a page. */

/* Gradient overlay + caption-z-index rules REMOVED -- harington #hero
 * is hidden site-wide on internal pages (see balance-overrides.css).
 * Specificity-bump force-visible rules REMOVED for the same reason. */

/* Contact page (page IDs 2713, 4522) uses a custom .kki-cx__hero block
 * INSTEAD of the harington #hero (which is positioned absolute behind the
 * page content). Standardize that block's H1 to the canonical italic
 * Cormorant 72px treatment so Contact reads as part of the same template
 * family even though its layout is content-first. */
body.page-id-2713 .kki-cx__hero h1,
body.page-id-2713 #kki-cx-hero-h,
body.page-id-4522 .kki-cx__hero h1,
body.page-id-4522 #kki-cx-hero-h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(40px, 4.6vw, 64px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    color: var(--color-foreground) !important;
}

/* #hero-image-wrapper force-visible rules REMOVED -- the harington hero
 * is hidden site-wide on internal pages via balance-overrides.css. */

/* ════════════════════════════════════════════════════════════════════
 * Insights page hero bg image (page IDs 4487 EN, 4523 TH)
 *
 * The harington theme doesn't render #hero-image-wrapper on Insights so
 * the meta-set image never paints. Inject it directly on #hero with the
 * standard navy gradient overlay for legibility.
 * ════════════════════════════════════════════════════════════════════ */
body.page-id-4487 #hero,
body.page-id-4523 #hero {
    background-image:
        linear-gradient(180deg, rgba(7, 17, 29, 0.45) 0%, rgba(7, 17, 29, 0.82) 100%),
        url('https://korkaiidea.com/wp-content/uploads/2025/12/Web-Design-DEC2025-closer-03-1-scaled.jpg') !important;
    background-size: cover, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-color: #07111d !important;
}