/*
Theme Name: Systemized Life AI OS
Theme URI: https://systemizedlife.pro
Author: Systemized Life Pro
Author URI: https://systemizedlife.pro
Description: Light luxury marketing + portal theme for Systemized Life AI OS. Gutenberg-friendly, fast, minimal, premium gold accents.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: systemized-life-ai
Tags: one-column, two-columns, custom-menu, editor-style, featured-images, block-styles
*/

:root{
  --bg: #F7F4EF;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;

  /* Luxury readable text */
  --text: #2B231E;      /* deep warm brown */
  --muted: #6B645A;

  --line: #E6DFD4;
  --gold: #D4AF37;
  --gold-2:#B88915;

  /* NEW: Solid gold system (buttons) */
  --gold-solid: #C9A227;   /* rich premium gold */
  --gold-hover: #B8921F;   /* darker on hover */
  --gold-active:#9E7A14;   /* pressed state */
  --brown-dark:#2F2722;

  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.06);

  --radius: 18px;
  --max: 1120px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family: var(--font);

  /* Slightly richer luxury background (still light + fast) */
  background:
    radial-gradient(1200px 700px at 15% 0%, #fff 0%, var(--bg) 55%, #f2ede3 100%);

  color: var(--text);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%;height:auto}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.section{padding:64px 0}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover{
  box-shadow: var(--shadow-soft);
  border-color: rgba(212,175,55,.22);
}
.card.pad{padding:22px}

.row{display:flex;gap:18px;flex-wrap:wrap}
.col{flex:1 1 280px}

/* Typography */
.kicker{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--muted);
}
.h1{font-size:46px;line-height:1.1;margin:10px 0 10px;color:var(--text)}
.h2{font-size:28px;line-height:1.2;margin:0 0 10px;color:var(--text)}
.p{color:var(--muted);max-width:65ch}

/* Navigation */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(150%) blur(10px);
  background:rgba(247,244,239,.75);
  border-bottom:1px solid rgba(230,223,212,.75);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(145deg, var(--gold) 0%, #f7e7a9 45%, var(--gold-2) 100%);
  box-shadow: 0 10px 24px rgba(212,175,55,.18);
}
.brand b{font-weight:700}

/* Menu base */
.menu, .nav-menu{
  list-style:none;
  margin:0;
  padding:0;
}
.menu{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.menu a{padding:8px 10px;border-radius:12px}
.menu a:hover{background:rgba(212,175,55,.10)}

/* Dropdown (single clean copy — removed duplicates) */
.menu > li{ position:relative; }
.menu > li > a{ display:inline-flex; padding:8px 10px; border-radius:12px; }

.menu .sub-menu{
  list-style:none;
  margin:0;
  padding:10px;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:240px;
  border-radius:16px;
  border:1px solid rgba(230,223,212,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  display:none;
  z-index:999;
}
.menu li:hover > .sub-menu{ display:block; }
.menu .sub-menu li a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color: var(--muted);
  font-weight:600;
}
.menu .sub-menu li a:hover{
  background: rgba(212,175,55,.10);
  color: var(--text);
}

/* Mobile dropdown: keep simple */
@media (max-width: 980px){
  .menu{ justify-content:flex-start; }
  .menu .sub-menu{
    position:static;
    display:block;
    border:none;
    box-shadow:none;
    background:transparent;
    padding:8px 0 0;
  }
}

/* ============================
   Buttons (SOLID GOLD VERSION)
   ============================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  font-weight:600;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .12s ease,
    box-shadow .15s ease,
    color .15s ease,
    filter .15s ease;
}

/* Premium hover for all buttons */
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.btn:active{
  transform: translateY(0);
  box-shadow: none;
}

/* PRIMARY = solid gold */
.btn.primary{
  background: var(--gold-solid);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--brown-dark);
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(201,162,39,.28);
}
.btn.primary:hover{
  background: var(--gold-hover);
  box-shadow: 0 12px 26px rgba(201,162,39,.34);
}
.btn.primary:active{
  background: var(--gold-active);
  box-shadow: 0 6px 14px rgba(201,162,39,.28);
}

/* SECONDARY buttons = premium white w/ gold border */
.btn:not(.primary){
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(201,162,39,.35);
  color: var(--brown-dark);
  font-weight: 650;
}
.btn:not(.primary):hover{
  background: rgba(201,162,39,.12);
  border-color: rgba(201,162,39,.55);
}

/* small */
.btn.small{
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-size:13px;color:var(--muted);
}

/* Hero */
.hero{ padding:56px 0 18px; }
.hero-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;align-items:stretch}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} .h1{font-size:38px} }
.hero-card{padding:22px}

