/*
Theme Name: KL Charter Child
Description: Child theme of Kadence for MY13KLTAXI. Premium LIGHT (white) design system + glass/glow + motion.
Author: Built with Claude Code
Template: kadence
Version: 2.1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@600;700&display=swap');

/* ============================================================
   MY13KLTAXI — premium LIGHT design system
   ============================================================ */
:root{
  --bg:#ffffff; --bg-soft:#f7f5f1; --navy:#0f1b2d; --navy-2:#0a1320;
  --gold:#b8902f; --gold-bright:#caa23f; --teal:#0f7a72; --red:#e8341c;
  --ink:#0f1b2d; --head:#0f1b2d; --text:#485264; --text-dim:#6b7585;
  --line:#e9e6df; --line-2:#f0ede6;
  --shadow:0 18px 48px rgba(15,27,45,.08); --shadow-lg:0 30px 70px rgba(15,27,45,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Light canvas + faint warm glows -------------------------------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,sans-serif;
  line-height:1.8; letter-spacing:.002em; position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58vw 48vh at 8% -6%, rgba(184,144,47,.07), transparent 60%),
    radial-gradient(52vw 48vh at 100% 6%, rgba(15,122,114,.06), transparent 60%),
    radial-gradient(70vw 56vh at 50% 116%, rgba(184,144,47,.06), transparent 60%);
}
#inner-wrap{ position:relative; z-index:1; }

/* ---- Typography ----------------------------------------------------- */
h1,h2,h3,h4,.wp-block-heading,.site-title{
  font-family:'Playfair Display','Noto Serif SC',Georgia,serif;
  color:var(--head); line-height:1.16; letter-spacing:.004em;
}
.entry-content p,.entry-content li,.wp-block-details summary{ color:var(--text); }
.wp-block-cover h1{ font-size:clamp(2.4rem,5.2vw,4.4rem); font-weight:700; }
h2.wp-block-heading{ font-size:clamp(1.9rem,3.4vw,3rem); font-weight:700; }
h3.wp-block-heading{ font-size:1.35rem; font-weight:600; }
.has-large-font-size{ font-size:clamp(1.05rem,1.6vw,1.28rem) !important; line-height:1.75; }

/* Gradient text on un-coloured section headings (navy -> gold) */
.entry-content h2.wp-block-heading:not([style]){
  background:linear-gradient(100deg,#0f1b2d 0%, #2a3a57 45%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.wp-block-group > .has-text-align-center.has-large-font-size{ color:var(--text-dim); max-width:720px; margin-inline:auto; }

/* Dark accent sections (navy) keep their drama on the white site */
.wp-block-group.alignfull[style*="background-color:#0f1b2d"]{
  background:linear-gradient(180deg, #11203a, #0a1320) !important;
}

/* ---- Generous whitespace ------------------------------------------- */
.wp-block-group.alignfull{ padding-top:clamp(64px,8vw,118px) !important; padding-bottom:clamp(64px,8vw,118px) !important; padding-left:20px; padding-right:20px; }
.wp-block-columns{ gap:28px !important; }

/* ---- White cards w/ soft shadow + gold ring + shine ---------------- */
.wp-block-group.has-border-color{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff !important; border:1px solid var(--line) !important; border-radius:16px !important;
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.wp-block-group.has-border-color::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; z-index:-1;
  background:linear-gradient(135deg, rgba(184,144,47,0), rgba(184,144,47,.6), rgba(15,122,114,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s var(--ease);
}
.wp-block-group.has-border-color::before{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease); opacity:0;
}
.wp-block-group.has-border-color:hover{ transform:translateY(-8px) scale(1.012); border-color:transparent !important; box-shadow:var(--shadow-lg); }
.wp-block-group.has-border-color:hover::after{ opacity:1; }
.wp-block-group.has-border-color:hover::before{ left:120%; opacity:1; }
.wp-block-group.has-border-color .wp-block-image,
.wp-block-group.has-border-color .wp-block-image img{ border-radius:0 !important; }
.wp-block-image img{ border-radius:12px; display:block; width:100%; height:auto; }
/* Premium gradient sheen on placeholder image tiles (until real photos drop in) */
.entry-content .wp-block-image{ position:relative; border-radius:12px; overflow:hidden; }
.entry-content .wp-block-image::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(115% 80% at 16% 0%, rgba(15,122,114,.34), transparent 55%),
    radial-gradient(120% 95% at 100% 100%, rgba(184,144,47,.30), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.16));
  mix-blend-mode:screen;
}

/* ---- Buttons: gradient + glow + shine ------------------------------ */
.wp-block-button__link{
  position:relative; overflow:hidden;
  padding:16px 34px !important; font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:8px !important; border:1px solid rgba(0,0,0,.05);
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s ease;
}
.wp-block-button__link:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,27,45,.18), 0 0 0 1px rgba(184,144,47,.45), 0 0 26px rgba(184,144,47,.28); }
.wp-block-button__link:active{ transform:translateY(-1px) scale(.985); }
.wp-block-button__link::after{
  content:""; position:absolute; top:0; left:-75%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease);
}
.wp-block-button__link:hover::after{ left:130%; }
.wp-block-buttons{ gap:16px !important; }

