/* ==========================================================================
   V-render / Astra child theme — design system stylesheet
   ==========================================================================

   HOW THIS FILE IS STRUCTURED, AND WHY:

   1. :root CSS custom property overrides — this is the primary mechanism.
      Astra's own dynamic CSS (generated from the Customizer) references a
      9-swatch "Global Color Palette" through CSS variables named
      --ast-global-color-0 through --ast-global-color-8. Overriding those
      variables here means Astra's own built-in components (buttons, menus,
      headings that use the palette) pick up our colors automatically,
      without needing to know Astra's internal Customizer option names —
      which change between versions. This is more durable than trying to
      rewrite the astra-settings database option directly.

      The exact usage of each of the 9 swatches varies slightly by which
      Astra element is reading it, so double-check Appearance > Customize >
      Global > Colors once after activating — if any swatch looks assigned
      to the "wrong" role on your specific install, just swap which value
      sits at which index below. It's plain CSS, safe to tweak.

   2. Low-specificity element selectors (body, h1–h6, a, .button, etc.) —
      these set the *default* look for any content NOT built in Elementor:
      default WP pages/posts, comments, search forms, 404 page, etc.
      Deliberately kept to plain element/class selectors with NO !important,
      so that:
        - Elementor widgets you've explicitly styled (which apply via more
          specific selectors or inline styles) continue to override these
          defaults exactly as expected.
        - Elementor widgets left at "default" inherit this design system
          instead of Astra's stock look.
   ========================================================================== */

:root{
	/* ---- design tokens (source of truth) ---- */
	--vcs-paper:      #FAF7F2;
	--vcs-card:       #F0EAE0;
	--vcs-ink:        #15130F;
	--vcs-ink-soft:   #5C584F;
	--vcs-accent:     #CF2D26;
	--vcs-accent-ink: #7A1712;
	--vcs-olive:      #4B5A3A;
	--vcs-line:       rgba(21,19,15,0.12);
	--vcs-white:      #FFFFFF;

	/* ---- Astra's Global Color Palette (best-effort slot mapping —
	   verify once in Customize > Global > Colors and adjust if a
	   particular slot renders somewhere unexpected on your install) ---- */
	--ast-global-color-0: var(--vcs-accent);      /* Primary / buttons / links */
	--ast-global-color-1: var(--vcs-accent-ink);  /* Secondary / link hover */
	--ast-global-color-2: var(--vcs-ink);         /* Headings */
	--ast-global-color-3: var(--vcs-ink-soft);    /* Body text */
	--ast-global-color-4: var(--vcs-paper);       /* Site background */
	--ast-global-color-5: var(--vcs-card);        /* Section / alternate background */
	--ast-global-color-6: var(--vcs-white);       /* White / card surfaces */
	--ast-global-color-7: var(--vcs-line);        /* Borders / dividers */
	--ast-global-color-8: var(--vcs-ink);         /* Dark sections / footer */
}

/* ---- base ---------------------------------------------------------- */
body{
	background: var(--vcs-paper);
	color: var(--vcs-ink-soft);
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title{
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vcs-ink);
	line-height: 1.15;
}
h1{ font-weight: 800; }

/* the italic "voice" accent — apply manually with the .vcs-voice class
   inside a block/Elementor text widget when a line should read as the
   editorial pull-quote style used sitewide (e.g. "worth watching") */
.vcs-voice{
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 500;
	color: var(--vcs-accent);
}

a{ color: var(--vcs-accent); text-decoration: none; }
a:hover, a:focus{ color: var(--vcs-accent-ink); }

p{ margin-bottom: 1.2em; }

blockquote{
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 1.25em;
	color: var(--vcs-ink);
	border-left: 2px solid var(--vcs-accent);
	padding-left: 20px;
	margin: 1.5em 0;
}

/* ---- buttons (Astra core buttons, WP core/block buttons, form submits) */
.ast-button,
.button,
button:not(.vcs-lightbox-close):not(.vcs-refine-btn):not(.vcs-undo-btn),
input[type="submit"],
.wp-block-button__link,
.wp-element-button{
	background: var(--vcs-accent);
	color: #fff;
	border: none;
	border-radius: 100px;
	padding: 13px 24px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	transition: background-color .15s ease;
}
.ast-button:hover,
.button:hover,
button:not(.vcs-lightbox-close):not(.vcs-refine-btn):not(.vcs-undo-btn):hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover{
	background: var(--vcs-accent-ink);
	color: #fff;
}

/* ghost/secondary button variant — apply via .vcs-btn-ghost class */
.vcs-btn-ghost{
	background: transparent;
	color: var(--vcs-ink);
	border: 1px solid var(--vcs-line);
}
.vcs-btn-ghost:hover{
	background: var(--vcs-card);
	color: var(--vcs-ink);
}

/* ---- containers / sections ------------------------------------------ */
.site-content,
.ast-container{
	background: var(--vcs-paper);
}

/* a warm card surface — apply via .vcs-card on a Group/Elementor container
   for the same "editorial warmth" tone used across the case study plugin */
.vcs-card{
	background: var(--vcs-card);
	border-radius: 16px;
	padding: 28px 32px;
}

/* ---- forms (contact forms, comment form, search) --------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select{
	background: #fff;
	border: 1px solid var(--vcs-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	color: var(--vcs-ink);
}
input:focus, textarea:focus, select:focus{
	outline: none;
	border-color: var(--vcs-accent);
}

/* ---- header / nav (Astra structural classes) -------------------------- */
.ast-primary-header-bar,
.site-header{
	background: var(--vcs-paper);
	border-bottom: 1px solid var(--vcs-line);
}
.main-navigation .menu-item > a,
.ast-builder-menu-1 a{
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var(--vcs-ink);
}
.site-title, .site-title a{
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--vcs-ink);
}

/* ---- footer ------------------------------------------------------------ */
.site-footer,
.ast-small-footer{
	background: var(--vcs-ink);
	color: #B7B1A2;
}
.site-footer a{ color: #fff; }

/* ---- kicker / eyebrow helper — matches the plugin's .vcs-kicker style,
   available for use in a Heading block or Elementor text widget */
.vcs-kicker{
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--vcs-accent);
}

@media (max-width: 780px){
	h1{ font-size: 32px; }
}