.hero-mock{
  height:100%;
  display:flex;flex-direction:column;gap:12px;
}
.mock-line{height:12px;border-radius:999px;background:#efe9df;border:1px solid #e7dfd2}
.mock-box{
  flex:1;border-radius:var(--radius);
  background:linear-gradient(180deg,#fff, #fbf9f4);
  border:1px solid var(--line);
  position:relative;overflow:hidden
}
.mock-box:before{
  content:"";
  position:absolute;inset:-40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.22), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(184,137,21,.18), transparent 55%);
  transform: rotate(10deg);
}

/* Grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 900px){ .grid3{grid-template-columns:1fr} }

/* Persona kicker clarity (homepage grid) */
.grid3 .kicker{
  color: #4a453f;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 1;
}

/* Notice */
.notice{
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  color:var(--muted)
}

/* Gutenberg baseline */
.wp-block{max-width: var(--max)}
.wp-site-blocks, .wp-block-group__inner-container{max-width: var(--max); margin:0 auto}

/* Footer (Lovable-style) */
.site-footer{
  padding: 56px 0 28px;
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.45);
}
.footer-grid{
  display:grid;
  gap: 42px;
  align-items:start;
}
.footer-grid-4{
  grid-template-columns: 1.25fr 1fr;
}
.footer-brand .kicker{ margin-bottom: 10px; }
.footer-headline{ margin: 6px 0 10px; font-size: 28px; line-height: 1.2; color: var(--text); }
.footer-copy{ max-width: 52ch; }

.footer-links-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 64px;
}
.footer-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.footer-menu{ list-style:none; padding:0; margin:0; }
.footer-menu li{ margin: 14px 0; }
.footer-menu a{
  display:inline-block;
  font-weight: 500;
  color: rgba(107,100,90,.95);
  text-decoration:none;
  transition: color .15s ease, transform .15s ease;
}
.footer-menu a:hover{
  color: var(--gold-2);
  transform: translateX(1px);
}

/* Social icon pills */
.social-row{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.social-ico{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(230,223,212,.95);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
.social-ico svg{
  width: 18px;
  height: 18px;
  fill: rgba(107,100,90,.95);
}
.social-ico:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.55);
  background: rgba(212,175,55,.10);
  filter: brightness(.99);
}

.footer-bottom{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(230,223,212,.70);
  color: var(--muted);
}

@media (max-width: 980px){
  .footer-grid-4{ grid-template-columns: 1fr; }
  .footer-links-grid{ gap: 26px 30px; }
}
@media (max-width: 620px){
  .footer-links-grid{ grid-template-columns: 1fr; }
}

/* Locked preview */
.locked-wrap{position:relative}
.locked-blur{
  filter: blur(10px);
  opacity:.55;
  pointer-events:none;
  user-select:none;
}
.locked-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.locked-overlay .card{max-width:560px}

/* Personas hub */
.gold{ color: var(--gold); }

.personas-hero{
  position: relative;
  overflow: hidden;
}
.personas-hero:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 20%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(184,137,21,.12), transparent 60%);
  transform: rotate(8deg);
  pointer-events:none;
}

