/*
Theme Name:   VCA — Violet Crown Analytics
Theme URI:    https://violetcrownanalytics.com
Description:  Custom child theme for Violet Crown Analytics. Built on Kadence. Aubergine and cream, Fraunces and Inter, crown-star ornament. v1.
Author:       Kara Hudson · Violet Crown Analytics
Author URI:   https://violetcrownanalytics.com
Template:     kadence
Version:      1.0.0
Text Domain:  vca-child
*/

/* =========================================================================
   VCA BRAND TOKENS
   Single source of truth. Change a color or font here and it cascades
   across the whole site. Never hard-code these values elsewhere.
   ========================================================================= */

:root {
  /* --- Primary palette: the aubergines --- */
  --vca-aubergine:        #3D1F47;  /* primary brand color */
  --vca-aubergine-light:  #6B3F75;  /* subheads, taglines, secondary text */
  --vca-aubergine-deep:   #2E1838;  /* hover states, deepest contrast */
  --vca-aubergine-mist:   #B89FBE;  /* soft borders, dividers */
  --vca-aubergine-whisper:#EBE3ED;  /* faint section backgrounds */

  /* --- Neutrals --- */
  --vca-cream:            #F5EFE6;  /* primary page background */
  --vca-cream-soft:       #FAF6EE;  /* alternate section background */
  --vca-white:            #FFFFFF;  /* content surfaces */
  --vca-charcoal:         #2A2A2A;  /* body text */
  --vca-text-muted:       #6E6863;  /* captions, fine print */

  /* --- Food-color accents (shared across all Kara Hudson brands) --- */
  --vca-persimmon:        #A8623D;  /* CTAs, link hover */
  --vca-sage:             #4C6B4E;  /* success states, available */
  --vca-honey:            #C9974F;  /* warmth touches, gift program */

  /* --- Typography --- */
  --vca-font-serif:       'Fraunces', Georgia, 'Times New Roman', serif;
  --vca-font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Type scale --- */
  --vca-size-h1:          clamp(2.25rem, 5vw, 3.5rem);   /* 36px → 56px */
  --vca-size-h2:          clamp(1.75rem, 4vw, 2.25rem);  /* 28px → 36px */
  --vca-size-h3:          1.5rem;    /* 24px */
  --vca-size-h4:          1.125rem;  /* 18px */
  --vca-size-body:        1rem;      /* 16px */
  --vca-size-small:       0.875rem;  /* 14px */
  --vca-size-caption:     0.6875rem; /* 11px — for tracked-uppercase labels */

  /* --- Spacing scale --- */
  --vca-space-xs:         0.5rem;
  --vca-space-sm:         1rem;
  --vca-space-md:         1.5rem;
  --vca-space-lg:         2.5rem;
  --vca-space-xl:         4rem;
  --vca-space-2xl:        6rem;

  /* --- Layout --- */
  --vca-content-width:    760px;   /* max line length for prose */
  --vca-wide-width:       1100px;  /* wider container for grids */
  --vca-radius:           4px;     /* small, restrained */
  --vca-radius-card:      8px;
  --vca-border-subtle:    0.5px solid rgba(61, 31, 71, 0.15);
  --vca-border-divider:   0.5px solid rgba(61, 31, 71, 0.25);

  /* --- Tracking (letter-spacing) --- */
  --vca-track-tagline:    0.25em;  /* the 4px-equivalent wide tracking */
  --vca-track-label:      0.1875em;
  --vca-track-display:    0.02em;
}

/* =========================================================================
   GLOBAL TYPE & COLOR
   Override Kadence defaults with our brand.
   ========================================================================= */

body,
.site,
.entry-content {
  background: var(--vca-cream);
  color: var(--vca-charcoal);
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-body);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--vca-font-serif);
  color: var(--vca-aubergine);
  font-weight: 500;
  letter-spacing: var(--vca-track-display);
  line-height: 1.2;
}

h1, .entry-title { font-size: var(--vca-size-h1); }
h2 { font-size: var(--vca-size-h2); }
h3 { font-size: var(--vca-size-h3); }
h4 { font-size: var(--vca-size-h4); }

a {
  color: var(--vca-aubergine);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--vca-persimmon);
}

/* =========================================================================
   HEADER
   Logo sized correctly, no clipping. Nav in clean aubergine.
   ========================================================================= */

.site-header,
.site-branding,
.kadence-header-wrap {
  background: var(--vca-cream);
}

