/*
Theme Name:   GP Child - Argus Style
Theme URI:    https://example.com
Description:  Child theme of GeneratePress styled to match the Argus Consulting Group reference design (navy / gold / sage palette, pill buttons, badge labels, alternating image-text sections).
Author:       C4 Solutions
Template:     generatepress
Version:      1.0.0
Text Domain:  gp-child-argus
*/

/* =========================================================
   1. BRAND COLOR VARIABLES
   GeneratePress reads --gp-color values in its default color
   picker output. We define our own tokens here and reuse them
   throughout this file so every color lives in one place.
========================================================= */
:root {
  --argus-navy: #0E1A49;
  --argus-navy-soft: #2A3767;      /* dark badge / secondary navy panels */
  --argus-slate: #3B476D;          /* body copy on white */
  --argus-blue: #3E59F6;           /* accent / links / outline CTA */
  --argus-blue-hover: #2C42D6;
  --argus-badge-bg: #E9EEFD;       /* lavender pill badge background */
  --argus-gold: #EAB43D;           /* primary CTA + icon circles */
  --argus-gold-hover: #D9A02A;
  --argus-sage: #82A8A2;           /* secondary CTA pill */
  --argus-sage-hover: #6E9994;
  --argus-white: #FFFFFF;
  --argus-gray-bg: #F7F8FC;        /* section alternate background */
  --argus-radius-pill: 999px;
  --argus-radius-card: 12px;
  --argus-font-heading: 'Poppins', sans-serif;
  --argus-font-body: 'Poppins', sans-serif;

  /* Map onto GeneratePress's own custom properties so core
     elements (nav, links, buttons) inherit without extra overrides. */
  --gp-color-primary: var(--argus-blue);
  --gp-color-primary-hover: var(--argus-blue-hover);
  --gp-color-text: var(--argus-slate);
  --gp-color-link: var(--argus-blue);
  --gp-color-link-hover: var(--argus-blue-hover);
}

/* =========================================================
   2. TYPOGRAPHY
========================================================= */
body,
p, li, span, input, textarea, select {
  font-family: var(--argus-font-body);
  color: var(--argus-slate);
}

h1, h2, h3, h4, h5, h6,
.site-title {
  font-family: var(--argus-font-heading);
  font-weight: 700;
  color: var(--argus-navy);
  line-height: 1.15;
}

h1, .h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2, .h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }

a { color: var(--argus-blue); text-decoration: none; }
a:hover { color: var(--argus-blue-hover); }

