/*
Theme Name: K-Guard National
Theme URI: https://kguard.com
Description: Child theme of Hello Elementor for the K-Guard national site. Carries "The Profile" design system: brand tokens lifted from the K-Guard mark, the type scale, and the hood-angle motif.
Author: J&A Digital Solutions
Author URI: https://jandadigital.com
Template: hello-elementor
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kguard-national
*/

/* ==========================================================================
   1. Tokens
   Green is taken from the logo artwork (#0F5C2E). Amber carries every call to
   action because green on green has no contrast and red belongs to the flag.
   ========================================================================== */

:root {
  --kg-green:        #0F5C2E;
  --kg-green-deep:   #0B4723;
  --kg-green-bright: #17924A;
  --kg-green-pale:   #DCE8E0;
  --kg-green-text:   #A7E0BE;

  --kg-ink:          #101310;
  --kg-ink-2:        #1C221C;
  --kg-slate:        #4A514A;
  --kg-slate-2:      #5C635C;
  --kg-muted:        #7A817A;
  --kg-muted-2:      #8F988F;

  --kg-bone:         #F6F5F1;
  --kg-bone-2:       #EDECE6;
  --kg-rule:         #DCDAD1;
  --kg-white:        #FFFFFF;

  --kg-amber:        #D98A0B;
  --kg-amber-hover:  #B87408;
  --kg-flag-red:     #B0202F;
  --kg-flag-blue:    #1B3A6B;

  --kg-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --kg-font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;

  --kg-hood-angle:   -9deg;
  --kg-notch:        20px;

  --kg-space-1: 8px;
  --kg-space-2: 16px;
  --kg-space-3: 24px;
  --kg-space-4: 40px;
  --kg-space-5: 64px;
  --kg-space-6: 96px;

  --kg-maxw: 1440px;
  --kg-gutter: 56px;
}

@media (max-width: 767px) {
  :root { --kg-gutter: 18px; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
  font-family: var(--kg-font-body);
  color: var(--kg-slate);
  background: var(--kg-bone);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kg-font-display);
  color: var(--kg-ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 0;
}

h1 { font-weight: 900; letter-spacing: -0.025em; }
h2, h3 { font-weight: 800; }
h4, h5, h6 { font-weight: 700; }

p { line-height: 1.6; }

a { color: var(--kg-green); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--kg-green-deep); }

/* Visible focus for keyboard users, on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kg-amber);
  outline-offset: 2px;
}

/* ==========================================================================
   3. The hood angle
   The K-Guard mark is a cross-section of the product, hood over trough.
   That angle is the signature geometry: section cuts, skewed panels, and one
   notched corner on primary buttons.
   ========================================================================== */

.kg-cut-top    { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.kg-cut-bottom { position: relative; }

.kg-cut-bottom::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 90px;
  background: var(--kg-bone);
  clip-path: polygon(0 100%, 0 38%, 100% 0, 100% 100%);
  pointer-events: none;
}

.kg-skew-panel {
  position: absolute;
  background: var(--kg-green-deep);
  transform: skewX(var(--kg-hood-angle));
  pointer-events: none;
}

.kg-notch {
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - var(--kg-notch)) 100%, 0 100%);
}

/* ==========================================================================
   4. Components
   ========================================================================== */

.kg-eyebrow {
  font-family: var(--kg-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kg-green);
}

.kg-eyebrow--light { color: var(--kg-amber); }

/* Primary: dark text on amber tests at 6.8:1. Never white text on amber. */
.kg-btn,
.elementor-button.kg-btn {
  display: inline-block;
  font-family: var(--kg-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--kg-ink);
  background: var(--kg-amber);
  padding: 20px 38px;
  min-height: 48px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - var(--kg-notch)) 100%, 0 100%);
  transition: background 0.15s ease;
}

.kg-btn:hover,
.kg-btn:focus { background: var(--kg-amber-hover); color: var(--kg-ink); }

.kg-btn--ghost {
  background: transparent;
  color: var(--kg-ink);
  border: 1px solid var(--kg-ink);
  clip-path: none;
  padding: 19px 34px;
}

.kg-btn--ghost-light {
  background: transparent;
  color: var(--kg-white);
  border: 1px solid rgba(246, 245, 241, 0.4);
  clip-path: none;
  padding: 19px 34px;
}

.kg-btn--ghost-light:hover,
.kg-btn--ghost-light:focus { background: rgba(246,245,241,0.1); color: var(--kg-white); }

.kg-link {
  font-family: var(--kg-font-display);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}

.kg-stat { border-top: 3px solid var(--kg-green); padding-top: 14px; }
.kg-stat__num {
  font-family: var(--kg-font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--kg-green);
  line-height: 1;
}
.kg-stat__label {
  font-family: var(--kg-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--kg-slate-2);
  margin-top: 7px;
}

.kg-card { background: var(--kg-white); border-top: 3px solid var(--kg-green); }
.kg-card__body { padding: 18px 20px; }

.kg-step { border-left: 3px solid var(--kg-green); padding-left: 18px; }

/* Forms: 48px minimum target, heavy border so fields read as affordances. */
.kg-field label,
.kg-form label {
  display: block;
  font-family: var(--kg-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kg-slate-2);
  margin-bottom: 7px;
}

.kg-form input[type="text"],
.kg-form input[type="email"],
.kg-form input[type="tel"],
.kg-form select,
.kg-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--kg-font-body);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 14px;
  min-height: 48px;
  border: 1px solid #C9C6BB;
  background: var(--kg-white);
  color: var(--kg-ink);
}

.kg-form input:focus,
.kg-form select:focus,
.kg-form textarea:focus { border-color: var(--kg-green); }

/* Video overlay play button, matches the Elementor Video widget markup. */
.kg-video__play,
.elementor-custom-embed-play {
  width: 92px;
  height: 92px;
  background: var(--kg-amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

.kg-section { padding: var(--kg-space-6) var(--kg-gutter); }
.kg-section--dark { background: var(--kg-ink); color: var(--kg-bone); }
.kg-section--dark h1,
.kg-section--dark h2,
.kg-section--dark h3 { color: var(--kg-white); }
.kg-section--green { background: var(--kg-green); color: var(--kg-green-text); }
.kg-section--green h1,
.kg-section--green h2,
.kg-section--green h3 { color: var(--kg-white); }

@media (max-width: 767px) {
  .kg-section { padding: var(--kg-space-4) var(--kg-gutter); }
  .kg-btn { display: block; text-align: center; width: 100%; box-sizing: border-box; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Screen-reader-only utility. */
.kg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}