/*
Theme Name: Enfold Child
Description: Child theme for enfold thinkjarvis
Version: 1.0
Author: Think Jarvis Design and Marketing
Author URI: https://www.thinkjarvis.co.uk
Template: enfold
*/

/*Add your own styles here:*/Claude
/*
Theme Name: Enfold Child
Description: Child theme for enfold thinkjarvis
Version: 1.1
Author: Think Jarvis Design and Marketing
Author URI: https://www.thinkjarvis.co.uk
Template: enfold
*/

/* ============================================================
   AVAANS MEDIA — CHILD THEME STYLESHEET
   Updated: April 2026
   
   STRUCTURE:
   1. CSS Custom Properties (brand tokens)
   2. Global typography resets
   3. Hero section — dark navy color sections
   4. Hero inner column layout
   5. Hero eyebrow
   6. Hero headings
   7. Hero body text
   8. Hero buttons
   9. Hero credential bar
   10. Responsive
   
   EXISTING RULES (preserved from original):
   — at bottom of file, clearly marked
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   Single source of truth for all brand colors and type.
   Update here and everything inherits.
   ============================================================ */

:root {
  --av-navy:         #0F4C81;
  --av-navy-dark:    #0A3560;
  --av-navy-deep:    #07284A;
  --av-chartreuse:   #BED524;
  --av-light-blue:   #A5B8D0;
  --av-white:        #FFFFFF;
  --av-light-gray:   #F5F5F5;
  --av-text-body:    #2C3E50;
  --av-text-muted:   #6B7B8D;
  --av-border:       rgba(15, 76, 129, 0.12);

  --av-font:         'Nunito', Arial, sans-serif;

  --av-h1-size:      clamp(28px, 4vw, 42px);
  --av-h2-size:      clamp(22px, 3vw, 30px);
  --av-h3-size:      clamp(18px, 2.5vw, 22px);
  --av-h4-size:      16px;
  --av-h5-size:      13px;
  --av-h6-size:      11px;
  --av-body-size:    15px;
  --av-small-size:   13px;
  --av-eyebrow-size: 10px;
}


/* ============================================================
   2. GLOBAL TYPOGRAPHY RESETS
   Scoped to .main_color and .alternate_color so only
   Enfold content sections are affected — not header/footer.
   When CMS typography panel fixes are applied (memory #12),
   these become the fallback safety net.
   ============================================================ */

.main_color h1,
.main_color h2,
.main_color h3,
.main_color h4,
.main_color h5,
.main_color h6,
.alternate_color h1,
.alternate_color h2,
.alternate_color h3,
.alternate_color h4,
.alternate_color h5,
.alternate_color h6 {
  font-family: var(--av-font);
  color: var(--av-navy);
}

/* Dark sections — headings flip to white */
.av-dark-bg h1,
.av-dark-bg h2,
.av-dark-bg h3,
.av-dark-bg h4,
.av-dark-bg h5,
.av-dark-bg h6,
[data-section-bg="dark"] h1,
[data-section-bg="dark"] h2,
[data-section-bg="dark"] h3,
[data-section-bg="dark"] h4,
[data-section-bg="dark"] h5,
[data-section-bg="dark"] h6 {
  color: var(--av-white);
}


/* ============================================================
   3. HERO SECTION — DARK NAVY COLOR SECTIONS
   
   Targets Enfold's color section wrapper when you've set
   the section background to deep navy (#07284A).
   
   HOW TO APPLY IN ENFOLD:
   In the Color Section settings, add this custom class:
   "av-hero-section"
   
   That gives us a safe, explicit hook that won't
   accidentally style other dark sections.
   ============================================================ */

.av-hero-section.avia-section,
.av-hero-section {
  background-color: var(--av-navy-deep) !important;
  border-bottom: 3px solid var(--av-chartreuse);
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Remove Enfold's default section padding override */
.av-hero-section.avia-section > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ============================================================
   4. HERO INNER COLUMN LAYOUT
   
   The columns layout inside the hero color section.
   Add class "av-hero-col" to the column/flex_column 
   containing your hero text.
   ============================================================ */

.av-hero-section .av-hero-col,
.av-hero-section .flex_column.av-hero-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 0;
}


/* ============================================================
   5. HERO EYEBROW
   
   Use a Text Block element with the custom class
   "av-eyebrow" for the small label above the heading.
   
   Three color variants — add the modifier class:
   av-eyebrow-chartreuse  (default — on deep navy)
   av-eyebrow-lightblue   (on navy sections)
   av-eyebrow-navy        (on white/light sections)
   ============================================================ */

