/*
Theme Name:   Event Activated
Theme URI:    https://eventactivated.com
Description:  Event Activated child theme of Twenty Seventeen
Author:       Event Activated
Template:     twentyseventeen
Version:      1.0.0
Text Domain:  eventactivated
*/

/* ================================================================
   EVENT ACTIVATED — Custom Theme Styles
   Child theme of Twenty Seventeen
   ================================================================

   TABLE OF CONTENTS
   1.  CSS Variables (brand tokens)
   2.  Global / Typography
   3.  Links
   4.  Site Header & Site Title
   5.  Navigation
   6.  "Get a Quote" Nav Button
   7.  Hero / Custom Header Area
   8.  Buttons
   9.  Front Page Panels
   10. Page & Entry Headers
   11. Widget Titles
   12. Footer
   13. Contact Form (CF7 + WPForms)
   14. Gallery Plugin Accents (Envira / FooGallery)
   15. Blockquotes & Separators
   16. Utility Classes

   ================================================================ */


/* ----------------------------------------------------------------
   1. CSS VARIABLES (brand tokens)
   ---------------------------------------------------------------- */
:root {
    --ea-navy:      #0D1B2A;   /* Deep Navy — primary brand */
    --ea-orange:    #FF6535;   /* Activation Orange — accent */
    --ea-orange-dk: #E5592E;   /* Darker orange for hover states */
    --ea-light:     #F8F9FA;   /* Off-white — section backgrounds */
    --ea-dark:      #1A1A1A;   /* Dark charcoal — body text */
    --ea-grey:      #6B7280;   /* Mid grey — subtext / captions */
    --ea-white:     #FFFFFF;
}


/* ----------------------------------------------------------------
   2. GLOBAL / TYPOGRAPHY
   ---------------------------------------------------------------- */
body {
    color: var(--ea-dark);
}

h1 {
    color: var(--ea-navy);
}

h2 {
    color: var(--ea-orange);
}

h3, h4, h5, h6 {
    color: var(--ea-navy);
}

/* Twenty Seventeen entry titles */
.entry-title,
.entry-title a {
    color: var(--ea-navy);
}

p {
    line-height: 1.75;
}


/* ----------------------------------------------------------------
   3. LINKS
   ---------------------------------------------------------------- */
a {
    color: var(--ea-orange);
}

a:hover,
a:focus {
    color: var(--ea-orange-dk);
}


/* ----------------------------------------------------------------
   4. SITE HEADER & SITE TITLE
   ---------------------------------------------------------------- */
.site-header {
    background-color: var(--ea-navy);
}

/* Logo / site title */
.site-branding .site-title a {
    color: var(--ea-white);
}

.site-branding .site-title a:hover {
    color: var(--ea-orange);
}