.personas-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
.persona-card{
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.persona-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.persona-badge{ flex: 0 0 auto; }
.persona-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Soft left accent glow per persona */
.persona-card:before{
  content:"";
  position:absolute;
  left:-80px;
  top: -80px;
  width:180px;
  height:180px;
  border-radius: 999px;
  opacity: .30;
  pointer-events:none;
}
.tone-adhd:before{ background: radial-gradient(circle, rgba(156,108,255,.22), transparent 60%); }
.tone-exec:before{ background: radial-gradient(circle, rgba(0,153,255,.18), transparent 60%); }
.tone-parents:before{ background: radial-gradient(circle, rgba(0,166,126,.18), transparent 60%); }

@media (max-width: 860px){
  .persona-top{ flex-direction:column; }
}

/* Personas hub polish (no icons, high-clarity) */
.personas-wrap .personas-hero{ text-align:center; margin-bottom: 24px; }
.personas-wrap .personas-subhead{ margin: 10px auto 0; max-width: 70ch; }

.persona-name{
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.persona-desc{
  margin: 0;
  color: var(--muted);
  max-width: 75ch;
}

/* Legal Page Variant (Readable) */
.legal-section { padding: 54px 0 64px; }
.legal-container{ max-width: 880px; }

.legal-article{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
@media (max-width: 720px){
  .legal-article{ padding: 18px; }
}
.legal-header{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.legal-kicker{
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--muted);
}
.legal-title{
  margin: 10px 0 6px;
  font-size: 36px;
  line-height: 1.15;
  color: var(--text);
}
@media (max-width: 720px){
  .legal-title{ font-size: 30px; }
}
.legal-meta{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.legal-content{
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
.legal-content p{ margin: 0 0 14px; }
.legal-content h2{
  margin: 26px 0 10px;
  font-size: 22px;
  line-height: 1.25;
}
.legal-content h3{
  margin: 20px 0 8px;
  font-size: 18px;
  line-height: 1.35;
}
.legal-content ul,
.legal-content ol{
  margin: 10px 0 16px 20px;
  padding: 0;
}
.legal-content li{ margin: 8px 0; }
.legal-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content blockquote{
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(212,175,55,.55);
  background: rgba(255,255,255,.55);
  color: var(--muted);
  border-radius: 12px;
}
.legal-content hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

/* Compact "What you get" strip */
.value-strip .value-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}
.value-strip .value-list li{ margin: 8px 0; }
.value-strip .value-list b{ color: var(--text); font-weight: 700; }
/* =========================================
   LUXURY CONTRAST BOOST (desktop-friendly)
   Paste at END of style.css
   ========================================= */

/* 1) Slightly richer background (subtle) */
body{
  background:
    radial-gradient(1200px 700px at 15% 0%,
      #fff 0%,
      #F4EFE6 52%,
      #EDE5D7 100%);
}

/* 2) Give cards/boxes a soft champagne tint instead of pure white */
:root{
  --surface: rgba(255,255,255,.86);
  --surface-2: rgba(255,255,255,.72);
}

/* This targets your main “boxes” */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,249,235,.86) 100%);
  border-color: rgba(230,223,212,.95);
}

/* Optional: a tiny gold edge glow (very light) */
.card{
  box-shadow:
    0 12px 30px rgba(0,0,0,.08),
    0 10px 26px rgba(201,162,39,.08);
}

/* 3) Make in-card text a touch bolder + higher contrast */
.h1, .h2{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.kicker{
  font-weight: 800;
  color: rgba(47,39,34,.70);
}

.p{
  color: rgba(47,39,34,.72); /* darker than muted */
  font-weight: 500;
}

/* 4) Make notices match the champagne look */
.notice, .badge{
  background: rgba(255,250,238,.75);
  border-color: rgba(230,223,212,.95);
}

/* 5) Desktop-only slight contrast bump (keeps mobile soft) */
@media (min-width: 980px){
  .card.pad{ padding: 24px; }
  .p{ font-size: 16px; }
}

/* 6) (Optional) Button text a bit bolder for “premium” */
.btn{
  font-weight: 700;
}
/* =========================================
   HEADER / NAV TYPOGRAPHY (Premium Contrast)
   Paste at END of style.css
   ========================================= */

/* Brand: make it larger + darker than nav items */
.brand b{
  font-size: 18px;            /* brand bigger */
  font-weight: 800;           /* thick */
  letter-spacing: -0.01em;
  color: var(--text);         /* deep warm brown */
}

/* Nav links: larger, thicker, dark brown */
.nav .menu > li > a,
.nav .menu > a,
.nav .nav-menu > li > a{
  font-size: 15.5px;          /* larger */
  font-weight: 700;           /* thicker */
  color: rgba(43,35,30,.92);  /* dark brown */
  letter-spacing: -0.01em;
}

/* Hover: premium gold tint, not opacity fade */
.nav .menu > li > a:hover,
.nav .menu > a:hover,
.nav .nav-menu > li > a:hover{
  background: rgba(212,175,55,.10);
  color: rgba(43,35,30,.98);
  opacity: 1; /* overrides your global a:hover opacity */
}

/* Optional: tighten nav vertical rhythm */
.nav-inner{
  padding: 12px 0;
}

/* Mobile: keep readable */
@media (max-width: 900px){
  .brand b{ font-size: 17px; }
  .nav .menu > li > a,
  .nav .menu > a,
  .nav .nav-menu > li > a{
    font-size: 15px;
  }
}


/* ================================
   Weekly Review page: make hero fill the card
   ================================ */

/* 1) Ensure the FIRST card/hero block spans full width */
.page-id-885 .page-content > .wp-block-group:first-child,
.page-id-885 .page-content > .wp-block-columns:first-child,
.page-id-885 .page-content > .wp-block-cover:first-child {
  width: 100% !important;
  max-width: none !important;
}

/* 2) If the hero uses Gutenberg Columns, force columns to stretch */
.page-id-885 .page-content > .wp-block-columns:first-child {
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 48px !important;
}

/* 3) Make each hero column actually use the available width */
.page-id-885 .page-content > .wp-block-columns:first-child > .wp-block-column {
  flex: 1 1 0 !important;
  max-width: none !important;
}

/* 4) Prevent inner containers from re-capping width */
.page-id-885 .page-content > .wp-block-columns:first-child .wp-block-group,
.page-id-885 .page-content > .wp-block-group:first-child .wp-block-group {
  max-width: none !important;
  width: 100% !important;
}


/* Find the hero by heading and stretch its nearest layout wrapper */
.page-id-885 h1,
.page-id-885 h2 {
  max-width: none !important;
}

/* Match Weekly Review to global marketing width */
.page-id-885 .section .container{
  max-width: var(--max) !important;
  width: 100% !important;
  margin: 0 auto !important;
}