@charset 'utf-8';
/*
Theme Name: Pagosa Boosters (Tropicana Child)
Theme URI: https://codebycurtis.com
Description: Child theme for Pagosa Springs Athletic Booster Club (Pirates). Built on Tropicana parent. Clean, professional, athletic design with strong Pirate Gold & Black branding. Optimized for sponsorship conversion, WooCommerce recurring donations, and community engagement. This file serves as the reusable base CSS template for future sites.
Author: Curtis Nehring <curtis.nehring@codebycurtis.com>
Author URI: https://codebycurtis.com
Template: tropicana
Version: 1.0.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: pagosaboosters
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready, blog, e-commerce, pirates, athletic-booster, non-profit
*/

/* 
================================================================================
 * PAGOSA SPRINGS ATHLETIC BOOSTER CLUB - BASE STYLE.CSS (v1.0.1)
 * 
 * PURPOSE
 * This is the reusable foundation CSS for the Pagosa Boosters site.
 * It combines:
 *   - Cleaned Tropicana parent overrides
 *   - Modern :root variable-driven theming (inspired by SCES approach)
 *   - Comprehensive utility classes you use frequently
 *   - New reusable components for this project
 *
 * HOW TO USE AS A BASE FOR FUTURE SITES
 * 1. Copy this file into the new child theme as style.css
 * 2. Update the Theme Header (Name, Description, Version, Author)
 * 3. Replace only the color values in :root with the new brand’s palette
 * 4. Keep the entire UTILITY CLASSES section (they are project-agnostic)
 * 5. Add new components only inside clearly marked sections
 * 6. Move anything no longer needed into the LEGACY section or delete it
 *
 * COLOR SYSTEM
 * All brand colors, derived shades, shadows, overlays, and semantic feedback
 * colors are now defined in :root at the top of this file. This makes the
 * entire stylesheet easily themeable by changing values in one place.
================================================================================
*/

/* =============================================
 * BRAND COLOR PALETTE + DERIVED SHADES + SHADOWS
 * =============================================
 * Pagosa Springs Athletic Booster Club (Pirates)
 * Primary Black + Pirate Gold + Cream Gold (from logo & flyers)
 *
 * STRICT USAGE:
 * - H1-H3: Primary Black or Pirate Gold
 * - CTAs: Gold background + dark text
 * - Sponsor Tiers: Cream background + Gold border/accent
 */

:root {
    /* === CORE BRAND COLORS === */
    --primary-black: #111111;
    --pirate-gold: #C9A961;
    --cream-gold: #F5E8C7;
    --white: #FFFFFF;
    --page-bg: #FAF7F2;           /* Warm off-white for main backgrounds */

    /* === DERIVED SHADES (for hover, borders, variants) === */
    /* Gold Family */
    --gold-100: #F5E8C7;          /* Lightest cream */
    --gold-200: #EDE4D3;
    --gold-300: #C9A961;          /* Base Pirate Gold */
    --gold-400: #B2853A;          /* Slightly richer for hover */
    --gold-500: #8F6B2E;          /* Darker gold for deeper hover states */

    /* Dark / Black Family */
    --black-100: #333333;
    --black-200: #1A1A1A;
    --black-300: #111111;         /* Base */

    /* Text Colors */
    --text-dark: #1F1F1F;
    --text-medium: #4A4A4F;
    --text-light: #FFFFFF;
    --text-on-gold: #1F1F1F;      /* Dark text on gold buttons for contrast */

    /* Supporting */
    --border-light: #bebebe;
    --bg-section: #F4F0FA;

    /* === SHADOWS & OVERLAYS === */
    --shadow-black: rgba(0, 0, 0, 0.5);
    --shadow-black-light: rgba(0, 0, 0, 0.25);
    --shadow-black-strong: rgba(0, 0, 0, 0.69);
    --text-shadow-white: rgba(255, 255, 255, 0.75);
    --text-shadow-white-strong: rgba(255, 255, 255, 0.99);
    --overlay-shadow-strong: rgba(0, 0, 0, .9);

    /* === SEMANTIC / FEEDBACK COLORS === */
    --color-error: rgba(255, 0, 0, .69);
    --color-success: rgba(0, 255, 0, .69);
    --color-warning: rgba(255, 128, 0, .69);
    --color-notice: rgba(255, 255, 0, .69);

    /* === SELECTION HIGHLIGHT === */
    --selection-bg: #ffffb8;

    /* === COMPONENT BACKGROUNDS === */
    --dark-card-bg: #1F1F1F;      /* For dark impact/sponsor cards (Home mockup style) */

    /* === FONTS === */
    --font-headings: 'Montserrat', 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-numbers: 'Raleway', system-ui, sans-serif;
}

/* =============================================
 * COLOR & BACKGROUND UTILITY CLASSES
 * Based on Brand Palette
 * ============================================= */

/* === TEXT COLOR UTILITIES === */
.color-primary-black   { color: var(--primary-black) !important; }
.color-pirate-gold     { color: var(--pirate-gold) !important; }
.color-cream-gold      { color: var(--cream-gold) !important; }
.color-white           { color: var(--white) !important; }
.color-page-bg         { color: var(--page-bg) !important; }
.color-text-dark       { color: var(--text-dark) !important; }
.color-text-medium     { color: var(--text-medium) !important; }
.color-text-light      { color: var(--text-light) !important; }
.color-text-on-gold    { color: var(--text-on-gold) !important; }

