/* ============================================
   VITA NOVA — TOKENS, BASE & POST CONTENT
   Loaded on the front end (before style.css) and inside
   the block editor, so it only styles elements, post
   content and blocks. Layout lives in style.css.
   ============================================ */

/* ============================================
   TOKENS
   ============================================ */
:root{
  --green-900:#152218;
  --green-800:#1c2e21;
  --green-700:#24392a;
  --gold-600:#a5854f;
  --gold-500:#b99f6f;
  --gold-300:#d8c8a3;
  --gold-100:#eee3cc;
  --cream-100:#f8f6f0;
  --cream-200:#f3f0e8;
  --cream-300:#ece7db;
  --cream-400:#e4ddcb;
  --ink:#232620;
  --ink-soft:#5c5f56;
  --white:#ffffff;
  --line:#ddd6c4;
  --danger:#a5443a;

  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:1180px;
  --content:720px;

  --shadow-soft:0 4px 18px rgba(30,40,25,0.06);
  --shadow-card:0 10px 30px rgba(30,40,25,0.08);
  --shadow-lifted:0 16px 36px rgba(21,34,24,0.16);
  --ring:0 0 0 3px rgba(165,133,79,0.18);
}

/* ============================================
   BASE ELEMENTS
   ============================================ */
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1rem;
  color:var(--ink);
  background:var(--cream-100);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:var(--green-800);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:1.25;
  color:var(--green-900);
}
::selection{background:var(--gold-100);text-shadow:none;}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;}

/* ============================================
   POST CONTENT TYPOGRAPHY
   ============================================ */
:where(.entry-content,.is-root-container){
  font-size:1.0625rem;
  line-height:1.8;
  color:var(--ink);
  overflow-wrap:break-word;
}
:where(.entry-content,.is-root-container) h1{font-size:clamp(2rem,4vw,2.6rem);}
:where(.entry-content,.is-root-container) h2{font-size:clamp(1.5rem,3vw,1.9rem);}
:where(.entry-content,.is-root-container) h3{font-size:1.4rem;}
:where(.entry-content,.is-root-container) h4{font-size:1.15rem;}
:where(.entry-content,.is-root-container) h5{font-size:1rem;}
:where(.entry-content,.is-root-container) h6{
  font-family:var(--font-sans);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-600);
}

:where(.entry-content,.is-root-container) a:not(.wp-element-button):not(.wp-block-button__link){
  color:var(--green-800);
  text-decoration:underline;
  text-decoration-color:var(--gold-300);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
:where(.entry-content,.is-root-container) a:not(.wp-element-button):not(.wp-block-button__link):hover{
  color:var(--gold-600);
  text-decoration-color:var(--gold-600);
}

:where(.entry-content,.is-root-container) strong{font-weight:600;color:var(--green-900);}
:where(.entry-content,.is-root-container) mark{background:var(--gold-100);color:inherit;padding:0 3px;border-radius:3px;}

/* Lists */
:where(.entry-content,.is-root-container) :where(ul,ol){padding-left:1.4em;}
:where(.entry-content,.is-root-container) li + li{margin-top:0.45em;}
:where(.entry-content,.is-root-container) li::marker{color:var(--gold-600);}
:where(.entry-content,.is-root-container) ol li::marker{font-family:var(--font-serif);font-weight:600;}
:where(.entry-content,.is-root-container) :where(ul,ol) :where(ul,ol){margin-top:0.45em;}

/* Media & captions */
:where(.entry-content,.is-root-container) :where(img,video){border-radius:6px;}
:where(.entry-content,.is-root-container) figcaption,
:where(.entry-content,.is-root-container) .wp-element-caption{
  margin-top:10px;
  font-size:0.82rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-align:center;
}

/* Quotes */
:where(.entry-content,.is-root-container) .wp-block-quote,
:where(.entry-content,.is-root-container) blockquote{
  margin-left:0;
  margin-right:0;
  padding:24px 28px;
  border-left:3px solid var(--gold-500);
  border-radius:0 10px 10px 0;
  background:var(--cream-200);
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.2rem;
  line-height:1.6;
  color:var(--green-800);
}
:where(.entry-content,.is-root-container) blockquote p + p{margin-top:0.8em;}
:where(.entry-content,.is-root-container) blockquote cite{
  display:block;
  margin-top:14px;
  font-family:var(--font-sans);
  font-style:normal;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-600);
}
:where(.entry-content,.is-root-container) .wp-block-pullquote{
  padding:36px 0;
  border-top:2px solid var(--gold-300);
  border-bottom:2px solid var(--gold-300);
  text-align:center;
}
:where(.entry-content,.is-root-container) .wp-block-pullquote blockquote{
  padding:0;
  border:0;
  background:none;
  font-size:clamp(1.3rem,2.6vw,1.6rem);
}

/* Separator: short gold rule, like the hero rule */
:where(.entry-content,.is-root-container) hr,
:where(.entry-content,.is-root-container) .wp-block-separator{
  width:70px;
  height:2px;
  margin-left:auto;
  margin-right:auto;
  border:0;
  background:var(--gold-500);
  opacity:1;
}
:where(.entry-content,.is-root-container) .wp-block-separator.is-style-wide{width:100%;height:1px;background:var(--line);}
:where(.entry-content,.is-root-container) .wp-block-separator.is-style-dots{width:auto;height:auto;background:none;color:var(--gold-500);}

