/*
Theme Name: Its Personal
Theme URI: https://itspersonal.sg
Description: Custom child theme for Its Personal. Sales-First ABM consultancy. Extends Kadence with full brand token system from design system v1.3.
Author: Its Personal
Author URI: https://itspersonal.sg
Template: kadence
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itspersonal
*/

/* =============================================================
   BRAND TOKEN SYSTEM — sourced from ItsPersonal_DESIGN_SYSTEM_v1_3.md
   ============================================================= */
:root {
  /* ---------- Locked palette ---------- */
  --ip-terracotta: #7A3828;
  --ip-sienna:     #C4714A;
  --ip-copper:     #EDE0D8;
  --ip-linen:      #F5EDE7;
  --ip-parchment:  #FDFAF8;
  --ip-sage:       #4A6858;
  --ip-charcoal:   #1E1A18;
  --ip-ash:        #8A7A74;

  /* ---------- Derived dividers ---------- */
  --ip-divider:      #E5DAD2;   /* hairline on Linen/Parchment */
  --ip-divider-soft: #EFE5DC;   /* hairline on Parchment nav */
  --ip-divider-dark: #2a2522;   /* hairline on Charcoal */

  /* ---------- Semantic surface roles ---------- */
  --bg:        var(--ip-parchment);
  --bg-soft:   var(--ip-linen);
  --bg-card:   var(--ip-copper);
  --bg-dark:   var(--ip-charcoal);
  --bg-hero:   var(--ip-terracotta);
  --fg:        var(--ip-charcoal);
  --fg-muted:  var(--ip-ash);
  --fg-on-dark: var(--ip-parchment);
  --accent:    var(--ip-terracotta);

  /* ---------- Type families ---------- */
  --font-sans:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Caveat", cursive;

  /* ---------- Type scale (locked from design system v1.3) ---------- */
  --fs-wordmark:    clamp(64px, 10vw, 128px);  /* PJS 800, -0.045em */
  --fs-display:     clamp(48px, 6vw, 84px);    /* PJS 300, -0.02em */
  --fs-h1:          clamp(40px, 5vw, 64px);    /* PJS 300 */
  --fs-h2:          clamp(32px, 3.5vw, 44px);  /* PJS 700 */
  --fs-h3:          28px;                       /* PJS 700 */
  --fs-h4:          22px;                       /* PJS 700 */
  --fs-lede:        22px;
  --fs-body:        18px;
  --fs-small:       14px;
  --fs-meta:        12px;
  --fs-label:       11px;
  --fs-tagline:     clamp(36px, 5vw, 64px);    /* Caveat — Primary Lockup */
  --fs-script-md:   48px;
  --fs-script-sm:   28px;

  /* ---------- Letter-spacing ---------- */
  --ls-display:  -0.04em;
  --ls-tight:    -0.02em;
  --ls-snug:     -0.015em;
  --ls-wordmark: -0.045em;
  --ls-label:     0.22em;
  --ls-meta:      0.18em;

  /* ---------- Line height ---------- */
  --lh-wordmark: 1.0;
  --lh-display:  1.15;
  --lh-heading:  1.2;
  --lh-body:     1.65;
  --lh-tagline:  1.1;

  /* ---------- Spacing scale ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  56px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* ---------- Radii ---------- */
  --r-card:  4px;
  --r-pill:  999px;

  /* ---------- Motion ---------- */
  --ease-quiet:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    160ms;
  --dur-med:     280ms;
  --dur-slow:    600ms;
}

/* =============================================================
   BODY DEFAULTS
   ============================================================= */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ip-terracotta); color: var(--ip-parchment); }

/* =============================================================
   HIDE Kadence's auto page-title hero on pages with custom hero.
   Front page uses front-page.php which bypasses Kadence header
   entirely; About + Contact use page.php with Kadence header,
   so we hide the entry-hero block via CSS.
   ============================================================= */
body.page-id-19 .entry-hero,
body.page-id-20 .entry-hero,
body.page-id-19 .kadence-breadcrumbs,
body.page-id-20 .kadence-breadcrumbs {
  display: none !important;
}
body.page-id-19 #primary,
body.page-id-20 #primary { padding-top: 0 !important; }
body.page-id-19 .content-container,
body.page-id-20 .content-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.page-id-19 #main,
body.page-id-20 #main { padding: 0; }
body.page-id-19 .entry-content,
body.page-id-20 .entry-content { max-width: none; }