.site-branding img.custom-logo {
  max-height: 70px;
  width: auto;
  /* Prevents the top of the crown-star from getting clipped */
  margin: 8px 0;
}

.main-navigation a,
.header-navigation a {
  font-family: var(--vca-font-sans);
  color: var(--vca-aubergine);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.main-navigation a:hover,
.header-navigation a:hover,
.current-menu-item > a {
  color: var(--vca-persimmon);
}

/* =========================================================================
   HOMEPAGE
   Hide the "Home" page title. Hero sits clean on cream, not on white card.
   ========================================================================= */

.home .entry-header,
.home .page-title,
.home .entry-title,
.page-id-home .entry-title,
.home h1.entry-title {
  display: none;
}

.home .above-entry-meta,
.home .title-above-content {
  display: none;
}

/* Hero row: remove the white card background that was wrapping the hero */
.home .entry-content > .wp-block-kadence-rowlayout:first-of-type,
.home .entry-content > .kadence-row-layout-wrap:first-of-type {
  background: transparent !important;
}

.home .entry-content > .wp-block-kadence-rowlayout:first-of-type .kt-row-column-wrap,
.home .entry-content > .wp-block-kadence-rowlayout:first-of-type .kadence-inner-column-inner {
  background: transparent !important;
}

/* =========================================================================
   CONTENT WRAPPERS
   Proper widths for prose vs full-width sections.
   ========================================================================= */

.entry-content {
  max-width: var(--vca-content-width);
  margin: 0 auto;
  padding: var(--vca-space-lg) var(--vca-space-md);
}

.entry-content > .alignwide {
  max-width: var(--vca-wide-width);
  margin-left: calc((var(--vca-content-width) - var(--vca-wide-width)) / 2);
}

.entry-content > .alignfull {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* =========================================================================
   PROSE — Field Notes article body
   ========================================================================= */

.entry-content p {
  margin-bottom: var(--vca-space-sm);
  color: var(--vca-charcoal);
  font-size: var(--vca-size-body);
  line-height: 1.7;
}

.entry-content p strong {
  color: var(--vca-aubergine);
  font-weight: 600;
}

.entry-content blockquote,
.entry-content .wp-block-pullquote {
  font-family: var(--vca-font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--vca-aubergine);
  border-left: 2px solid var(--vca-aubergine);
  padding-left: var(--vca-space-md);
  margin: var(--vca-space-lg) 0;
}

/* =========================================================================
   ARTICLE META — byline, date, category label
   ========================================================================= */

.entry-meta,
.byline,
.posted-on {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-small);
  color: var(--vca-text-muted);
  letter-spacing: 0.01em;
}

.cat-links,
.entry-categories,
.post-categories {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vca-track-label);
  color: var(--vca-aubergine-light);
}

.cat-links a,
.post-categories a {
  color: var(--vca-aubergine-light);
  text-decoration: none;
}

.cat-links a:hover,
.post-categories a:hover {
  color: var(--vca-persimmon);
}

/* =========================================================================
   BUTTONS
   Aubergine on cream. Restrained. Boutique, not aggressive.
   ========================================================================= */

.wp-block-button__link,
.kadence-blocks-btn-link,
button,
input[type="submit"],
.button {
  background: var(--vca-aubergine);
  color: var(--vca-cream);
  font-family: var(--vca-font-sans);
  font-weight: 500;
  font-size: var(--vca-size-small);
  letter-spacing: 0.04em;
  padding: 0.875rem 2rem;
  border: 0;
  border-radius: var(--vca-radius);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.kadence-blocks-btn-link:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
  background: var(--vca-aubergine-deep);
  color: var(--vca-cream);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--vca-aubergine);
  border: 1px solid var(--vca-aubergine);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--vca-aubergine);
  color: var(--vca-cream);
}

/* =========================================================================
   FOOTER
   Restrained. Aubergine background, cream text, tagline anchored.
   ========================================================================= */

.site-footer {
  background: var(--vca-aubergine);
  color: var(--vca-cream);
  padding: var(--vca-space-xl) var(--vca-space-md);
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-small);
}

.site-footer a {
  color: var(--vca-cream);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--vca-honey);
}

.site-footer .footer-tagline {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vca-track-tagline);
  color: var(--vca-aubergine-mist);
  text-align: center;
}

