/* ==========================================================================
   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 */
}



/* Styling for the map popups */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    padding: 5px !important;
}
.store-popup h5 {
    color: #000;
}
.store-popup .btn-dark {
    letter-spacing: 1px;
    font-weight: 700;
}

.herotext h1 {
  /* text-wrap: balance; */
}