/* =========================================================================
   D'GARDENIA CITY — accent colour only
   =========================================================================
   Loaded ONLY on /dgardenia-city/ (is_page() block in inc/assets.php), and
   every selector is scoped to body.dgardenia-page — the class kl_body_class()
   (inc/setup.php) puts on that page alone.

   Same mechanism as prima-accent.css, different family. The palette is taken
   from D'Gardenia's own campaign creative (the "Yuk Lihat Denah" post): its
   ground samples at hue 193-195 degrees, 15-29% saturation, 22-35% lightness —
   a dark, desaturated TEAL, not the emerald this file first carried. Sampled
   values: #273F47 / #324C54 / #4D6268 background, #263E46 label chips.

   Backgrounds and layout are untouched; because style.css draws every accent
   through var(--gold*), re-pointing three tokens repaints the eyebrow rules,
   pill buttons, links, icons, nav hovers, footer headings and both 3px brand
   rules at once.

     #26707F  gold      → primary accent (rules, icons, pills)
     #17505C  gold-deep → links, button hover, avatar type
     #7FCBD9  gold-soft → bright accent on the dark bands
   ========================================================================= */

body.dgardenia-page{
	--gold:#26707F;
	--gold-deep:#17505C;
	/* 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:#7FCBD9;

	/* The light GOLD-tinted grounds retint to the same teal family at the same
	   lightness, so nothing gets darker or loses contrast — only the hue rotates
	   off gold-beige onto a cool blue-grey.
	     --paper  drives body, .on-paper, the .prima-type spec/plan tiles
	     --sand   drives .on-sand (Fasilitas), .cta-band, .tcard__avatar */
	--paper:#F2F8F9;
	--sand:#D9E8EB;

	/* Type follows the same hue shift, off gold-taupe onto a deep teal. Every
	   pairing was measured, not eyeballed: headings 8.8:1 and body 9.2:1 on
	   --paper, and --muted is #4E6A73 rather than a lighter grey because at
	   #557079 it fell to 4.19:1 on --sand, under AA.
	     --heading  section titles      --ink    eyebrows, .link-arrow, btn-primary
	     --body     running copy        --muted  captions, small print */
	--heading:#1C4C57;
	--ink:#132226;
	--body:#31474D;
	--muted:#4E6A73;

	/* theme.json emits these and colours links + buttons through them.
	   body.dgardenia-page (0,2,0) beats core's :root :where(...) (0,1,0). */
	--wp--preset--color--gold:#26707F;
	--wp--preset--color--gold-deep:#17505C;
	--wp--preset--color--paper:#F2F8F9;
	--wp--preset--color--sand:#D9E8EB;
	--wp--preset--color--heading:#1C4C57;
	--wp--preset--color--ink:#132226;
	--wp--preset--color--body:#31474D;
	--wp--preset--color--muted:#4E6A73;
	--wp--preset--gradient--sand-fade:linear-gradient(180deg,#F2F8F9 0%,#D9E8EB 100%);

	background-color:#F2F8F9;
	color:#31474D;
}

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

/* 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.dgardenia-page .site-header .main-nav .wp-block-navigation__responsive-container.is-menu-open{
	background-image:radial-gradient(120% 75% at 100% 0%, rgba(38,112,127,.22), transparent 58%) !important;
}

/* -------------------------------------------------------------------------
   Contrast repairs — the same two the burnt orange needed, for the same
   reason: emerald is darker than the original gold.
   ------------------------------------------------------------------------- */

/* 1. Accent as a BACKGROUND that used to carry navy text — flip to white. */
body.dgardenia-page .main-nav .is-menu-open .nav-cta-mobile .wp-block-navigation-item__content{color:#fff !important;}
body.dgardenia-page .footer-social a:hover{color:#fff;}

/* 2. Accent as small TEXT on navy — #26707F is only 3.03:1 there, below AA for
      the 0.72–0.75rem uppercase labels. A lighter step of the same teal
      reaches 7.4:1. Larger marks (2–3px rules, 46px icons) stay on --gold:
      decorative, and they clear the 3:1 bar. */
body.dgardenia-page .site-footer h4,
body.dgardenia-page .site-footer .brand small,
body.dgardenia-page .footer-links a:hover,
body.dgardenia-page .main-nav .is-menu-open .wp-block-navigation__responsive-container-content::before,
body.dgardenia-page .main-nav .is-menu-open .wp-block-navigation-item:not(.nav-cta-mobile) .wp-block-navigation-item__content::before,
body.dgardenia-page .main-nav .is-menu-open .wp-block-navigation-item:not(.nav-cta-mobile) .wp-block-navigation-item__content:hover::after,
body.dgardenia-page .main-nav .wp-block-navigation__responsive-container-close:hover{color:#5FB6C7 !important;}
body.dgardenia-page .main-nav .wp-block-navigation__responsive-container-close:hover{border-color:#5FB6C7;}

/* =========================================================================
   GRADIENT ACCENT
   =========================================================================
   Applied only where a gradient actually carries weight: the primary-coloured
   section headings and the pill buttons. Everything else (rules, icons, links)
   stays flat — a gradient on a 2px rule or a 20px icon reads as mud.
   ========================================================================= */
body.dgardenia-page{
	/* The light stop is #3E93A6, not the #4FA6B8 the palette would suggest: at
	   #4FA6B8 the first characters of a clipped heading sat at 2.62:1 on --paper,
	   under the 3:1 floor for large text. #3E93A6 measures 3.3:1, and the rest of
	   the ramp is far darker. */
	--grad:linear-gradient(160deg, #3E93A6 0%, #26707F 38%, #123F49 100%);
}

/* ---- Headings -----------------------------------------------------------
   ONLY the ones drawn in the primary colour, i.e. var(--heading) section
   titles on the light bands. .dg-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), so they
   stay solid too.
   ------------------------------------------------------------------------- */
body.dgardenia-page .section:not(.dg-hero):not(.prima-spec) .section__head h2,
body.dgardenia-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.dgardenia-page .section:not(.dg-hero):not(.prima-spec) .section__head h2.kl-title,
body.dgardenia-page .cta-band h2.kl-title{
	background-image:none;
}
body.dgardenia-page .section:not(.dg-hero):not(.prima-spec) .section__head h2.kl-title .kl-char__inner,
body.dgardenia-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 ------------------------------------------------------------
   Oversized background so hover slides the gradient instead of cross-fading
   two flat colours. Flat colour stays underneath as the fallback.
   ------------------------------------------------------------------------- */
body.dgardenia-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.dgardenia-page .btn-gold .wp-block-button__link:hover{
	background-position:100% 0;
	transform:translateY(-2px);
	box-shadow:0 10px 24px -12px rgba(18,63,73,.7);
}
body.dgardenia-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.dgardenia-page .main-nav .is-menu-open .nav-cta-mobile .wp-block-navigation-item__content:hover{
	background-position:100% 0;
}

/* =========================================================================
   "a Modern Lifestyle" — the project's own tagline, accented + shine
   =========================================================================
   The marker lives in the heading markup; site.js's character reveal carries
   .hl-shine onto the spans it generates, so this works whether or not the
   reveal has run. A bright band travels letter by letter — colour and
   text-shadow animate fine through the reveal's transforms, which a
   background-clip sweep cannot.
   ========================================================================= */
body.dgardenia-page .dg-hero__intro h1 .hl-shine,
body.dgardenia-page .dg-hero__intro h1 .hl-shine .kl-char__inner{
	color:#7FCBD9;
	-webkit-text-fill-color:#7FCBD9;
}
body.dgardenia-page .dg-hero__intro h1 .hl-shine .kl-char__inner{
	animation:klShineDg 3.6s ease-in-out infinite;
	animation-delay:calc(var(--i, 0) * 0.055s);
}
@keyframes klShineDg{
	0%, 55%, 100% { color:#7FCBD9; -webkit-text-fill-color:#7FCBD9; text-shadow:none; }
	22%           { color:#E8FBFF; -webkit-text-fill-color:#E8FBFF;
	                text-shadow:0 0 22px rgba(127,203,217,.75), 0 0 6px rgba(232,251,255,.5); }
}
@media (prefers-reduced-motion: reduce){
	body.dgardenia-page .dg-hero__intro h1 .hl-shine .kl-char__inner{ animation:none; }
}