/*
Theme Name:   HandCyaat
Theme URI:    https://handcyaat.com
Description:  HandCyaat — Jamaica's cultural hub. Custom child theme of Kadence.
Author:       AlyCodes
Author URI:   https://handcyaat.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, custom-colors, custom-logo, featured-images, full-width-template
Text Domain:  handcyaat
*/

/* ============================================================
   HANDCYAAT BRAND TOKENS
   B3 palette: Deep green · White · Yellow · Black
   ============================================================ */
:root {
  /* Primary palette */
  --hc-green:        #0A2E1A;
  --hc-green-mid:    #0d3d22;
  --hc-green-light:  #14522e;
  --hc-yellow:       #F5C800;
  --hc-yellow-dark:  #c9a400;
  --hc-white:        #FFFFFF;
  --hc-parchment:    #F8F6F0;
  --hc-parchment-mid:#F0EDE5;
  --hc-black:        #111111;
  --hc-charcoal:     #1A1A1A;

  /* Text */
  --hc-text-primary:   #111111;
  --hc-text-secondary: #555555;
  --hc-text-muted:     #888888;
  --hc-text-on-green:  rgba(255,255,255,0.65);

  /* Typography */
  --hc-font-heading: "Arial Black", Impact, "Helvetica Neue", sans-serif;
  --hc-font-body:    Arial, "Helvetica Neue", Helvetica, sans-serif;
  --hc-font-mono:    "Courier New", Courier, monospace;

  /* Spacing */
  --hc-section-pad:  64px 40px;
  --hc-section-pad-sm: 48px 24px;

  /* Borders & radius */
  --hc-radius-sm:  4px;
  --hc-radius-md:  8px;
  --hc-radius-lg:  12px;
  --hc-border:     0.5px solid rgba(0,0,0,0.1);
  --hc-border-light: 0.5px solid rgba(255,255,255,0.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--hc-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hc-text-primary);
  background-color: var(--hc-parchment);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hc-font-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--hc-text-primary);
  margin-top: 0;
}

a {
  color: var(--hc-green);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--hc-green-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.hc-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.hc-eyebrow {
  font-family: var(--hc-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.hc-eyebrow--yellow { color: var(--hc-yellow); }
.hc-eyebrow--green  { color: var(--hc-green); opacity: 0.6; }

.hc-btn {
  display: inline-block;
  font-family: var(--hc-font-heading);
  font-size: 13px;
  font-weight: 900;
  padding: 12px 26px;
  border-radius: var(--hc-radius-sm);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  border: none;
}
.hc-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.hc-btn:active { transform: scale(0.98); }

.hc-btn--primary {
  background: var(--hc-yellow);
  color: var(--hc-green);
}
.hc-btn--secondary {
  background: transparent;
  color: var(--hc-white);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.hc-btn--outline-green {
  background: transparent;
  color: var(--hc-yellow);
  border: 1.5px solid var(--hc-yellow);
}
.hc-btn--dark {
  background: var(--hc-green);
  color: var(--hc-yellow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}