/* =============================================================
   MOBILE RESPONSIVE (existing pages — About, Contact)
   The morph homepage has its own mobile rules in homepage-morph.css.
   ============================================================= */
@media (max-width: 768px) {
  body.page-id-19 .alignfull[style*="padding-top"],
  body.page-id-20 .alignfull[style*="padding-top"] {
    padding-top: clamp(64px, 12vw, 100px) !important;
    padding-bottom: clamp(64px, 12vw, 100px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.page-id-19 .wp-block-cover.alignfull,
  body.page-id-20 .wp-block-cover.alignfull {
    padding-top: clamp(80px, 14vw, 140px) !important;
    padding-bottom: clamp(80px, 14vw, 140px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.page-id-19 .wp-block-columns,
  body.page-id-20 .wp-block-columns { flex-wrap: wrap !important; }
  body.page-id-19 .wp-block-columns > .wp-block-column,
  body.page-id-20 .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
  body.page-id-19 .wp-block-cover[style*="aspect-ratio:1"],
  body.page-id-20 .wp-block-cover[style*="aspect-ratio:1"] {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Buttons: smooth hover */
.wp-block-button .wp-block-button__link { transition: background-color 0.2s ease, color 0.2s ease; }
a { transition: color 0.15s ease, border-color 0.15s ease; }


/* =============================================================
   SHARED BRAND CHROME — nav + footer
   Used by front-page.php (homepage morph) and page-inner.php
   (About, Contact, Privacy, Terms, Cookies). Lives here in the
   always-loaded child stylesheet so inner pages get the same
   chrome without depending on homepage-morph.css.
   ============================================================= */

/* ---- Nav (shared across all pages; markup = nav.php) ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(253,250,248,0);border-bottom:1px solid transparent;transition:background .25s var(--ease-quiet),border-color .25s var(--ease-quiet),backdrop-filter .25s var(--ease-quiet)}
.nav.is-stuck{background:rgba(253,250,248,.92);backdrop-filter:blur(10px);border-bottom-color:var(--ip-divider-soft)}
.nav-inner{max-width:1200px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:14px;position:relative}
.nav-mark{font-weight:800;letter-spacing:-.045em;font-size:21px;text-decoration:none;white-space:nowrap;color:var(--ip-charcoal)!important;margin-right:auto;z-index:2}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:30px;height:24px;cursor:pointer;z-index:2}
.nav-burger span{display:block;height:2px;width:24px;background:var(--ip-charcoal);border-radius:2px;transition:transform .25s var(--ease-quiet),opacity .2s var(--ease-quiet)}
.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(253,250,248,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--ip-divider-soft);padding:4px 24px 18px}
.nav-toggle:checked~.nav-links{display:flex}
.nav .nav-links a:not(.nav-cta){font-size:16px;font-weight:500;color:var(--ip-charcoal)!important;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--ip-divider-soft)}
.nav .nav-links a:not(.nav-cta):hover{color:var(--ip-terracotta)!important}
.nav-cta{font-size:13px;font-weight:600;color:var(--ip-parchment)!important;background:var(--ip-charcoal);padding:10px 16px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;transition:background .25s var(--ease-quiet)}
.nav-cta:hover{background:var(--ip-terracotta);color:var(--ip-parchment)!important}
.nav-cta-desk{display:none}
.nav-cta-mobile{align-self:flex-start;margin-top:16px}
.nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(min-width:880px){
.nav-burger{display:none}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;padding:18px 32px;gap:24px}
.nav-mark{justify-self:start;margin-right:0;font-size:22px}
.nav-links{display:flex;flex-direction:row;gap:30px;position:static;background:none;backdrop-filter:none;border:none;padding:0;justify-self:center;align-items:center}
.nav .nav-links a:not(.nav-cta){font-size:14px;padding:0 0 2px;border-bottom:1px solid transparent}
.nav .nav-links a:not(.nav-cta):hover{border-bottom-color:var(--ip-terracotta)}
.nav-cta-mobile{display:none}
.nav-cta-desk{display:inline-block;justify-self:end}
}

/* ---- Footer (shared by homepage + inner pages) ---- */
body.front-page-morph footer,
body.inner-page-morph footer {
  background: var(--ip-charcoal);
  color: var(--ip-ash);
  padding: 64px 24px 40px;
}
.foot-inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
.foot-mark {
  font-weight: 800; letter-spacing: -.04em; font-size: 24px;
  color: var(--ip-parchment); margin-bottom: 12px;
}
.foot-blurb { font-size: 13px; line-height: 1.55; max-width: 320px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.foot-col h5 {
  font-size: var(--fs-label); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--ip-sienna);
  margin-bottom: 12px; font-weight: 600;
}
.foot-col a {
  display: block; font-size: 13px; color: var(--ip-ash);
  text-decoration: none; padding: 5px 0;
}
.foot-col a:hover { color: var(--ip-parchment); }
.foot-col span {
  display: block; font-size: 13px;
  color: var(--ip-ash); font-style: italic;
}
.foot-base {
  max-width: 1120px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--ip-divider-dark);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--ip-ash);
}
@media (min-width: 720px) {
  body.front-page-morph footer,
  body.inner-page-morph footer { padding: 80px 32px 48px; }
  .foot-inner { grid-template-columns: 2fr 3fr; gap: 64px; }
  .foot-base { flex-direction: row; justify-content: space-between; }
}

/* =============================================================
   INNER PAGES — page-inner.php template
   Hide Kadence chrome leftovers (defensive, in case the page
   template ever falls back) and give the page content a parchment
   canvas that flows under the fixed nav.
   ============================================================= */
body.inner-page-morph {
  background: var(--ip-parchment);
  color: var(--ip-charcoal);
  font-family: var(--font-sans);
}
body.inner-page-morph .inner-main {
  /* The first block of each legal page already pads top by 160px
     to clear the fixed nav; About/Contact have their own hero. */
  min-height: 60vh;
}
body.inner-page-morph .entry-hero,
body.inner-page-morph .entry-header,
body.inner-page-morph .site-header,
body.inner-page-morph .site-footer { display: none !important; }

/* Inner pages don't have the morph scroll JS that toggles .is-stuck on
   the nav, so the nav stays transparent by default and content scrolls
   visibly underneath. Force the stuck state always on inner pages. */
body.inner-page-morph .nav {
  background: rgba(253, 250, 248, .92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--ip-divider-soft);
}


/* =============================================================
   CookieYes (cky- prefix) brand overrides
   ============================================================= */
.cky-consent-container,
.cky-consent-bar,
.cky-modal {
  font-family: var(--font-sans) !important;
  background: var(--ip-charcoal) !important;
  color: var(--ip-parchment) !important;
  border-color: var(--ip-divider-dark) !important;
}
.cky-title,
.cky-banner-content h2,
.cky-modal h2,
.cky-notice-group h2 {
  color: var(--ip-parchment) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
.cky-notice-des,
.cky-banner-content p,
.cky-notice-group p,
.cky-modal p {
  color: var(--ip-copper) !important;
  font-family: var(--font-sans) !important;
}
.cky-notice-des a,
.cky-banner-content a,
.cky-notice-group a {
  color: var(--ip-sienna) !important;
  text-decoration: underline !important;
}
button.cky-btn,
.cky-btn,
button[class*="cky-btn"] {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  transition: background 0.25s var(--ease-quiet), color 0.25s var(--ease-quiet) !important;
}
button.cky-btn-accept,
button[data-cky-tag="accept-button"] {
  background: var(--ip-terracotta) !important;
  color: var(--ip-parchment) !important;
  border: 0 !important;
}
button.cky-btn-accept:hover,
button[data-cky-tag="accept-button"]:hover {
  background: var(--ip-parchment) !important;
  color: var(--ip-charcoal) !important;
}
button.cky-btn-reject,
button.cky-btn-customize,
button[data-cky-tag="reject-button"],
button[data-cky-tag="settings-button"],
button[data-cky-tag="detail-category-preview-button"] {
  background: transparent !important;
  color: var(--ip-parchment) !important;
  border: 1px solid var(--ip-parchment) !important;
}
button.cky-btn-reject:hover,
button.cky-btn-customize:hover,
button[data-cky-tag="reject-button"]:hover,
button[data-cky-tag="settings-button"]:hover {
  background: var(--ip-parchment) !important;
  color: var(--ip-charcoal) !important;
}