/* Tagline */
.site-branding .site-description {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

/* Header on inner (non-front) pages */
.page-two-column .site-header {
    background-color: var(--ea-navy);
}


/* ----------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------- */

/* Top-level nav links */
.main-navigation a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.main-navigation a:hover {
    color: var(--ea-orange);
}

/* Active / current page link */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a {
    color: var(--ea-orange);
}

/* Mobile toggle button */
.menu-toggle {
    color: var(--ea-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--ea-orange);
    border-color: var(--ea-orange);
}

/* Dropdown toggle arrow */
.main-navigation .dropdown-toggle {
    color: rgba(255, 255, 255, 0.7);
}

.main-navigation .dropdown-toggle:hover {
    color: var(--ea-orange);
}

/* ——— Desktop dropdown menus ——— */
@media screen and (min-width: 48em) {

    .main-navigation ul ul {
        background-color: var(--ea-navy);
        border-top: 3px solid var(--ea-orange);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    .main-navigation ul ul a {
        color: rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 10px 20px;
    }

    .main-navigation ul ul a:hover {
        background-color: rgba(255, 101, 53, 0.12);
        color: var(--ea-orange);
    }

    /* Social links in nav (if used) */
    .social-navigation a {
        color: rgba(255, 255, 255, 0.7);
    }

    .social-navigation a:hover {
        color: var(--ea-orange);
    }
}


/* ----------------------------------------------------------------
   6. "GET A QUOTE" NAV BUTTON

   HOW TO ACTIVATE:
   1. Go to Appearance → Menus
   2. Click "Screen Options" (top right) and enable "CSS Classes"
   3. Expand your "Get a Quote" menu item
   4. In the "CSS Classes" field, type:  menu-button
   5. Save the menu
   ---------------------------------------------------------------- */
.menu-item.menu-button > a {
    background-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
    padding: 8px 20px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    margin-left: 8px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.menu-item.menu-button > a:hover {
    background-color: var(--ea-orange-dk) !important;
    color: var(--ea-white) !important;
    transform: translateY(-1px);
}


/* ----------------------------------------------------------------
   7. HERO / CUSTOM HEADER AREA

   Twenty Seventeen uses .custom-header and .custom-header-media
   for the large front-page background image/video.
   ---------------------------------------------------------------- */

/* Dark overlay on hero — improves text legibility */
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
    filter: brightness(0.55);
}

/* Hero text container */
.hero-text-container {
    background-color: transparent;
}

/* Site title shown in hero (front page) */
.hero-text-container .site-title a {
    color: var(--ea-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-text-container .site-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Scroll-down arrow */
.hero-text-container .scroll-down a {
    color: var(--ea-orange);
}


/* ----------------------------------------------------------------
   8. BUTTONS

   Covers: Gutenberg buttons, input[type="submit"], generic .button
   ---------------------------------------------------------------- */

/* Primary button */
.wp-block-button .wp-block-button__link,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.button,
.wp-element-button {
    background-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    padding: 14px 30px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover,
.wp-element-button:hover {
    background-color: var(--ea-orange-dk) !important;
    transform: translateY(-1px);
}

/* Outline / secondary button style */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--ea-orange) !important;
    border: 2px solid var(--ea-orange) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
}


/* ----------------------------------------------------------------
   9. FRONT PAGE PANELS

   Twenty Seventeen uses .panel-image-wrap for the panel background
   and .panel-content for the text area.
   ---------------------------------------------------------------- */

/* Default panel background */
.panel-content {
    background-color: var(--ea-white);
}

/* Alternate panel backgrounds */
.panel:nth-child(even) .panel-content {
    background-color: var(--ea-light);
}

/* Panel headings */
.panel-title,
.panel-title a {
    color: var(--ea-navy);
}

/* Orange accent under panel number / label */
.panel-content .recent-posts > header,
.panel-content .featured-content > header {
    border-bottom: 3px solid var(--ea-orange);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

/* Panel section number */
.panel-content .section-number {
    color: var(--ea-orange);
    opacity: 0.6;
}


/* ----------------------------------------------------------------
   10. PAGE & ENTRY HEADERS
   ---------------------------------------------------------------- */

/* Page title with orange underline accent */
.entry-header .entry-title {
    color: var(--ea-navy);
    position: relative;
    padding-bottom: 16px;
}

.entry-header .entry-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--ea-orange);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Centre the underline on centred headings */
.entry-header.aligncenter .entry-title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Archive and category titles */
.page-header .page-title {
    color: var(--ea-navy);
}


/* ----------------------------------------------------------------
   11. WIDGET TITLES
   ---------------------------------------------------------------- */
.widget-title {
    color: var(--ea-navy);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--ea-orange);
    padding-bottom: 8px;
    margin-bottom: 16px;
}


/* ----------------------------------------------------------------
   12. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
    background-color: var(--ea-navy);
    color: rgba(255, 255, 255, 0.70);
}

/* Footer links */
.site-footer a {
    color: var(--ea-orange);
}

.site-footer a:hover {
    color: var(--ea-white);
}

/* Footer copyright / site info */
.site-footer .site-info {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

/* Footer widget headings */
.site-footer .widget-title {
    color: var(--ea-white);
    border-bottom-color: var(--ea-orange);
}

/* Footer widget text */
.site-footer .widget {
    color: rgba(255, 255, 255, 0.70);
}

/* Footer social nav icons */
.site-footer .social-navigation a {
    color: rgba(255, 255, 255, 0.70);
}

.site-footer .social-navigation a:hover {
    color: var(--ea-orange);
}


/* ----------------------------------------------------------------
   13. CONTACT FORMS

   Styles for Contact Form 7 (.wpcf7) and WPForms (.wpforms-form)
   ---------------------------------------------------------------- */

/* Form field inputs */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field select,
.wpforms-field textarea {
    border: 1px solid #dde1e7;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    color: var(--ea-dark);
    background-color: var(--ea-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
    outline: none;
    border-color: var(--ea-orange);
    box-shadow: 0 0 0 3px rgba(255, 101, 53, 0.15);
}

/* Form labels */
.wpcf7-form label,
.wpforms-field-label {
    font-weight: 600;
    color: var(--ea-navy);
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

/* Submit buttons */
.wpcf7-submit,
.wpforms-submit {
    background-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 36px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    -webkit-appearance: none;
}

.wpcf7-submit:hover,
.wpforms-submit:hover {
    background-color: var(--ea-orange-dk) !important;
    transform: translateY(-1px);
}

/* CF7 success/error messages */
.wpcf7-response-output {
    border-radius: 4px;
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 15px;
}

.wpcf7-form.sent .wpcf7-response-output {
    background-color: #ecfdf5;
    border-color: #34d399;
    color: #065f46;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
    background-color: #fff7ed;
    border-color: var(--ea-orange);
    color: #9a3412;
}


/* ----------------------------------------------------------------
   14. GALLERY PLUGIN ACCENTS

   Styles for Envira Gallery and FooGallery filter buttons
   ---------------------------------------------------------------- */

/* FooGallery filter buttons */
.foogallery-filtering .fg-filter-btn,
.fg-filter-btn {
    border-color: var(--ea-navy);
    color: var(--ea-navy);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.foogallery-filtering .fg-filter-btn.fg-filter-btn-checked,
.foogallery-filtering .fg-filter-btn:hover,
.fg-filter-btn.fg-filter-btn-checked,
.fg-filter-btn:hover {
    background-color: var(--ea-orange) !important;
    border-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
}

/* Envira Gallery filter pills */
.envira-gallery-public .envira-album-public .envira-album-in.active-filter,
.envira-gallery-in.active-filter {
    background-color: var(--ea-orange) !important;
    border-color: var(--ea-orange) !important;
    color: var(--ea-white) !important;
}


/* ----------------------------------------------------------------
   15. BLOCKQUOTES & SEPARATORS
   ---------------------------------------------------------------- */

/* Styled blockquote — use for testimonials */
blockquote {
    border-left: 4px solid var(--ea-orange);
    background-color: var(--ea-light);
    padding: 20px 24px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--ea-grey);
}

blockquote cite {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-style: normal;
    color: var(--ea-navy);
    font-size: 14px;
}

/* Horizontal rule / separator */
hr,
.wp-block-separator {
    border-color: var(--ea-orange);
    border-width: 2px;
    opacity: 0.4;
}

.wp-block-separator.is-style-wide {
    border-color: var(--ea-orange);
    opacity: 0.25;
}


/* ----------------------------------------------------------------
   16. UTILITY CLASSES
   (Add these to blocks or elements via the "Additional CSS class"
    field in the Gutenberg block sidebar)
   ---------------------------------------------------------------- */

/* Orange accent text */
.text-accent {
    color: var(--ea-orange) !important;
}

/* Navy text */
.text-navy {
    color: var(--ea-navy) !important;
}

/* Navy background section */
.bg-navy {
    background-color: var(--ea-navy) !important;
    color: var(--ea-white) !important;
}

/* Light grey background section */
.bg-light {
    background-color: var(--ea-light) !important;
}

/* Orange top border accent on a block */
.border-top-accent {
    border-top: 4px solid var(--ea-orange);
    padding-top: 20px;
}