/*
Theme Name:   Herded By Cats
Theme URI:    https://herdedbycats.com
Description:  Purple-led, comic-book child theme for Herded By Cats — Ari Holmes (they/them), cat behaviorist, cat sitting & TNR. Built on the Kadence parent theme. Re-skins the Kadence Global Palette to a purple-forward scheme, loads brand fonts (Bangers / Fredoka / Nunito / Gochi Hand), and adds comic-book styling: thick ink outlines, hard drop-shadows, and pop-color buttons.
Author:       Herded By Cats
Author URI:   https://herdedbycats.com
Template:     kadence
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  herded-by-cats
Tags:         playful, bold, comic, purple, kadence-child
*/

/* =========================================================================
   HERDED BY CATS — BRAND TOKENS (v2: purple + comic book)
   These override Kadence's Global Palette so the whole site (buttons, links,
   headings, backgrounds) picks up the brand colors automatically. You can
   still fine-tune any of these in Appearance → Customize → Colors.
   ========================================================================= */
:root,
body {
  /* --- Kadence Global Palette slots --- */
  --global-palette1: #7C3AED;  /* Purple — primary accent / buttons / links   */
  --global-palette2: #5B21B6;  /* Deep purple — hover / active                */
  --global-palette3: #1B1030;  /* Ink — strongest text / headings            */
  --global-palette4: #4A3B66;  /* Ink-soft — body text                       */
  --global-palette5: #6B5B8A;  /* Muted — subtle text / captions             */
  --global-palette6: #ECE1FF;  /* Lilac tint — subtle background / cards      */
  --global-palette7: #F6F0FF;  /* Paper — base page background (light lilac)  */
  --global-palette8: #FFFFFF;  /* White                                      */
  --global-palette9: #1B1030;  /* Ink — dark sections / footer background     */

  /* --- Pop accents (use with the utility classes / button styles below) --- */
  --hbc-purple:   #7C3AED;
  --hbc-purple-dk:#5B21B6;
  --hbc-lilac:    #C4B5FD;
  --hbc-pink:     #FF5DA2;
  --hbc-yellow:   #FFD23F;
  --hbc-teal:     #22D3C5;
  --hbc-ink:      #1B1030;

  /* --- Fonts --- */
  --hbc-font-display: 'Bangers', system-ui, cursive;      /* comic headlines */
  --hbc-font-ui: 'Fredoka', -apple-system, sans-serif;    /* nav / buttons   */
  --hbc-font-body: 'Nunito', -apple-system, sans-serif;   /* body / articles */
  --hbc-font-script: 'Gochi Hand', cursive;               /* handwritten     */

  /* --- Comic shape / shadow language --- */
  --hbc-radius: 20px;
  --hbc-radius-pill: 100px;
  --hbc-bw: 3px;                          /* thick ink outline weight */
  --hbc-border: var(--hbc-bw) solid var(--hbc-ink);
  --hbc-shadow: 6px 6px 0 var(--hbc-ink);
  --hbc-shadow-sm: 4px 4px 0 var(--hbc-ink);
}

/* =========================================================================
   TYPOGRAPHY
   Bangers for big display headings (comic punch); Nunito for readable body.
   NOTE: inside blog/post content we switch headings back to Fredoka so
   long-form articles stay easy to read (all-caps comic font is great for
   landing pages, rough for a 1,500-word post).
   ========================================================================= */
body {
  font-family: var(--hbc-font-body);
  font-weight: 600;
}
h1, h2, h3,
.site-title {
  font-family: var(--hbc-font-display);
  font-weight: 400;              /* Bangers has a single weight */
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--hbc-ink);
}
h4, h5, h6 {
  font-family: var(--hbc-font-ui);
  font-weight: 700;
  color: var(--hbc-ink);
}

/* Keep long-form article headings readable */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.single-post .entry-title {
  font-family: var(--hbc-font-ui);
  font-weight: 700;
  letter-spacing: 0;
}

/* Handwritten accent — add class="hbc-script" to any element */
.hbc-script { font-family: var(--hbc-font-script); }

/* =========================================================================
   BUTTONS — chunky uppercase pill + thick outline + hard offset shadow
   ========================================================================= */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.kb-button,
.kt-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  font-family: var(--hbc-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  border: var(--hbc-border);
  border-radius: var(--hbc-radius-pill);
  box-shadow: var(--hbc-shadow-sm);
  background-color: var(--global-palette1);
  color: #fff;
  transition: transform .1s ease, box-shadow .1s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--hbc-shadow);
  background-color: var(--global-palette2);
  color: #fff;
}
.button:active,
button:active,
.wp-block-button__link:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--hbc-ink);
}

/* Pop-color button variants (Styles panel or extra CSS class on a Button block) */
.wp-block-button.hbc-pink   .wp-block-button__link { background-color: var(--hbc-pink); color: #fff; }
.wp-block-button.hbc-teal   .wp-block-button__link { background-color: var(--hbc-teal); color: var(--hbc-ink); }
.wp-block-button.hbc-yellow .wp-block-button__link { background-color: var(--hbc-yellow); color: var(--hbc-ink); }
.wp-block-button.hbc-ghost  .wp-block-button__link { background-color: #fff; color: var(--hbc-ink); }

/* =========================================================================
   CARDS / CONTAINERS — thick outline + hard shadow (comic panel)
   Add class="hbc-card" to any Kadence Row / Column / Group.
   ========================================================================= */
.hbc-card {
  background: #fff;
  border: var(--hbc-border);
  border-radius: var(--hbc-radius);
  box-shadow: var(--hbc-shadow);
}

/* Rounded, outlined image frame — add class="hbc-frame" to an image block */
.hbc-frame img,
img.hbc-frame {
  border: var(--hbc-border);
  border-radius: var(--hbc-radius);
  box-shadow: var(--hbc-shadow-sm);
}

/* "Sticker" pill badge — add class="hbc-pill" */
.hbc-pill {
  display: inline-block;
  background: var(--hbc-yellow);
  color: var(--hbc-ink);
  border: 2px solid var(--hbc-ink);
  border-radius: var(--hbc-radius-pill);
  padding: .2em .8em;
  font-family: var(--hbc-font-display);
  letter-spacing: .04em;
  font-size: 1rem;
}

/* Halftone dot background — add class="hbc-halftone" to a section/Row */
.hbc-halftone {
  background-image: radial-gradient(rgba(27,16,48,.14) 22%, transparent 23%);
  background-size: 15px 15px;
}

/* =========================================================================
   LINKS
   ========================================================================= */
a { color: var(--global-palette1); }
a:hover { color: var(--global-palette2); }

/* =========================================================================
   BLOG / POST TWEAKS — friendlier reading
   ========================================================================= */
.entry-content { font-size: 1.08rem; }
.entry-content h2 { margin-top: 1.6em; }

/* =========================================================================
   ACCESSIBILITY — visible focus ring for keyboard users
   ========================================================================= */
:focus-visible {
  outline: 3px solid var(--hbc-pink);
  outline-offset: 2px;
}