/* =========================================================================
   FIELD NOTES — Article cards & archive
   Cards inherit category color via class. See template-functions.php
   for how the category class gets applied.
   ========================================================================= */

.field-notes-card {
  background: var(--vca-white);
  border: var(--vca-border-subtle);
  border-radius: var(--vca-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.field-notes-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(61, 31, 71, 0.08);
}

.field-notes-card-cover {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vca-aubergine); /* default; overridden by category class */
}

/* Category-specific cover colors */
.field-notes-card.category-pricing .field-notes-card-cover         { background: var(--vca-aubergine); }
.field-notes-card.category-tools .field-notes-card-cover           { background: var(--vca-persimmon); }
.field-notes-card.category-spreadsheets .field-notes-card-cover    { background: var(--vca-sage); }
.field-notes-card.category-analytics .field-notes-card-cover       { background: var(--vca-honey); }
.field-notes-card.category-case-study .field-notes-card-cover      { background: var(--vca-aubergine-light); }
.field-notes-card.category-industry .field-notes-card-cover        { background: var(--vca-aubergine-deep); }

.field-notes-card-meta {
  padding: var(--vca-space-sm) var(--vca-space-md) 0;
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-caption);
  font-weight: 500;
  letter-spacing: var(--vca-track-label);
  text-transform: uppercase;
  color: var(--vca-aubergine-light);
}

.field-notes-card-title {
  padding: var(--vca-space-xs) var(--vca-space-md);
  font-family: var(--vca-font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--vca-aubergine);
  line-height: 1.25;
}

.field-notes-card-byline {
  padding: 0 var(--vca-space-md) var(--vca-space-sm);
  font-family: var(--vca-font-sans);
  font-size: 0.75rem;
  color: var(--vca-text-muted);
  border-bottom: var(--vca-border-subtle);
}

.field-notes-card-excerpt {
  padding: var(--vca-space-sm) var(--vca-space-md);
  font-family: var(--vca-font-sans);
  font-size: 0.8125rem;
  color: var(--vca-charcoal);
  line-height: 1.55;
  flex: 1;
}

/* =========================================================================
   FIELD NOTES — Single article page
   Removes the duplicate byline that was showing up in content body
   ========================================================================= */

.single-post .entry-content > p:first-child:has(strong:only-child:contains("By ")),
.single-post .entry-content > .has-byline-duplicate {
  display: none;
}

/* =========================================================================
   FORMS — Contact page
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-body);
  color: var(--vca-charcoal);
  background: var(--vca-white);
  border: var(--vca-border-subtle);
  border-radius: var(--vca-radius);
  padding: 0.75rem 1rem;
  width: 100%;
}

input:focus,
textarea:focus {
  outline: 0;
  border-color: var(--vca-aubergine);
  box-shadow: 0 0 0 3px rgba(61, 31, 71, 0.1);
}

label {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-small);
  font-weight: 500;
  color: var(--vca-aubergine);
  letter-spacing: 0.01em;
}

/* =========================================================================
   UTILITY CLASSES
   For use inside content blocks where you want specific brand effects
   ========================================================================= */

.vca-tagline {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vca-track-tagline);
  color: var(--vca-aubergine-light);
}

.vca-eyebrow {
  font-family: var(--vca-font-sans);
  font-size: var(--vca-size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vca-track-label);
  color: var(--vca-aubergine-light);
  display: block;
  margin-bottom: var(--vca-space-xs);
}

.vca-divider {
  border: 0;
  border-top: var(--vca-border-divider);
  margin: var(--vca-space-lg) auto;
  max-width: 80px;
}

.vca-text-center { text-align: center; }
.vca-cream-bg    { background: var(--vca-cream); }
.vca-white-bg    { background: var(--vca-white); }
.vca-aubergine-bg { background: var(--vca-aubergine); color: var(--vca-cream); }

/* =========================================================================
   RESPONSIVE
   Mobile-first adjustments
   ========================================================================= */

@media (max-width: 768px) {
  .entry-content {
    padding: var(--vca-space-md) var(--vca-space-sm);
  }

  .site-branding img.custom-logo {
    max-height: 50px;
  }
}

/* =========================================================================
   PRINT STYLES
   Field Notes that get printed should look like editorial pieces
   ========================================================================= */

@media print {
  body { background: white; color: black; }
  .site-header, .site-footer, nav { display: none; }
  a { color: black; text-decoration: underline; }
  h1, h2, h3 { color: black; }
}