/* === BACKGROUND COLOR UTILITIES === */
.background-primary-black   { background-color: var(--primary-black) !important; }
.background-pirate-gold     { background-color: var(--pirate-gold) !important; }
.background-cream-gold      { background-color: var(--cream-gold) !important; }
.background-white           { background-color: var(--white) !important; }
.background-page-bg         { background-color: var(--page-bg) !important; }
.background-text-dark       { background-color: var(--text-dark) !important; }
.background-text-medium     { background-color: var(--text-medium) !important; }
.background-text-light      { background-color: var(--text-light) !important; }
.background-text-on-gold    { background-color: var(--text-on-gold) !important; }

/* =============================================
 * TEXT INVERT / CONTRAST UTILITY CLASSES
 * ============================================= */

/* Base invert class - good default for gold backgrounds */
.invert-text {
    color: var(--text-on-gold) !important;
}

/* Dark backgrounds → Light text */
.bg-primary-black .invert-text,
.background-primary-black .invert-text,
.bg-black .invert-text,
.background-black .invert-text {
    color: var(--white) !important;
}

/* Gold / Light backgrounds → Dark text on gold */
.bg-pirate-gold .invert-text,
.background-pirate-gold .invert-text,
.bg-cream-gold .invert-text,
.background-cream-gold .invert-text {
    color: var(--text-on-gold) !important;
}

/* White / Page background → Dark text */
.bg-white .invert-text,
.background-white .invert-text,
.bg-page-bg .invert-text,
.background-page-bg .invert-text {
    color: var(--text-dark) !important;
}

/* =============================================
 * TYPOGRAPHY
 * ============================================= */
h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--font-headings);
    color: var(--primary-black) !important;
    font-weight: 700;
    line-height: 1.2;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-headings);
    color: var(--pirate-gold) !important;
    font-weight: 600;
}

h2 a, h3 a, h4 a, h5 a, h6 a, 
ul.product_list_widget li .product-title, 
.tropicana-page-builders-use-theme-styles .elementor-widget-heading .elementor-heading-title, 
.site-content .rpwe-block h3.rpwe-title a {
    color: var(--pirate-gold) !important;
}

body, button, input, select, textarea {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.6;
}

/* =============================================
 * CORE LAYOUT
 * ============================================= */
body, .content-container, .site-content .rpwe-block li {
    background-color: var(--page-bg) !important;
}

.site-container.full-width { 
    max-width: 100%;
    width: 100%;
}

#content.site-container.site-content { 
    padding-bottom: 0px;
}

.site-footer-widgets {
    padding-bottom: 0px;
}

hr {
    background-color: var(--gold-200) !important;
}

/* =============================================
 * HEADER / NAVIGATION
 * ============================================= */
header.site-header {
    z-index: 999 !important;
}

.site-header.inline {
    display: block;
    margin: 0px;
}

.site-header .branding {
    padding: 7px 0 21px 0;
}

.site-header.center .branding {
    padding: 0px;
    padding-bottom: 12px;
}

.site-header .site-top-bar {
    background-color: var(--primary-black) !important;
    box-shadow: 0px -10px 12px -8px rgba(0, 0, 0, .25) inset;
    border-bottom: 1px solid var(--black-200);
    color: var(--text-light);
}

.site-header .site-top-bar * {
    background-color: transparent !important;
    color: var(--text-light) !important;
}

.site-header .site-logo-area {
    background-color: var(--primary-black) !important;
}

.main-navigation {
    background-color: var(--primary-black) !important;
    border-bottom: none !important; /*1px solid var(--gold-200) !important;*/
    padding: 12px 0;
}

.main-navigation a {
    color: var(--pirate-gold) !important;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--pirate-gold) !important;
    text-decoration: none;
}

.site-header.transparent .site-header-right a {
    text-shadow: 0px 0px 2px rgba(255, 255, 255, .68), 0px 0px 1px rgba(0, 0, 0, .68);
    font-weight: 600;
}


/* === Inline Logo Header === */
.site-logo-area .branding img.custom-logo {
  max-height: 125px;
  width: auto;
}


/* === Centered Logo Header (for header-left-aligned-center-logo.php) === */
.site-logo-area.logo-centered .branding.logo-center {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.site-logo-area.logo-centered .site-header-right {
    /* Keeps social/shop links on the right */
    float: right;
}

/* Optional: Make logo larger or adjust spacing if needed */
.site-logo-area.logo-centered .branding img.custom-logo {
    max-height: 80px; /* adjust as needed */
}

/* === Left-aligned Centered Logo Header (specific template/layout) === */
.left-aligned-centered-logo .branding.logo-center {
    padding: 5px 0 5px 0;
}

.left-aligned-centered-logo .branding.logo-center img.custom-logo {
    width: auto;
    max-height: 105px;
}


.main-menu-close {
	/*z-index: 9999;*/
}


/* =============================================
   HOME PAGE STYLES
   ============================================= */

/* ---------- HERO SECTION ---------- */
.hero.home-hero {
    position: relative;
    min-height: 620px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
}

.hero.home-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(17, 17, 17, 0.65), rgba(17, 17, 17, 0.75));
    display: flex;
    align-items: center;
}