/* ---- Rate tables (clean light) ------------------------------------- */
.wp-block-table{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.wp-block-table table{ border-collapse:collapse; width:100%; background:#fff; }
.wp-block-table th{ background:linear-gradient(180deg,#11203a,#0c1729); color:var(--gold-bright); font-family:'Inter',sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.76rem; padding:16px; text-align:left; }
.wp-block-table td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--text); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:var(--bg-soft); }

/* ---- FAQ / details -------------------------------------------------- */
.wp-block-details{ border:1px solid var(--line); border-radius:12px; padding:16px 22px; margin-bottom:14px; background:#fff; box-shadow:0 6px 20px rgba(15,27,45,.05); transition:border-color .3s var(--ease); }
.wp-block-details:hover{ border-color:rgba(184,144,47,.5); }
.wp-block-details summary{ cursor:pointer; font-weight:600; color:var(--head); list-style:none; }
.wp-block-details summary::-webkit-details-marker{ display:none; }
.wp-block-details summary::after{ content:"+"; float:right; color:var(--gold); font-size:1.2em; transition:transform .3s var(--ease); }
.wp-block-details[open] summary::after{ transform:rotate(45deg); }

/* ---- Header: light glass ------------------------------------------- */
.site-header,.site-header-row,.site-header-main-section-left,.site-header-main-section-right{ background:transparent !important; }
#masthead, .site-header{ transition:background .35s ease, box-shadow .35s ease; }
#masthead .site-header-row, .site-header .site-header-row{ background:rgba(255,255,255,.86) !important; backdrop-filter:saturate(140%) blur(12px); }
#masthead.is-stuck .site-header-row, .site-header.is-stuck .site-header-row{ background:rgba(255,255,255,.95) !important; box-shadow:0 10px 30px rgba(15,27,45,.08); border-bottom:1px solid var(--line); }
.header-navigation a, .header-menu-container a{ color:#26304a !important; font-weight:500; letter-spacing:.02em; position:relative; }
.header-navigation a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--teal)); transition:width .3s var(--ease); }
.header-navigation a:hover::after, .header-navigation .current-menu-item > a::after{ width:100%; }
.header-navigation a:hover{ color:var(--ink) !important; }

/* Logo blends on the white header (no plate needed); wordmark beside it */
.site-header-item .custom-logo,.site-branding .custom-logo,img.custom-logo{ max-height:84px; width:auto; height:auto; padding:6px 0; }
.site-title,.site-branding .site-title,.header-main .site-title{ display:block !important; font-family:'Playfair Display','Noto Serif SC',serif; font-weight:700; letter-spacing:.06em; line-height:1; font-size:1.7rem; }
.site-title a,.site-title{ color:var(--ink) !important; }

/* Hide redundant Kadence page-title banner on the front page */
.home .entry-hero,.home .entry-hero-container-inner,.home header.entry-header{ display:none !important; }

/* ---- Hero cover: dramatic dark top (gradient + glow) --------------- */
.wp-block-cover{ position:relative; }
.wp-block-cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 28%, rgba(184,144,47,.20), transparent 60%), linear-gradient(180deg, rgba(7,12,20,.15), rgba(7,12,20,.6));
}
.wp-block-cover__inner-container{ position:relative; z-index:3; max-width:920px; }
.wp-block-cover h1{ color:#fff; text-shadow:0 2px 40px rgba(184,144,47,.25); }
.wp-block-cover .has-text-color{ color:inherit; }

/* ---- Footer (dark, branded) — premium contrast on a light site ----- */
.site-footer,.site-footer-row-container-inner{ background:#0a1320 !important; border-top:1px solid rgba(255,255,255,.06); }
.site-footer .footer-html{ line-height:1.95; color:#aab4c2; }
.site-footer .footer-html strong{ color:#fff; font-family:'Playfair Display','Noto Serif SC',serif; letter-spacing:.05em; font-size:1.12em; }
.site-footer .footer-html a{ color:var(--gold-bright); text-decoration:none; }
.site-footer .footer-html a:hover{ color:#f1d79a; }
.site-footer .footer-html img{ filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)); }

/* ============================================================
   MOTION — entrance, scroll-reveal, micro-interactions
   ============================================================ */
.anim-ready .entry-content .wp-block-group.alignfull > *{ opacity:0; transform:translateY(34px); }
.anim-ready .entry-content .wp-block-group.alignfull > *{ transition:opacity .8s ease, transform .9s var(--ease); transition-delay:var(--rd,0ms); will-change:opacity,transform; }
.anim-ready .entry-content .wp-block-group.alignfull > *.in-view{ opacity:1; transform:none; }

.js-ready .wp-block-cover__inner-container > *{ animation:heroIn 1s var(--ease) both; }
.js-ready .wp-block-cover__inner-container > *:nth-child(1){ animation-delay:.15s; }
.js-ready .wp-block-cover__inner-container > *:nth-child(2){ animation-delay:.32s; }
.js-ready .wp-block-cover__inner-container > *:nth-child(3){ animation-delay:.5s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(30px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }

.ht-ctc-chat, [class*="ht-ctc"]{ animation:waPulse 2.6s ease-in-out infinite; }
@keyframes waPulse{ 0%,100%{ filter:drop-shadow(0 0 4px rgba(37,211,102,.45)); } 50%{ filter:drop-shadow(0 0 16px rgba(37,211,102,.8)); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .anim-ready .entry-content .wp-block-group.alignfull > *{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   MOBILE — responsive stacking, compact type, touch, 60fps
   ============================================================ */
@media (hover:none){
  .wp-block-group.has-border-color::before,
  .wp-block-button__link::after{ display:none !important; }
  .wp-block-group.has-border-color:hover{ transform:none; box-shadow:var(--shadow); border-color:var(--line) !important; }
  .wp-block-group.has-border-color:hover::after{ opacity:0; }
  .wp-block-group.has-border-color:active{ transform:scale(.99); transition:transform .15s ease; }
  .wp-block-button__link:active{ transform:scale(.97); }
}

@media (max-width:1024px){
  .wp-block-group.alignfull{ padding-top:clamp(52px,7vw,92px) !important; padding-bottom:clamp(52px,7vw,92px) !important; }
}

@media (max-width:781px){
  .wp-block-cover{ padding-left:16px !important; padding-right:16px !important; }
  .wp-block-cover .wp-block-cover__inner-container{ padding-left:6px; padding-right:6px; max-width:100%; }
  .wp-block-cover h1{ font-size:clamp(1.5rem,6vw,2.3rem); line-height:1.2; overflow-wrap:break-word; }
  h2.wp-block-heading{ font-size:clamp(1.55rem,6vw,2.1rem); }
  h3.wp-block-heading{ font-size:1.18rem; }
  .has-large-font-size{ font-size:1.02rem !important; line-height:1.65; }
  body{ line-height:1.72; }

  .wp-block-group.alignfull{ padding:46px 16px !important; }
  .wp-block-columns{ gap:16px !important; flex-wrap:wrap !important; }
  .wp-block-column{ flex-basis:100% !important; }
  .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child):not(:has(.has-border-color)) .wp-block-column{ flex-basis:calc(50% - 8px) !important; }

  /* Perf: drop the shine + heavy stuff for 60fps */
  #masthead .site-header-row,.site-header .site-header-row,
  #masthead.is-stuck .site-header-row,.site-header.is-stuck .site-header-row{ backdrop-filter:none !important; background:rgba(255,255,255,.97) !important; }

  /* CTAs: full-width, big thumb targets */
  .wp-block-buttons{ flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
  .wp-block-buttons .wp-block-button{ width:100%; }
  .wp-block-button__link{ display:block; width:100%; text-align:center; min-height:54px; padding:17px 22px !important; font-size:.84rem; }

  /* Header: smaller logo, drop wordmark, thumb-friendly menu */
  img.custom-logo{ max-height:58px; padding:5px 0; }
  .site-title,.site-branding .site-title,.header-main .site-title{ display:none !important; }
  .header-navigation a,.mobile-navigation a,.menu-toggle{ min-height:48px; }
  /* Force the Kadence mobile hamburger visible on the light header */
  .mobile-toggle-open-container,.menu-toggle,.drawer-toggle,[class*="mobile-toggle"]{ color:var(--ink) !important; opacity:1 !important; }
  .menu-toggle{ display:inline-flex !important; align-items:center; }
  .menu-toggle-icon,.menu-toggle-icon::before,.menu-toggle-icon::after,
  .mobile-toggle-open-container .menu-toggle-icon{ background-color:var(--ink) !important; }
}

@media (max-width:480px){
  .wp-block-cover h1{ font-size:clamp(1.4rem,6.6vw,1.95rem); }
  .wp-block-group.alignfull{ padding:40px 15px !important; }
}

/* ---- Custom mobile off-canvas menu (desktop: hidden) --------------- */
.kl-burger,.kl-mnav,.kl-mnav-overlay{ display:none; }
@media (max-width:781px){
  #masthead,.site-header,.site-header-row,.site-header-main,.site-main-header-wrap{ z-index:2 !important; }
  html,body{ overflow-x:hidden !important; }
  .wp-block-cover,.wp-block-group.alignfull,.wp-block-columns,.wp-block-column,.wp-block-buttons,.wp-block-button,figure,img{ max-width:100% !important; }
  .wp-block-button__link{ white-space:normal; word-break:break-word; }
  /* Center the logo (hamburger lives top-left) */
  .site-header-main-section-left{ justify-content:center !important; flex:1 1 100% !important; width:100% !important; }
  .site-branding,.site-header-item{ margin-left:auto !important; margin-right:auto !important; }
  .kl-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    position:fixed; top:20px; left:16px; right:auto; z-index:2147483647;
    width:48px; height:48px; padding:0 11px;
    background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 8px 22px rgba(15,27,45,.16); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .kl-burger span{ display:block; height:2.5px; width:100%; background:var(--ink); border-radius:2px;
    transition:transform .3s var(--ease), opacity .25s ease; }
  .kl-nav-open .kl-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .kl-nav-open .kl-burger span:nth-child(2){ opacity:0; }
  .kl-nav-open .kl-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .kl-mnav-overlay{ display:block; position:fixed; inset:0; z-index:100000;
    background:rgba(7,12,20,.5); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s; }
  .kl-nav-open .kl-mnav-overlay{ opacity:1; visibility:visible; transition:opacity .35s ease; }

  .kl-mnav{ display:block; position:fixed; top:0; right:0; bottom:0; z-index:100001;
    width:82%; max-width:340px; transform:translateX(100%); visibility:hidden;
    background:#fff; box-shadow:-18px 0 55px rgba(15,27,45,.22);
    transition:transform .4s var(--ease), visibility 0s .4s; padding:88px 0 32px; overflow-y:auto; }
  .kl-nav-open .kl-mnav{ transform:translateX(0); visibility:visible; transition:transform .4s var(--ease); }
  .kl-mnav .kl-mnav-list{ list-style:none; margin:0; padding:0; }
  .kl-mnav .kl-mnav-list > li{ border-bottom:1px solid var(--line-2); }
  .kl-mnav .kl-mnav-list a{ display:flex; align-items:center; padding:15px 26px; min-height:54px;
    color:var(--ink) !important; font-weight:500; font-size:1.04rem; text-decoration:none; }
  .kl-mnav .kl-mnav-list a:hover,.kl-mnav .kl-mnav-list a:active{ background:var(--bg-soft); color:var(--gold) !important; }
  .kl-mnav .sub-menu{ list-style:none; margin:0; padding:0 0 6px 16px; background:var(--bg-soft); }
  .kl-mnav .sub-menu a{ min-height:46px; padding:11px 26px; font-size:.96rem; color:var(--text) !important; }
}
