/*
 * classic-components.css
 * Shared design system foundation for Classic Landscaping templates.
 * Phase 5 — UI & Formatting Consistency
 *
 * Loaded site-wide via wp_enqueue_style('classic-components') in functions.php.
 * Individual templates must NOT re-declare these tokens or @font-face rules.
 *
 * Contents:
 *   1. @font-face declarations (Crimson Text 400, 400i, 600 | DM Sans 400, 600)
 *   2. :root token block (brand colors, typography, layout, radii, motion)
 *   3. .cl-container utility
 *   4. Value pillars component (.cl-pillars, .cl-pillar)
 *   5. CTA block component (.cl-cta and sub-elements)
 *   6. Button variants (.cl-btn, .cl-btn--orange, .cl-btn--outline, .cl-btn--ghost)
 *   7. Section label (.cl-label)
 *   8. Animation keyframes (@keyframes fadeInUp, @keyframes shimmer)
 *   9. Scroll-driven animation utility (.cl-fade-in) with @supports gate
 *  10. Breakpoint resets for shared components
 */

/* ============================================================
   1. @FONT-FACE — Self-hosted WOFF2 (SIL Open Font License)
   ============================================================ */

@font-face {
  font-family: 'Crimson Text';
  src: url('../fonts/crimson-text/CrimsonText-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Text';
  src: url('../fonts/crimson-text/CrimsonText-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Text';
  src: url('../fonts/crimson-text/CrimsonText-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. :ROOT TOKEN BLOCK — Canonical design tokens
   ============================================================ */

:root {
  /* Brand colors — official values from Classic Landscaping brand guidelines */
  --navy:   #13364A;   /* Cascade Blue */
  --orange: #DF6322;   /* Honeysuckle Orange */
  --sage:   #7E9B8A;   /* Puget Green */
  --grey:   #F6F6F6;   /* Pebble Grey */

  /* Derived tones */
  --navy-deep:  #0e2a3a;
  --navy-light: #163d54;
  --orange-hover: #c9541a;
  --orange-glow: rgba(223, 99, 34, 0.25);
  --sage-dark:  #6b8777;
  --white: #ffffff;
  --light: rgba(255, 255, 255, 0.7);
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-heading: 'Crimson Text', Georgia, serif;
  --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 32px;

  /* Radii */
  --radius:    12px;
  --radius-lg: 20px;

  /* Motion */
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   3a. THEME RESET — Override style.css narrow constraints
   These rules neutralize the bullseyecreative base theme's
   max-width limits so custom templates render full-width.
   ============================================================ */

header#masthead {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#content {
  max-width: none !important;
  padding: 0 !important;
  overflow-x: clip;
}

footer#colophon {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   3a-ii. TYPOGRAPHY RESET — Override dist/css/style.css globals
   The compiled theme sets brandon-grotesque + weight 200 on p,
   body, and headings via bare element selectors. These direct
   rules beat inheritance from wrapper classes (.cl-hub, .cl-svc),
   so we must override at the same specificity. Since this file
   loads after bc-style in functions.php, same-specificity wins.
   ============================================================ */

body {
  font-family: var(--font-body);
}

p {
  font-family: var(--font-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* ============================================================
   3b. CONTAINER UTILITY
   ============================================================ */

.cl-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 768px) {
  .cl-container {
    padding: 0 16px;
  }
}

/* ============================================================
   4. VALUE PILLARS COMPONENT
   Full-width 100vw breakout, sage background, 4-col grid.
   ============================================================ */

.cl-pillars {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--sage);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cl-pillar {
  padding: 36px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.cl-pillar:last-child {
  border-right: none;
}

.cl-pillar h4 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.cl-pillar p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

/* Tablet: 2x2 grid */
@media (max-width: 1024px) {
  .cl-pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .cl-pillar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .cl-pillar:nth-child(2) {
    border-right: none;
  }

  .cl-pillar:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* Mobile: single column */
@media (max-width: 768px) {
  .cl-pillars {
    grid-template-columns: 1fr;
  }

  .cl-pillar {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .cl-pillar:last-child {
    border-bottom: none;
  }

  .cl-pillar h4 {
    font-size: 30px;
  }
}

/* ============================================================
   5. CTA BLOCK COMPONENT
   Orange gradient card, centered content, NinjaForms form.
   ============================================================ */

.cl-cta {
  background: linear-gradient(135deg, #DF6322 0%, #c9541a 100%);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  margin: 64px 0;
  box-shadow: 0 20px 60px rgba(223, 99, 34, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cl-cta h2 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.cl-cta p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 24px auto;
}

.cl-cta-phone {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}

.cl-cta-phone a {
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.cl-cta-phone a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.8);
}

.cl-cta-form {
  max-width: 600px;
  margin: 0 auto;
}

.cl-cta-form .nf-field-label label,
.cl-cta-form .nf-field-label,
.cl-cta-form label {
  color: var(--white);
  font-weight: 600;
}

/* Submit button inside CTA: white bg, orange text */
.cl-cta-form input[type="button"],
.cl-cta-form input[type="submit"],
.cl-cta-form .nf-field-element input[type="button"] {
  background: var(--white) !important;
  color: var(--orange) !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition);
}

.cl-cta-form input[type="button"]:hover,
.cl-cta-form input[type="submit"]:hover {
  background: var(--grey) !important;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .cl-cta {
    padding: 48px 24px;
  }

  .cl-cta h2 {
    font-size: 30px;
  }
}

/* ============================================================
   6. BUTTON VARIANTS
   ============================================================ */

.cl-btn {
  padding: 14px 36px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  border: 2px solid transparent;
}

/* Orange fill — primary action */
.cl-btn--orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

.cl-btn--orange:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--orange-glow);
  color: var(--white);
  text-decoration: none;
}

/* Outline — white border, transparent bg */
.cl-btn--outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.cl-btn--outline:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Ghost — subtle white border */
.cl-btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

.cl-btn--ghost:hover {
  background: var(--white);
  color: var(--orange);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ============================================================
   7. SECTION LABEL (EYEBROW)
   ============================================================ */

.cl-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: 14px;
  line-height: 1.0;
}

/* ============================================================
   8. ANIMATION KEYFRAMES
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50%       { opacity: 0.05; }
}

/* ============================================================
   9. SCROLL-DRIVEN ANIMATION UTILITY
   Fallback: always visible (opacity: 1).
   Progressive enhancement: fade-in on scroll when supported.
   ============================================================ */

.cl-fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cl-fade-in {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease-out forwards;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* ============================================================
   10. CTA SHIMMER PSEUDO-ELEMENT (uses shimmer keyframe)
   ============================================================ */

.cl-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

/* ============================================================
   BREAKPOINT RESETS FOR SHARED COMPONENTS (tablet + mobile)
   Summarized above per component; this section handles edge cases.
   ============================================================ */

/* Ensure pillar text doesn't overflow on narrow tablets */
@media (max-width: 1024px) {
  .cl-pillar h4 {
    font-size: 32px;
  }
}

/* Stack CTA inner content cleanly on mobile */
@media (max-width: 480px) {
  .cl-cta {
    padding: 40px 16px;
  }

  .cl-btn {
    width: 100%;
    text-align: center;
    padding: 14px 24px;
  }
}

/* ── Phase 7.1: Typekit font-display override ──────────────
   Forces swap on Adobe Typekit fonts (brandon-grotesque, degular,
   degular-text) which ship with font-display:auto from the CDN.
   Browser's author stylesheet @font-face takes priority. */
@font-face { font-family: 'brandon-grotesque'; font-display: swap; src: local('Brandon Grotesque'); }
@font-face { font-family: 'degular'; font-display: swap; src: local('Degular'); }
@font-face { font-family: 'degular-text'; font-display: swap; src: local('Degular Text'); }