.hero.home-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.hero.home-hero .hero-logo {
    max-width: 220px;
    margin-bottom: 25px;
}

.hero.home-hero .hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}

.hero.home-hero .hero-title .text-gold {
    color: var(--pirate-gold);
}

.hero.home-hero .hero-subtitle {
    font-size: 1.35rem;
    margin-bottom: 35px;
    color: #f0f0f0;
}

.hero.home-hero .hero-cta .btn {
    margin: 8px;
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 600;
}


/* ---------- IMPACT STATS SECTION ---------- */
.impact-section {
    padding: 35px 0;
}

.impact-stat {
    background: var(--cream-gold);
    border: 2px solid var(--pirate-gold);
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    transition: transform 0.3s ease;
    height: 100%;
}

.impact-stat:hover {
    transform: translateY(-6px);
}

.impact-stat .impact-icon {
    font-size: 2.1em; /* 2.8rem;*/
	margin-bottom: 12px;
	color: var(--primary-black);
	position: absolute;
	height: auto;
	width: auto;
	top: 20px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	opacity: 0.1;
    transition: opacity 0.3s ease;
}


@media (max-width: 768px) {
    .impact-stat .impact-icon {
		max-width: 90%;
    }
}

.impact-stat .impact-icon:hover {
	opacity: 1;
    transition: opacity 0.3s ease .02s;
}

.impact-stat .impact-number {
    font-size: 2.1em;
    font-weight: 800;
    color: var(--pirate-gold);
    margin-bottom: 8px;
}

.impact-stat .impact-label {
    font-size: 0.8em; /*1.05rem;*/
    color: var(--cream-gold);
    line-height: 1.4;
}
.impact-section .row {
    display: flex;
    flex-wrap: wrap;
}

.impact-stat {
    background-color: var(--black-300)	;
    border-left: 3px solid #C9A961;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--cream-gold);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    border-radius: 8px;
    flex: 1;
    box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, .5); 
    transition: box-shadow .87s ease 0s;
}

.impact-stat:hover {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 05);
    transition: box-shadow .87s ease 0s;
}

