/* =========================================================================
   PRIMA GARDEN ESTATE — accent colour only
   =========================================================================
   Loaded ONLY on /prima-garden-estate/ (is_page() block in inc/assets.php),
   and every selector is scoped to body.prima-page — the class kl_body_class()
   (inc/setup.php) puts on that page alone.

   Backgrounds, type colours and layout are untouched: the page keeps its
   navy / cream-paper / white bands. The ONLY thing that moves is the accent
   family — gold becomes the campaign's burnt orange. Because style.css draws
   every accent through var(--gold*), re-pointing three tokens repaints the
   eyebrow rules, gold pill buttons, links, icons, nav hovers, footer headings
   and both 3px brand rules at once.

     #C2551F  gold      → primary accent (rules, icons, gold pills)
     #A3441A  gold-deep → links, button hover, avatar type
     #F0A15E  gold-soft → bright accent on the navy bands
   ========================================================================= */

body.prima-page{
	--gold:#C2551F;
	--gold-deep:#A3441A;
	/* Never declared in :root — style.css uses it 10x as
	   var(--gold-soft,#E4C778), so the gold literal always won. Declaring it
	   here brings those ten sites along, on this page only. */
	--gold-soft:#F0A15E;

	/* The light GOLD-tinted grounds retint to the same burnt-orange family.
	   Same lightness as before, so nothing gets darker or loses contrast —
	   only the hue rotates off gold-beige onto the campaign's terracotta.
	     --paper  drives body, .on-paper, the .prima-type spec/plan tiles
	     --sand   drives .on-sand (Galeri), .cta-band, .tcard__avatar */
	--paper:#FBF5F0;
	--sand:#F3E1D6;

	/* The brown/taupe type follows the same hue shift — off gold-taupe onto
	   a warm terracotta brown. Each is a touch darker than the value it
	   replaces, so contrast improves rather than regresses (the headings go
	   3.6:1 -> 6.2:1 on the light grounds).
	     --heading  section titles      --ink    eyebrows, .link-arrow, btn-primary
	     --body     running copy        --muted  captions, small print */
	--heading:#8A4A2E;
	--ink:#2E211B;
	--body:#4E3A30;
	--muted:#8C6D5C;

	/* theme.json emits these and colours links + buttons through them.
	   body.prima-page (0,2,0) beats core's :root :where(...) (0,1,0). */
	--wp--preset--color--gold:#C2551F;
	--wp--preset--color--gold-deep:#A3441A;
	--wp--preset--color--paper:#FBF5F0;
	--wp--preset--color--sand:#F3E1D6;
	--wp--preset--color--heading:#8A4A2E;
	--wp--preset--color--ink:#2E211B;
	--wp--preset--color--body:#4E3A30;
	--wp--preset--color--muted:#8C6D5C;
	--wp--preset--gradient--sand-fade:linear-gradient(180deg,#FBF5F0 0%,#F3E1D6 100%);

	background-color:#FBF5F0;
	color:#4E3A30;
}

/* CTA band — style.css hardcodes the gold-beige gradient end (#e4dccb). */
body.prima-page .cta-band{background:linear-gradient(180deg,var(--sand),#EBD2C2);}

/* The two gold literals style.css hardcodes, so they follow the token. */
/* Mobile nav overlay corner glow — was rgba(194,154,69,.16), i.e. --gold. */
body.prima-page .site-header .main-nav .wp-block-navigation__responsive-container.is-menu-open{
	background-image:radial-gradient(120% 75% at 100% 0%, rgba(194,85,31,.18), transparent 58%) !important;
}

/* -------------------------------------------------------------------------
   Contrast repairs. The old gold (#C29A45) was light; the burnt orange is
   darker, so two things need adjusting where it lands on the navy bands or
   carries dark text.
   ------------------------------------------------------------------------- */

/* 1. Gold as a BACKGROUND that used to carry navy text — flip the text to
      white (4.55:1) instead of navy (3.7:1). */
body.prima-page .main-nav .is-menu-open .nav-cta-mobile .wp-block-navigation-item__content{color:#fff !important;}
body.prima-page .footer-social a:hover{color:#fff;}

/* 2. Gold as small TEXT on navy — #C2551F is only 3.7:1 there, below AA for
      the 0.72–0.75rem uppercase labels. A lighter step of the same orange
      gets it to 5.6:1. Larger orange marks (2–3px rules, the 46px spec
      icons) stay on --gold: decorative, and they clear the 3:1 bar. */
body.prima-page .site-footer h4,
body.prima-page .site-footer .brand small,
body.prima-page .footer-links a:hover,
body.prima-page .main-nav .is-menu-open .wp-block-navigation__responsive-container-content::before,
body.prima-page .main-nav .is-menu-open .wp-block-navigation-item:not(.nav-cta-mobile) .wp-block-navigation-item__content::before,
body.prima-page .main-nav .is-menu-open .wp-block-navigation-item:not(.nav-cta-mobile) .wp-block-navigation-item__content:hover::after,
body.prima-page .main-nav .wp-block-navigation__responsive-container-close:hover{color:#E07A3C !important;}
body.prima-page .main-nav .wp-block-navigation__responsive-container-close:hover{border-color:#E07A3C;}

/* =========================================================================
   GRADIENT ACCENT
   =========================================================================
   The flat burnt orange becomes a gradient in the two places the accent
   actually carries weight: the primary-coloured section headings, and the
   gold pill buttons. Everything else (rules, icons, links, footer headings)
   stays on the flat token — a gradient on a 2px rule or a 20px icon just
   reads as a muddy colour.
   ========================================================================= */
body.prima-page{
	--grad:linear-gradient(160deg, #E8944A 0%, #C2551F 38%, #A8431A 100%);
}

/* ---- Headings -----------------------------------------------------------
   ONLY the ones drawn in the primary colour, i.e. var(--heading) section
   titles on the light bands. .prima-hero and .prima-spec headings are white
   on dark and are excluded — clipping a gradient into them would destroy the
   contrast. .prima-loc__body h2 and .prima-type__name use var(--ink), not the
   primary, so they stay solid too.
   ------------------------------------------------------------------------- */
body.prima-page .section:not(.prima-hero):not(.prima-spec) .section__head h2,
body.prima-page .cta-band h2{
	background-image:var(--grad);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
}
/* Once the character reveal has run, every glyph sits inside a TRANSFORMED
   span — and a transform stops an ancestor's background-clip:text from
   reaching it, so the heading would simply vanish. Paint the gradient on the
   glyph spans themselves instead, and use the --i / --n indices site.js
   publishes to give each character its own slice: background-size is the full
   run of characters wide, and each one is offset to its position in that run,
   so the slices reassemble into a single gradient across the whole heading. */
body.prima-page .section:not(.prima-hero):not(.prima-spec) .section__head h2.kl-title,
body.prima-page .cta-band h2.kl-title{
	background-image:none;
}
body.prima-page .section:not(.prima-hero):not(.prima-spec) .section__head h2.kl-title .kl-char__inner,
body.prima-page .cta-band h2.kl-title .kl-char__inner{
	background-image:var(--grad);
	background-size:calc(var(--n, 1) * 100%) 100%;
	background-position:calc(var(--i, 0) / var(--n, 1) * 100%) 0;
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
}

/* ---- Buttons ------------------------------------------------------------
   The gold pill (header CTA, hero CTA, lokasi CTA) and the mobile-nav CTA.
   Oversized background so hover can slide the gradient instead of cross-
   fading two flat colours. Flat colour stays underneath as the fallback.
   ------------------------------------------------------------------------- */
body.prima-page .btn-gold .wp-block-button__link{
	background-color:var(--gold);
	background-image:var(--grad);
	background-size:180% 100%;
	background-position:0% 0;
	color:#fff;
	transition:background-position .5s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
body.prima-page .btn-gold .wp-block-button__link:hover{
	background-position:100% 0;
	transform:translateY(-2px);
	box-shadow:0 10px 24px -12px rgba(168,67,26,.7);
}
body.prima-page .main-nav .is-menu-open .nav-cta-mobile .wp-block-navigation-item__content{
	background-color:var(--gold);
	background-image:var(--grad);
	background-size:180% 100%;
	background-position:0% 0;
	transition:background-position .5s var(--ease), transform .25s var(--ease);
}
body.prima-page .main-nav .is-menu-open .nav-cta-mobile .wp-block-navigation-item__content:hover{
	background-position:100% 0;
}

/* =========================================================================
   "Perumahan Sidoarjo" — accent highlight + shine
   =========================================================================
   The marker lives in the heading markup; site.js's character reveal carries
   .hl-shine onto the .kl-word spans it generates, so this works whether or
   not the reveal has run. A bright band travels through the gradient to give
   the shine; the two words are offset so it reads as one sweep crossing the
   whole phrase rather than both flashing at once.
   ========================================================================= */
/* Base: solid accent. This is what shows with JS off or reduced motion, and it
   is also the resting colour the shine animates away from and back to. */
body.prima-page .prima-hero__intro h1 .hl-shine,
body.prima-page .prima-hero__intro h1 .hl-shine .kl-char__inner{
	color:#E8944A;
	-webkit-text-fill-color:#E8944A;
}
/* The shine travels letter by letter rather than sweeping a clipped gradient —
   colour and text-shadow animate fine through the reveal's transforms, which a
   background-clip sweep cannot. --i staggers each glyph so the highlight reads
   as one band crossing the phrase. */
body.prima-page .prima-hero__intro h1 .hl-shine .kl-char__inner{
	animation:klShine 3.6s ease-in-out infinite;
	animation-delay:calc(var(--i, 0) * 0.055s);
}
@keyframes klShine{
	0%, 55%, 100% { color:#E8944A; -webkit-text-fill-color:#E8944A; text-shadow:none; }
	22%           { color:#FFE7C9; -webkit-text-fill-color:#FFE7C9;
	                text-shadow:0 0 22px rgba(255,206,150,.75), 0 0 6px rgba(255,236,214,.5); }
}
@media (prefers-reduced-motion: reduce){
	body.prima-page .prima-hero__intro h1 .hl-shine .kl-char__inner{ animation:none; }
}