/* ==========================================================================
   SECTIONS (ACF / BLOCK-SPECIFIC)
   --------------------------------------------------------------------------
   PURPOSE:
   This file styles SPECIFIC SECTIONS or BLOCKS.
   These styles assume a known HTML structure.

   WHY THIS FILE EXISTS:
   - Keeps ACF layouts self-contained
   - Prevents section styles leaking globally
   - Makes it easy to delete or refactor sections later

   RULES:
   - Scope styles using section classes
   - Do not create global utilities here
   - Do not redefine components here

   NAMING CONVENTION:
   .layout-[section-name]

   EXAMPLES:
   .layout-text-media
   .layout-services-index
   .layout-hero

   EXAMPLES OF WHAT BELONGS HERE:
   Section-specific spacing
   Icon sizing inside a section
   Video overlay positioning
   Card tweaks unique to one layout

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   Buttons
   Base typography
   Header layout
   Utility classes
   ========================================================================== */

.hero h1 {
  color: var(--brand-white);
  text-shadow: 0px 0px 8px #000;
}

.abbox {
  background-color: var(--bg-light);
  padding: 30px;
  text-align: center;
}

.social a {
  font-size: 1.5rem;
  margin-left: 5px;
  color: #0e0e0e;
  transition: all 500ms;
}
.social a:hover i {
  opacity: 0.8;
  color: var(--brand-accent);
}


/* Review section */

.layout-reviews .rpi-content .rpi-card-inner {
    background-color: var(--brand-white) !important; /* Using variable for consistency, same as #fff */
    box-shadow: var(--shadow-sm) !important; /* Slight opacity on black looks more premium than pure #000 */
    border-radius: var(--radius-md) !important; /* Optional: Adds your site's rounding */
    
}

/* Optional: Fix the spacing inside the card if the plugin is tight */
.layout-reviews .rpi-content {
    padding: 10px; /* Gives the shadow room to breathe */
}



.herotext h1 {
  text-wrap: balance;
}