.impact-icon {
    width: 95px;
    height: 95px;
    margin: 0 auto 1.5rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific Icons */
.icon-skull-coins      { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-skull-on-coins_400x400.png'); }
.icon-stretcher        { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-on-stretcher_400x400.png'); }
.icon-handshake        { background-image: url('/wp-content/themes/tropicana-child/icons/pirates-shaking-hands_400x400.png'); }

.impact-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #C9A961;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.impact-label {
    font-size: 1.1rem;           /* ≥18px */
    color: #FFFFFF;
    line-height: 1.55;
}

.impact-label small {
    font-size: 0.95rem;
    color: #E0E0E0;
}


/* ---------- WAYS TO SUPPORT SECTION ---------- */
.support-section {
    padding: 35px 0;
}

.support-card {
    background: #fff;
    border: 2px solid var(--pirate-gold);
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.support-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.support-card .support-icon {
    font-size: 2.6rem;
    margin-bottom: 18px;
    color: var(--pirate-gold);
}

.support-card h4 {
    font-size: 1.35rem;
    margin-bottom: 15px;
    color: var(--primary-black);
}

.support-card p {
    font-size: 1rem;
    margin-bottom: 22px;
    color: #444;
}

.support-section .row {
    display: flex;
    flex-wrap: wrap;
}

.support-card {
    background-color: #111111;
    border: 1px solid #C9A961;
    border-radius: 8px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    flex: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.support-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific Icons */
.icon-town-building    { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-town-building_400x400.png'); }
.icon-family           { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-family_400x400.png'); filter: grayscale(1); }
.icon-serving-hotdog   { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-serving-hotdog_400x400.png'); }
.icon-buying-gear      { background-image: url('/wp-content/themes/tropicana-child/icons/pirate-buying-gear_400x400.png'); }

.support-card h4 {
    font-family: 'Montserrat', sans-serif;
    color: #C9A961;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.support-card p {
    font-size: 1.4rem;           /* ≥18px */
    color: #FFFFFF;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.support-card .btn {
    margin-top: auto;
}

/* ---------- SPONSORS SECTION ---------- */
.sponsors-section {
    padding: 60px 0;
    background: #f8f5f0;
}

.sponsor-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.sponsor-logo {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border-radius: 8px;
}


/* =============================================
   RESPONSIVE ADJUSTMENTS (Home Page)
   ============================================= */
@media (max-width: 768px) {
    .hero.home-hero {
        min-height: 520px;
    }
    
    .hero.home-hero .hero-title {
        font-size: 2.4rem;
    }
    
    .hero.home-hero .hero-subtitle {
        font-size: 1.15rem;
    }
    
    .impact-stat {
        margin-bottom: 25px;
    }
}


/* === ABOUT US PAGE === */
/* === SECTION WITH SIDE ICON (Alternating Left/Right) === */
.section-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.section-with-icon.icon-left {
    flex-direction: row;
}

.section-with-icon.icon-right {
    flex-direction: row-reverse;
}

.section-icon {
    width: 300px;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
}

.section-text {
    flex: 1;
}

.section-text h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.section-text p {
    margin-bottom: 1.2em;
    line-height: 1.7;
}

.about-hero {
    min-height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.about-hero .hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.about-hero h1 {
    font-size: 3.5rem;
    margin: 0 0 15px 0;
    line-height: 1.1;
    text-align: center;
}

.about-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px;
}

/* Clear visual distinction between sections */
.mission-section, {
    background: #f8f5f0;
    border: 0px solid #e8e0d0;
    border-radius: 12px;
    margin-bottom: 40px;
}

.booster-bio-section {
    background: #f8f5f0;
    border: 1px solid #e8e0d0;
    border-radius: 12px;
    margin-bottom: 40px;
}

/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 30px;
}

.page-home .section-header {
  display: block;
  margin-bottom: 30px;
}

.vintage-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

/* === NEW: Icon to the LEFT of text in Bio === */
.bio-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.vintage-icon-left {
    width: 300px;
    height: auto;
    flex-shrink: 0;
    margin-top: 8px;
}

.bio-text {
    flex: 1;
}

.bio-text p {
    margin-bottom: 1.2em;
    line-height: 1.7;
}

/* Full width wrappers */
.full-width-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Impact - Gold */
.bg-gold {
    background-color: #C9A961;
    color: #111111;
}

.full-width-gold {
    padding: 70px 20px;
}

.full-width-gold .section-header h2 {
    color: #111111 !important;
}

.impact-intro {
    margin-bottom: 25px;
}

.impact-list {
    columns: 2;
    gap: 40px;
    margin-bottom: 30px;
}

.impact-goal {
    margin-top: 20px;
}

/* Transparency - Black */
.bg-black {
    background-color: #111111;
    color: #FFFFFF;
}

.full-width-black {
    padding: 70px 20px;
}

.full-width-black .section-header h2 {
    color: #C9A961 !important;
}

.full-width-black a {
    color: #C9A961;
}

.invert-dark {
    filter: invert(1);
}

/* Responsive */
@media (max-width: 768px) {
    .bio-with-icon {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .vintage-icon-left {
        margin-bottom: 20px;
    }
    
    .impact-list {
        columns: 1;
    }
    
    .about-section {
        padding: 50px 15px;
    }
}





/* Sponsorship Page - Large Images */
.section-icon.large {
    width: 420px;
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
    .section-icon.large {
        width: 100%;
        max-width: 420px;
        margin: 0 auto 30px;
    }
    
    .section-with-icon {
        flex-direction: column;
        text-align: center;
    }
    
    .section-with-icon.icon-right {
        flex-direction: column-reverse;
    }
}

/* Sponsorship Page Improvements */
.sponsorship-level {
    background: #f8f5f0;
    border: 1px solid #e8e0d0;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
}

.section-with-icon {
    align-items: center;
}

.sponsorship-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Style WooCommerce Add to Cart buttons to match theme */
.woocommerce .button,
.sponsorship-actions .button {
    background-color: #C9A961 !important;
    color: #111111 !important;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce .button:hover {
    background-color: #b38a4a !important;
    color: #fff !important;
}

.gold-button {
    background: #C9A961;
    color: #111;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.gold-button:hover {
    background: #b38a4a;
    color: #fff;
}

.black-button {
    background: #111111;
    color: #F5E8C7;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.black-button:hover {
    background: #b38a4a;
    color: #fff;
}


/* === SPONSORSHIP PAGE - 3 COLUMN GRID === */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.sponsor-card {
    background: #f8f5f0;
    border: 1px solid #e8e0d0;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sponsor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.sponsor-card img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.sponsor-card h3 {
    margin-bottom: 15px;
    color: #111;
}

.sponsor-card p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.page-sponsorship .about-section.half-padding {
  padding: 35px 20px;
}

/* Responsive - Stack on mobile */
@media (max-width: 900px) {
    .sponsor-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}



/* =============================================
 * HERO / SLIDER
 * ============================================= */
/* =============================================
   SMART SLIDER 3 - HOME PAGE HERO STYLING
   ============================================= */

/* Main slider container */
.n2-section-smartslider {
    margin-bottom: 0;
}

/* General text layers inside Smart Slider */
.n2-ss-layer,
.n2-ss-item-content.n2-ss-text {
    color: #ffffff;
}

/* Headline styling */
#n2-ss-3item1,
.n2-ss-layer h1,
.n2-ss-item-content.n2-ss-text[style*="font-size"] {
    font-family: var(--font-headings);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* Gold text inside slider */
.text-gold,
.gold-text,
.n2-ss-item-content span.text-gold {
    color: var(--pirate-gold) !important;
}

/* Subtitle styling */
#n2-ss-3item2,
.n2-ss-layer p {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: #f0f0f0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    margin-top: 12px;
}

/* =============================================
   SMART SLIDER 3 - BUTTON STYLING (Clean)
   ============================================= */

/* Gold / Primary Button */
.n2-ss-button-container a {
    background-color: var(--pirate-gold) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 16px 36px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.n2-ss-button-container a:hover {
    background-color: var(--gold-400) !important;
    color: var(--text-on-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* White Outline Button (Get Involved) */
.n2-ss-button-container a[href*="get-involved"],
.n2-ss-button-container a[href*="/get-involved/"] {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

.n2-ss-button-container a[href*="get-involved"]:hover,
.n2-ss-button-container a[href*="/get-involved/"]:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

/* Remove any double borders or Smart Slider defaults */
.n2-ss-button-container {
    border: none !important;
}

.n2-ss-button-container a > div {
    border: none !important;
}

/* Make sure these work inside Smart Slider 3 */
.n2-ss-layer .text-gold,
.n2-ss-item-content .text-gold,
.n2-ss-layer .text-black,
.n2-ss-item-content .text-black,
.n2-ss-layer .text-white,
.n2-ss-item-content .text-white {
    color: inherit !important;
}

.n2-ss-layer .text-gold { color: var(--pirate-gold) !important; }
.n2-ss-layer .text-black { color: var(--primary-black) !important; }
.n2-ss-layer .text-white { color: #ffffff !important; }
/* end smart slider */
 
.hero .header-image .overlay-container .opacity.per-line h1 span, 
.hero .header-image .overlay-container .opacity.per-line h2 span, 
.hero .header-image .overlay-container .opacity.per-line h3 span, 
.hero .header-image .overlay-container .opacity.per-line p span {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    text-shadow: 0px 0px 0px rgb(255, 255, 255),
                 0px 0px 4px var(--overlay-shadow-strong),
                 0px 0px 4px var(--overlay-shadow-strong),
                 0px 0px 16px var(--text-shadow-white-strong);
    font-style: italic;
    font-size: 1.3em;
}

.header-image .overlay .cbc-headline-container .cbc-header,
.header-image .overlay .cbc-headline-container h2.cbc-header,
.header-image .overlay .cbc-headline-container h2.cbc-header > span {
    box-shadow: unset;
    background-color: rgba(0, 0, 0, 0);
    text-shadow: -1px -1px 0px var(--primary-black),
                 0px 0px 4px var(--text-shadow-white);
}

.slider-padder {
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 05);
	z-index: 1;
	position: relative;
}

.slider-padder h2, 
.slider-padder h3, 
.slider-padder h4, 
.slider-padder h5, 
.slider-padder h6, 
.slider-padder h2 a, 
.slider-padder h3 a, 
.slider-padder h4 a, 
.slider-padder h5 a, 
.slider-padder h6 a {
    color: var(--primary-black) !important;
}

/* =============================================
 * UTILITY CLASSES (Reusable across projects)
 * ============================================= */
/* Gold text */
.text-gold {
    color: var(--pirate-gold) !important;
}

/* Black text */
.text-black {
    color: var(--primary-black) !important;
}

/* White text */
.text-white {
    color: #ffffff !important;
}

.numbers,
.numbers > a {
    font-family: var(--font-numbers) !important;
    font-weight: 500;
    font-size: .85em;
}

.italic { font-style: italic; }

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.sub, .sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.sup { top: -0.5em; }
.sub { bottom: -0.25em; }

ul.checkmarks {
    list-style: none;
    padding: 0;
}

ul.checkmarks > li {
    padding-left: 1.5em;
}

ul.checkmarks > li:before {
    content: "\f00c";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 0.5em;
    width: 1.5em;
    font-size: 0.85em;
}

.list-item {
    padding-left: 0.25em;
}

.list-item:before {
    content: "\f111";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: 0.5em;
    width: 1.5em;
    font-size: 0.5em;
    line-height: 1.85em;
    vertical-align: top;
}

.list-item.check:before { content: "\f00c"; font-size: 0.6em; line-height: 1.7em; }
.list-item.question-circle:before { content: "\f059"; font-size: 0.6em; line-height: 1.7em; }

img.shadow {
	box-shadow: 0px 0px 4px 1px var(--shadow-black-strong);
	border: 1px solid rgba(0, 0, 0, .48);
}

.cbc-full-width, .cbc-full-width-wrap, .full-width-wrap {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.cbc-inside-shadow {
    box-shadow: 0px 4px 9px 3px var(--shadow-black-strong) inset;
}

ul.cbc-li-spaced > li {
    margin-bottom: 20px;
}

.cbc-no-link,
.cbc-no-link.menu-item > a {
	cursor: default;
}

#gmap_canvas img{
  max-width: none !important;
  min-width: auto !important;
  background: none !important;
}

/*panels*/
.panel .panel-heading .panel-title:after {
    font-family: 'Glyphicons Halflings';
    content: "\e113";
	font-size: 1rem;
	margin-left: 10px;
}

.panel .panel-heading .panel-title.collapsed:after {
    content: "\e114";
}

/*other*/
::selection {
	color: inherit !important;
	background-color: var(--selection-bg) !important;
}

.error-message,
.success-message,
.warning-message, 
.failed-message,
.notice-message {
    border-radius: 0.25em;
    display: inline-block;
    font-weight: 700;
    padding: 9px 7px 5px 7px;
    white-space: pre-wrap;
    margin-top: 5px;
    margin-bottom: 20px;
    width: 100%;
}

.error-message .fa,
.success-message .fa,
.warning-message .fa, 
.failed-message .fa,
.notice-message .fa {
    margin-right: 2px;
}

.error-message {
    background-color: var(--color-error);
    border: 1px solid rgba(0, 0, 0, 0.69);
    color: rgba(0, 0, 0, .97);
}

.success-message {
    background-color: var(--color-success);
    border: 1px solid rgba(0, 0, 0, 0.69);
    color: rgba(0, 0, 0, .97);
}

.warning-message {
    background-color: var(--color-warning);
    border: 1px solid rgba(0, 0, 0, 0.69);
    color: rgba(0, 0, 0, .97);
}

.failed-message {
    background-color: rgba(0, 255, 255, .69);
    border: 1px solid rgba(0, 0, 0, 0.69);
    color: rgba(0, 0, 0, .97);
}

.notice-message {
    background-color: var(--color-notice);
    border: 1px solid rgba(0, 0, 0, 0.69);
    color: rgba(0, 0, 0, .97);
}

.pointer,
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-wait {
    cursor: wait;
}

.cursor-loading {
    cursor: progress;
}

.cursor-none {
    cursor: none;
}

.cursor-blocked,
.cursor-not-allowed,
.disabled {
    cursor: not-allowed;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}
    
.inline {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}
.inline:first-child {
    margin-left: 0px;
}
.inline:last-child {
    margin-right: 0px;
}

.nowrap {
    white-space: nowrap;
}

span.tab:before {
    content: '\00A0\00A0\00A0\00A0\00A0';
}

.shadow-dark {
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 7px 3px var(--shadow-black-strong);
}

.shadow-dark-hover {
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: 0 0 7px -7px var(--shadow-black-strong);
    transition: all .87s ease 0s;
}

.shadow-dark-hover:hover {
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 7px 3px var(--shadow-black-strong);
    transition: all .87s ease 0s;
}

.drop-shadow {
	box-shadow: 0px 1px 2px 0px var(--shadow-black);
}

.drop-shadow-25 {
	box-shadow: 0px 1px 2px 0px var(--shadow-black-light);
}

.drop-shadow-50 {
	box-shadow: 0px 1px 2px 0px var(--shadow-black);
}

.drop-shadow-75 {
	box-shadow: 0px 1px 2px 0px var(--shadow-black-strong);
}

.drop-shadow-white {
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.5);
}

.drop-shadow-white-25 {
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.25);
}

.drop-shadow-white-50 {
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.5);
}

.drop-shadow-white-75 {
	box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.75);
}

.faded {
    opacity: 0.6;
}

.faded:hover,
.faded:focus {
    opacity: 1;
}

.rounded {
    border-radius: 13px;
}

.rounded-circle {
    border-radius: 50% !important;
}

.mt--30 { margin-top: -30px !important; }
.mt--25 { margin-top: -25px !important; }
.mt--20 { margin-top: -20px !important; }
.mt--15 { margin-top: -15px !important; }
.mt--10 { margin-top: -10px !important; }
.mt--5 { margin-top: -5px !important; }

.mb--30 { margin-bottom: -30px !important; }
.mb--25 { margin-bottom: -25px !important; }
.mb--20 { margin-bottom: -20px !important; }
.mb--15 { margin-bottom: -15px !important; }
.mb--10 { margin-bottom: -10px !important; }
.mb--5 { margin-bottom: -5px !important; }

.ml--30 { margin-left: -30px !important; }
.ml--25 { margin-left: -25px !important; }
.ml--20 { margin-left: -20px !important; }
.ml--15 { margin-left: -15px !important; }
.ml--10 { margin-left: -10px !important; }
.ml--5 { margin-left: -5px !important; }

.mr--30 { margin-right: -30px !important; }
.mr--25 { margin-right: -25px !important; }
.mr--20 { margin-right: -20px !important; }
.mr--15 { margin-right: -15px !important; }
.mr--10 { margin-right: -10px !important; }
.mr--5 { margin-right: -5px !important; }

.mt-30 { margin-top: 30px !important; }
.mt-25 { margin-top: 25px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-0 { margin-top: 0px !important; }

.mb-30 { margin-bottom: 30px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-0 { margin-bottom: 0px !important; }

.ml-30 { margin-left: 30px !important; }
.ml-25 { margin-left: 25px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-15 { margin-left: 15px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-5 { margin-left: 5px !important; }
.ml-0 { margin-left: 0px !important; }

.mr-30 { margin-right: 30px !important; }
.mr-25 { margin-right: 25px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-15 { margin-right: 15px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-5 { margin-right: 5px !important; }
.mr-0 { margin-right: 0px !important; }

.margin-0 { margin: 0px !important; }

.mt-auto, .mtb-auto { margin-top: auto !important; }
.mb-auto, .mtb-auto { margin-bottom: auto !important; }
.ml-auto, .mlr-auto { margin-left: auto !important; }
.mr-auto, .mlr-auto { margin-right: auto !important; }

.pt-30 { padding-top: 30px !important; }
.pt-25 { padding-top: 25px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-15 { padding-top: 15px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-5 { padding-top: 5px !important; }
.pt-0 { padding-top: 0px !important; }

.pb-30 { padding-bottom: 30px !important; }
.pb-25 { padding-bottom: 25px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-15 { padding-bottom: 15px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-5 { padding-bottom: 5px !important; }
.pb-0 { padding-bottom: 0px !important; }

.pl-30 { padding-left: 30px !important; }
.pl-25 { padding-left: 25px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-15 { padding-left: 15px !important; }
.pl-10 { padding-left: 10px !important; }
.pl-5 { padding-left: 5px !important; }
.pl-0 { padding-left: 0px !important; }

.pr-30 { padding-right: 30px !important; }
.pr-25 { padding-right: 25px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-15 { padding-right: 15px !important; }
.pr-10 { padding-right: 10px !important; }
.pr-5 { padding-right: 5px !important; }
.pr-0 { padding-right: 0px !important; }

.padding-0 { padding: 0px !important; }

/* =============================================
 * COMPONENTS 
 * ============================================= */

/* Forms */
div.wpforms-container form.wpforms-form input[type="text"],
div.wpforms-container form.wpforms-form input[type="email"],
div.wpforms-container form.wpforms-form textarea,
input[type="text"], input[type="email"], textarea {
    width: 100%;
    border: 1px solid var(--gold-200);
    border-radius: 4px;
    padding: 12px;
}

div.wpforms-container form.wpforms-form button[type="submit"],
.woocommerce button.button {
    background-color: var(--pirate-gold);
    color: var(--text-on-gold);
    font-weight: 600;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

div.wpforms-container form.wpforms-form button[type="submit"]:hover,
.woocommerce button.button:hover {
    background-color: var(--gold-400);
}

/* =============================================
 * LEGACY / PREVIOUS PROJECT STYLES
 * These styles were carried over from earlier projects.
 * They are preserved for reference but are **not** part of the
 * current Pagosa Boosters design system.
 * They can be safely removed once confirmed they are unused.
 * ============================================= */

/* slider styles */
.slide-text-top { position: absolute !important; top: 5px; margin: 0px !important; }
.slide-text-top-left { position: absolute !important; top: 5px; left: 5px; margin: 0px !important; }
.slide-text-top-right { position: absolute !important; top: 5px; right: 5px; margin: 0px !important; }
.slide-text-bottom { position: absolute !important; bottom: 5px; margin: 0px !important; }
.slide-text-bottom-left { position: absolute !important; bottom: 5px; left: 5px; margin: 0px !important; }
.slide-text-bottom-right { position: absolute !important; bottom: 5px; right: 5px; margin: 0px !important; }
.slide-text-top-bar { position: absolute !important; top: 0; left: 0; right: 0; margin: 0px !important; }
.slide-text-bottom-bar { position: absolute !important; bottom: 0; left: 0; right: 0; margin: 0px !important; }

/* services buttons (legacy) */
#services { margin-top: 2rem; margin-bottom: 1rem; padding: 0px; }
.services-header { margin-bottom: 2rem; text-decoration: underline; }
.services-header.white { color: rgba(255, 255, 255, .87) !important; text-shadow: 0px 0px 9px rgba(0, 0, 0, .978) !important; }
.services-header.white > span { box-shadow: unset !important; background-color: rgba(0, 0, 0, 0) !important; }

.services-button-wrap { }
.services-button-wrap * { transition: all 0.75s ease 0s; }
.services-button-wrap > div { background-color: rgba(0, 0, 0, 0); margin-bottom: 25px; }
.services-button-wrap > div > a { color: rgba(0, 0, 0, .93); }
.services-button-wrap > div:hover > a, .services-button-wrap > div >:focus a { text-decoration: none; }

.services-button-wrap .services-button {
    background-color: rgba(213, 164, 64, 0.33);
    border: 1px solid rgba(213, 164, 64, 0.58);
    border-radius: 21px;
    box-shadow: 0px 0px 3px 2px rgba(213, 164, 64, 0.39);
    padding: 18px;
    height: 240px;
    position: relative;
    overflow: hidden;
}

.services-button-wrap > div:hover > a .services-button,
.services-button-wrap > div:hover > a .services-button, 
.services-button-wrap .services-button.hovered {
    background-color: rgba(213, 164, 64, 0.54);
    border: 1px solid rgba(173, 215, 221, 0.69);
    border-radius: 100%;
    box-shadow: 0px 0px 7px 5px rgba(173, 215, 221, 0.57);
}

.services-button-wrap .services-button.white {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(176, 198, 229, 0.58);
    border-radius: 21px;
    box-shadow: 0px 0px 3px 2px rgba(176, 198, 229, 0.39);
    padding: 18px;
    height: 240px;
    position: relative;
    overflow: hidden;
}

.services-button-wrap > div:hover > a .services-button.white,
.services-button-wrap > div:focus > a .services-button.white, 
.services-button-wrap .services-button.white.hovered {
    background-color: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(176, 198, 229, 0.69);
    border-radius: 100%;
    box-shadow: 0px 0px 7px 5px rgba(176, 198, 229, 0.57);
}

.services-button-wrap .services-button.clear {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(176, 198, 229, 0.58);
    border-radius: 21px;
    box-shadow: 0px 0px 3px 2px rgba(176, 198, 229, 0.39);
    padding: 18px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.services-button-wrap > div:hover > a .services-button.clear,
.services-button-wrap > div:focus > a .services-button.clear, 
.services-button-wrap .services-button.clear.hovered {
    background-color: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(105, 126, 165, 0.69);
    border-radius: 21px;
    box-shadow: 0px 0px 7px 5px rgba(105, 126, 165, 0.87);
}

.services-button-wrap .services-button.clear h2,
.services-button-wrap .services-button.clear p {
	color: #2d3a84 !important;
    position: relative;
	z-index: 1;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, .5),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255);
}

.services-button-wrap .services-button.clear h2 span,
.services-button-wrap .services-button.clear p span {
	background-color: rgba(0, 0, 0, 0) !important;
	box-shadow: unset !important;
}

.services-button-wrap .services-button.clear:hover .services-button-inner * {
    text-shadow: 0px 0px 1px rgba(0, 0, 0, .5),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255),0px 0px 12px rgb(255, 255, 255);
}
    
.services-button-wrap .services-button.clear .services-button-bg {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    opacity: .6;
}

.services-button-wrap .services-button.clear:hover .services-button-bg {
    opacity: .90;
}

.services-button-wrap .services-button.green {
    background-color: rgba(173, 215, 221, 0.45);
    color: rgba(1, 72, 78, 0.78);
}

.services-button-wrap > div:hover > a .services-button.green,
.services-button-wrap > div:hover > a .services-button.green {
    background-color: rgba(1, 72, 78, 0.87);
    color: rgba(173, 215, 221, 0.87);
}

.services-button-wrap > div:hover > a .services-button.green * {
    color: rgba(173, 215, 221, 0.87);
}

.services-button-wrap .services-button.blue {
    background-color: rgba(1, 72, 78, 0.87);
    color: rgba(173, 215, 221, 0.78);
}

.services-button-wrap > div:hover > a .services-button.blue,
.services-button-wrap > div:hover > a .services-button.blue {
    background-color: rgba(173, 215, 221, 0.45);
    color: rgba(1, 72, 78, 0.78);
}

.services-button-wrap .services-button.orange {
    background-color: rgba(255, 128, 0, 0.69);
    color: rgba(0, 0, 45, 0.78);
}

.services-button-wrap > div:hover > a .services-button.orange,
.services-button-wrap > div:hover > a .services-button.orange {
    background-color: rgba(0, 250, 0, 0.45);
    color: rgba(0, 0, 45, 0.78);
}

.services-button-wrap > div:hover > a .services-button.hover-orange,
.services-button-wrap > div:hover > a .services-button.hover-orange {
    background-color: rgba(255, 128, 0, 0.87);
    color: rgba(0, 0, 45, 0.78);
}

.services-button-wrap > div:hover > a .services-button.hover-white,
.services-button-wrap > div:hover > a .services-button.hover-white {
    background-color: rgba(255, 255, 255, 0.75);
    color: rgba(1, 72, 78, 0.78);
}

.services-button-wrap .services-button.big-box {
    height: auto;
    padding: 48px;
}

.services-button-wrap .services-button h2 {
    margin: 15px auto 15px;
    text-decoration: underline;
    max-width: 80%;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.services-button-wrap .services-button h2 {
		font-size: 1.5rem;
	}
}

.services-button-wrap .services-button.big-box h2 {
    white-space: normal;
}
    
.services-button-wrap .services-button .services-button-bg {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    opacity: .12;
}

.services-button-wrap .services-button:hover .services-button-bg {
    opacity: .90;
}

.services-button-wrap .services-button:hover .services-button-inner * {
    text-shadow: 1px 0px 0px #000000, 2px 2px 0px rgba(173, 215, 221, 0.12), 2px -2px 0px rgba(173, 215, 221, 0.12), -2px 2px 0px rgba(173, 215, 221, 0.12), -2px -2px 0px rgba(173, 215, 221, 0.12);
}

.services-button-wrap .services-button:hover .services-button-inner h2.no-shadow {
	text-shadow: none;
	font-weight: 600;
}

/* =============================================
 * WOO COMMERCE / WIDGETS
 * ============================================= */
.widget-area .widget {
    display: inline-block;
    width: 100%;
}

.site-footer-widgets .site-container .widgets-container .widget {
    /*
    width: 100% !important;
    float: none !important;
    */
}

/* =============================================
 * FOOTER
 * ============================================= */
footer.site-footer {
    box-shadow: 0px 0px 12px 3px var(--shadow-black-strong);
}

footer.site-footer a {
    color: var(--pirate-gold);
    text-decoration: underline;
}

footer.site-footer a:hover {
    color: var(--gold-400);
}

footer.site-footer .widgettitle {
    color: var(--text-light) !important;
}

/* =============================================
 * RESPONSIVE
 * ============================================= */
@media only screen and (max-width: 991px) {
    .main-navigation #main-menu {
        background-color: var(--primary-black) !important;
    }
    
    .main-navigation a, .main-navigation li a {
        color: var(--text-light) !important;
    }
}

/* =============================================
 * FINAL NOTES & NEXT STEPS
 * =============================================
 * Version 1.0.1 Changes:
 * - All hard-coded colors in active sections (Hero, Utilities, Components, Footer)
 *   have been replaced with centralized :root variables for shadows, overlays,
 *   selection, and semantic feedback colors.
 * - New variables added: --shadow-black*, --text-shadow-white*, --overlay-shadow-strong,
 *   --color-error/success/warning/notice, --selection-bg
 * - Legacy section left mostly untouched (as it contains old project-specific colors)
 * - Filename now includes version for easier tracking
 *
================================================================================
*/