/* =========================================================
   3. BUTTONS
   Three variants seen in the reference design:
   .btn-gold   – solid mustard, primary conversion action
   .btn-sage   – solid sage, secondary action
   .btn-outline – navy/blue bordered, tertiary action
   Apply as a class on a GenerateBlocks button block.
========================================================= */
.btn-gold,
.btn-sage,
.btn-outline,
.wp-block-button__link.btn-gold,
.wp-block-button__link.btn-sage,
.wp-block-button__link.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.8em;
  border-radius: var(--argus-radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.btn-gold, .wp-block-button__link.btn-gold {
  background: var(--argus-gold);
  color: var(--argus-navy);
}
.btn-gold:hover { background: var(--argus-gold-hover); color: var(--argus-navy); }

.btn-sage, .wp-block-button__link.btn-sage {
  background: var(--argus-sage);
  color: var(--argus-white);
}
.btn-sage:hover { background: var(--argus-sage-hover); color: var(--argus-white); }

.btn-outline, .wp-block-button__link.btn-outline {
  background: transparent;
  color: var(--argus-blue);
  border-color: var(--argus-blue);
}
.btn-outline:hover {
  background: var(--argus-blue);
  color: var(--argus-white);
}

/* Fused two-tone button (sage pill + circular blue arrow button, as seen in the
   embedded-form hero variant). Wrap a sage link and a round arrow link in a
   flex container with this class. */
.btn-fused {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--argus-radius-pill);
  overflow: hidden;
}
.btn-fused .btn-fused__label {
  background: var(--argus-sage);
  color: var(--argus-white);
  padding: 0.9em 1.8em;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.btn-fused .btn-fused__arrow {
  background: var(--argus-blue);
  color: var(--argus-white);
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   4. BADGE / EYEBROW PILL
   Small uppercase label used above every section heading.
========================================================= */
.argus-badge {
  display: inline-block;
  background: var(--argus-badge-bg);
  color: var(--argus-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5em 1.2em;
  border-radius: var(--argus-radius-pill);
  margin-bottom: 1rem;
}

/* Dark variant for use on navy section backgrounds */
.argus-badge--dark {
  background: var(--argus-navy-soft);
  color: var(--argus-white);
}

/* =========================================================
   5. ICON BULLET LIST
   Gold circular arrow icon + bold lead-in text, used in the
   "What that looks like:" feature list.
========================================================= */
.argus-icon-list { list-style: none; margin: 0; padding: 0; }
.argus-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.argus-icon-list .icon-circle {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--argus-gold);
  color: var(--argus-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.argus-icon-list strong { color: var(--argus-navy); }

/* =========================================================
   6. CARDS (services grid, blog grid)
========================================================= */
.argus-card {
  background: var(--argus-white);
  border-radius: var(--argus-radius-card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(14, 26, 73, 0.08);
}
.argus-card img { width: 100%; display: block; }
.argus-card__body { padding: 1.5rem; }
.argus-card__title {
  color: var(--argus-navy);
  font-weight: 700;
  margin: 0.5rem 0;
}
.argus-card__meta {
  font-size: 0.85rem;
  color: var(--argus-slate);
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.argus-card__category {
  display: inline-block;
  background: var(--argus-blue);
  color: var(--argus-white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.9em;
  border-radius: var(--argus-radius-pill);
}

/* =========================================================
   7. SECTION BACKGROUNDS
========================================================= */
.argus-section--navy {
  background: var(--argus-navy);
  color: var(--argus-white);
  padding: 5rem 0;
}
.argus-section--navy h1,
.argus-section--navy h2,
.argus-section--navy h3 { color: var(--argus-white); }
.argus-section--navy p { color: #C7CCE0; }

.argus-section--light {
  background: var(--argus-white);
  padding: 5rem 0;
}
.argus-section--gray {
  background: var(--argus-gray-bg);
  padding: 5rem 0;
}

/* =========================================================
   8. HERO / GLASSMORPHISM FORM CARD
   For the photo-background hero variant with an embedded
   lead-gen (GHL) form floating in a frosted glass card.
========================================================= */
.argus-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 6rem 0;
}
.argus-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(14,26,73,0.75), rgba(14,26,73,0.45));
}
.argus-hero__content { position: relative; z-index: 1; color: var(--argus-white); }
.argus-hero__content h1 { color: var(--argus-white); }
.argus-hero__content p { color: #DDE1F5; }

.argus-glass-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--argus-radius-card);
  padding: 2.5rem;
}
.argus-glass-card h3 { color: var(--argus-white); margin-bottom: 1.5rem; }

/* Frosted form field styling — targets GHL's default input markup
   once embedded. GHL renders inputs inside its own iframe in most
   embed modes, so also see ghl-form-custom-css.css for the version
   to paste into the GHL form's own Custom CSS panel. */
.argus-glass-card input,
.argus-glass-card select,
.argus-glass-card textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 0.9em 1.1em;
  color: var(--argus-white);
  margin-bottom: 1rem;
}
.argus-glass-card input::placeholder { color: rgba(255,255,255,0.75); }

/* =========================================================
   9. FOOTER / BOTTOM CTA BANNER
========================================================= */
.argus-cta-banner {
  background: var(--argus-navy);
  color: var(--argus-white);
  padding: 3rem 0;
}
.argus-cta-banner h3 { color: var(--argus-white); margin: 0; }

.site-footer,
footer.site-footer {
  background: var(--argus-white);
}
.site-footer .footer-widget h4 {
  color: var(--argus-navy);
  border-bottom: 3px solid var(--argus-blue);
  display: inline-block;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* =========================================================
   10. RESPONSIVE
========================================================= */
@media (max-width: 768px) {
  .argus-section--navy,
  .argus-section--light,
  .argus-section--gray { padding: 3rem 0; }
  .argus-hero { padding: 4rem 0; }
  .argus-glass-card { padding: 1.5rem; }
}