/* Tables */
:where(.entry-content,.is-root-container) .wp-block-table{overflow-x:auto;}
:where(.entry-content,.is-root-container) table{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
  line-height:1.5;
}
:where(.entry-content,.is-root-container) :where(th,td){
  padding:12px 14px;
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
:where(.entry-content,.is-root-container) th,
:where(.entry-content,.is-root-container) thead td{
  background:var(--cream-300);
  font-weight:600;
  color:var(--green-900);
}
:where(.entry-content,.is-root-container) .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:var(--cream-200);}
:where(.entry-content,.is-root-container) .wp-block-table.is-style-stripes{border-bottom:0;}

/* Code */
:where(.entry-content,.is-root-container) code{
  padding:2px 6px;
  border-radius:4px;
  background:var(--cream-300);
  font-family:var(--font-mono);
  font-size:0.88em;
}
:where(.entry-content,.is-root-container) pre{
  padding:20px 22px;
  border-radius:10px;
  background:var(--green-900);
  color:var(--cream-200);
  font-family:var(--font-mono);
  font-size:0.88rem;
  line-height:1.65;
  overflow-x:auto;
}
:where(.entry-content,.is-root-container) pre code{padding:0;background:none;color:inherit;font-size:inherit;}

/* Drop cap */
:where(.entry-content,.is-root-container) .has-drop-cap:not(:focus)::first-letter{
  font-family:var(--font-serif);
  font-size:4.2em;
  font-weight:600;
  line-height:0.8;
  margin:0.06em 0.12em 0 0;
  color:var(--gold-600);
}

/* Buttons */
:where(.entry-content,.is-root-container) .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:2px solid transparent;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
:where(.entry-content,.is-root-container) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background){
  background:transparent;
  border-color:var(--gold-500);
  color:var(--green-900);
}
:where(.entry-content,.is-root-container) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover{
  background:var(--gold-100);
}

/* Details */
:where(.entry-content,.is-root-container) .wp-block-details{
  padding:16px 20px;
  border:1px solid var(--cream-400);
  border-radius:10px;
  background:var(--cream-200);
}
:where(.entry-content,.is-root-container) .wp-block-details summary{
  font-weight:600;
  color:var(--green-900);
  cursor:pointer;
}
:where(.entry-content,.is-root-container) .wp-block-details[open] summary{margin-bottom:10px;}

/* File */
:where(.entry-content,.is-root-container) .wp-block-file{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:1px solid var(--cream-400);
  border-radius:10px;
  background:var(--white);
}
:where(.entry-content,.is-root-container) .wp-block-file .wp-block-file__button{
  padding:8px 18px;
  border-radius:3px;
  background:var(--green-800);
  color:var(--cream-100);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ============================================
   BLOCK STYLE VARIATIONS (inc/block-styles.php)
   ============================================ */

/* Group — Callout */
.wp-block-group.is-style-vitanova-callout{
  padding:22px 24px;
  border:1px solid var(--cream-400);
  border-radius:10px;
  background:var(--cream-300);
}
.wp-block-group.is-style-vitanova-callout > *{margin-block:0;}
.wp-block-group.is-style-vitanova-callout > * + *{margin-block-start:0.6em;}

/* Group — Dark panel (like the program highlight) */
.wp-block-group.is-style-vitanova-panel{
  padding:44px 40px;
  border-radius:14px;
  background:var(--green-800);
  color:var(--cream-300);
}
.wp-block-group.is-style-vitanova-panel :where(h1,h2,h3,h4,h5,h6){color:var(--cream-100);}
.wp-block-group.is-style-vitanova-panel strong{color:var(--cream-100);}
.wp-block-group.is-style-vitanova-panel a:not(.wp-element-button):not(.wp-block-button__link){color:var(--gold-300);text-decoration-color:rgba(216,200,163,0.5);}
.wp-block-group.is-style-vitanova-panel .is-style-vitanova-eyebrow{color:var(--gold-300);}
.wp-block-group.is-style-vitanova-panel .wp-block-button__link:not(.has-background){
  background:var(--gold-500);
  color:var(--green-900);
  font-weight:700;
}
.wp-block-group.is-style-vitanova-panel .wp-block-button__link:not(.has-background):hover{background:var(--gold-300);}
@media (max-width:560px){
  .wp-block-group.is-style-vitanova-panel{padding:30px 22px;}
}

/* List — Checklist with gold check marks */
.wp-block-list.is-style-vitanova-checklist,
ul.is-style-vitanova-checklist{
  list-style:none;
  padding-left:0;
}
.is-style-vitanova-checklist li{
  position:relative;
  padding-left:30px;
}
.is-style-vitanova-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.45em;
  width:18px;
  height:18px;
  background:var(--gold-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Paragraph — Lead */
p.is-style-vitanova-lead{
  font-family:var(--font-serif);
  font-size:clamp(1.2rem,2.2vw,1.4rem);
  line-height:1.55;
  color:var(--green-800);
}

/* Paragraph — Eyebrow */
p.is-style-vitanova-eyebrow{
  font-size:0.74rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-600);
}