.av-eyebrow,
.av-eyebrow p,
.av-eyebrow-chartreuse,
.av-eyebrow-chartreuse p,
.av-eyebrow-lightblue,
.av-eyebrow-lightblue p,
.av-eyebrow-navy,
.av-eyebrow-navy p {
  font-family: var(--av-font) !important;
  font-size: var(--av-eyebrow-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

/* Default eyebrow = chartreuse (for dark sections) */
.av-eyebrow,
.av-eyebrow p,
.av-eyebrow-chartreuse,
.av-eyebrow-chartreuse p {
  color: var(--av-chartreuse) !important;
}

.av-eyebrow-lightblue,
.av-eyebrow-lightblue p {
  color: var(--av-light-blue) !important;
}

.av-eyebrow-navy,
.av-eyebrow-navy p {
  color: var(--av-navy) !important;
}

/* Strip Enfold's default paragraph margin from eyebrow */
.av-eyebrow p:last-child,
.av-eyebrow-chartreuse p:last-child,
.av-eyebrow-lightblue p:last-child,
.av-eyebrow-navy p:last-child {
  margin-bottom: 0 !important;
}


/* ============================================================
   6. HERO HEADINGS
   
   H1 inside a hero section gets the full treatment.
   H2 inside dark sections also handled here.
   
   Add class "av-hero-section" to the Color Section —
   headings inside inherit automatically.
   ============================================================ */

.av-hero-section h1,
.av-hero-section .av-hero-col h1 {
  font-family: var(--av-font) !important;
  font-size: var(--av-h1-size) !important;
  font-weight: 700 !important;
  color: var(--av-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}

/* Chartreuse accent word — wrap in <span class="av-accent"> */
.av-hero-section h1 .av-accent,
.av-hero-section .av-hero-col h1 .av-accent {
  color: var(--av-chartreuse) !important;
}

.av-hero-section h2,
.av-hero-section .av-hero-col h2 {
  font-family: var(--av-font) !important;
  font-size: var(--av-h2-size) !important;
  font-weight: 700 !important;
  color: var(--av-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
}

.av-hero-section h3,
.av-hero-section .av-hero-col h3 {
  font-family: var(--av-font) !important;
  font-size: var(--av-h3-size) !important;
  font-weight: 700 !important;
  color: var(--av-white) !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}


/* ============================================================
   7. HERO BODY TEXT
   
   Paragraph text inside hero sections.
   ============================================================ */

.av-hero-section p,
.av-hero-section .av-hero-col p,
.av-hero-section .av_textblock_section p {
  font-family: var(--av-font) !important;
  font-size: var(--av-body-size) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
  max-width: 600px;
  margin-bottom: 20px !important;
}

/* Bold inside hero body stays readable */
.av-hero-section p strong,
.av-hero-section .av_textblock_section p strong {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 700 !important;
}


/* ============================================================
   8. HERO BUTTONS
   
   Enfold button elements inside hero sections.
   Primary = chartreuse fill.
   Secondary = ghost/outline.
   
   In Enfold's Button element:
   - Primary CTA: add custom class "av-btn-primary"
   - Secondary CTA: add custom class "av-btn-ghost"
   ============================================================ */

/* Primary button — chartreuse */
.av-hero-section .avia-button.av-btn-primary,
.av-btn-primary.avia-button {
  background-color: var(--av-chartreuse) !important;
  color: var(--av-navy-deep) !important;
  border-color: var(--av-chartreuse) !important;
  font-family: var(--av-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 3px !important;
}

.av-hero-section .avia-button.av-btn-primary:hover,
.av-btn-primary.avia-button:hover {
  background-color: #a8bc1e !important;
  border-color: #a8bc1e !important;
  color: var(--av-navy-deep) !important;
}

/* Ghost button — outline on dark */
.av-hero-section .avia-button.av-btn-ghost,
.av-btn-ghost.avia-button {
  background-color: transparent !important;
  color: var(--av-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  font-family: var(--av-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 11px 26px !important;
  border-radius: 3px !important;
}

.av-hero-section .avia-button.av-btn-ghost:hover,
.av-btn-ghost.avia-button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Outline navy — for light sections */
.av-btn-outline.avia-button {
  background-color: transparent !important;
  color: var(--av-navy) !important;
  border: 1.5px solid var(--av-navy) !important;
  font-family: var(--av-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 11px 26px !important;
  border-radius: 3px !important;
}

.av-btn-outline.avia-button:hover {
  background-color: var(--av-navy) !important;
  color: var(--av-white) !important;
}

/* Button row spacing */
.av-hero-section .avia-button-row,
.av-hero-section .av-button-wrap {
  margin-top: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}


/* ============================================================
   9. HERO CREDENTIAL BAR
   
   Small trust-signal line below the hero buttons.
   Add class "av-credential-bar" to a Text Block element.
   ============================================================ */

.av-credential-bar,
.av-credential-bar p {
  font-family: var(--av-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.35) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  line-height: 1.8 !important;
}

.av-credential-bar strong,
.av-credential-bar p strong {
  color: var(--av-light-blue) !important;
  font-weight: 700 !important;
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media only screen and (max-width: 768px) {

  .av-hero-section.avia-section,
  .av-hero-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .av-hero-section h1,
  .av-hero-section .av-hero-col h1 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .av-hero-section h2,
  .av-hero-section .av-hero-col h2 {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  .av-hero-section p,
  .av-hero-section .av_textblock_section p {
    max-width: 100%;
    font-size: 14px !important;
  }

  .av-hero-section .avia-button-row,
  .av-hero-section .av-button-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .av-hero-section .avia-button.av-btn-primary,
  .av-hero-section .avia-button.av-btn-ghost {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ============================================================
   PRESERVED — ORIGINAL CHILD THEME RULE
   ============================================================ */

.template-author .post-entry {
  clear: none !important;
}
/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

.template-author .post-entry {
    clear: none !important;
}