/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Custom Hello Elementor Child Theme for Strathfield Rotary Vocational Excellence Awards
Author: Rotary Club of Strathfield
Author URI: https://vocationalexcellence.com.au/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: #f7f9fb;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #191c1e;
}

body {
    overscroll-behavior: none;
}

::-webkit-scrollbar {
    display: none;
}

/* Material Symbols font MUST use !important to render icon glyphs correctly */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   GLOBAL HEADER & NAVIGATION
   ========================================================================== */

.rotary-header-nav a {
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    padding: 6px 10px;
    color: #44474c;
    transition: color 0.2s ease;
    display: inline-block;
    text-decoration: none;
}

.rotary-header-nav a:hover,
.rotary-header-nav a.active,
.rotary-header-nav a[aria-current="page"] {
    color: #904d00;
    font-weight: 600;
}

/* ==========================================================================
   SECTION BACKGROUNDS
   ========================================================================== */

section.rotary-hero-section,
section[data-id="sec_hero"] {
    background-color: #0e1c2f;
    background-image: radial-gradient(ellipse at top, rgba(30, 58, 95, 0.45), #0e1c2f 70%, #070e18 100%);
    position: relative;
    overflow: hidden;
}

section.bg-surface,
section[data-id="sec_ceremony"],
section[data-id="sec_conditions"],
section[data-id="sec_faq"] {
    background-color: #f7f9fb;
}

section.bg-surface-container-low,
section[data-id="sec_categories"],
section[data-id="sec_program"],
section[data-id="sec_contact"] {
    background-color: #f2f4f6;
}

section.bg-primary-container,
section[data-id="sec_sponsors"] {
    background-color: #0e1c2f;
    background-image: radial-gradient(ellipse at top, rgba(30, 58, 95, 0.35), #0e1c2f 80%, #070e18 100%);
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   TYPOGRAPHY DEFAULTS
   ALL use :where() (zero specificity) so Elementor's Style tab ALWAYS wins.
   Elementor generates inline style="" attributes which beat any :where() rule.
   This means: color, font-size, font-weight, line-height set in Elementor WORK!
   ========================================================================== */

:where(.elementor-widget-heading .elementor-heading-title) {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.01em;
    margin: 0;
}

:where(.elementor-widget-text-editor),
:where(.elementor-widget-text-editor p) {
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Gold accent text utility used inside heading HTML */
.text-secondary-fixed,
span.text-secondary-fixed {
    color: #ffdcc3;
}

/* ==========================================================================
   CARDS & COLUMN LAYOUT
   ========================================================================== */

/* Force equal-height columns in inner sections */
.elementor-inner-section > .elementor-container {
    display: flex !important;
    align-items: stretch !important;
}

.elementor-inner-section > .elementor-container > .elementor-column {
    display: flex !important;
}

/* --- Category / Light Cards --- */
.rotary-card.elementor-column > .elementor-widget-wrap,
.rotary-card > .elementor-widget-wrap {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e6e8ea;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rotary-card.elementor-column:hover > .elementor-widget-wrap,
.rotary-card:hover > .elementor-widget-wrap {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.rotary-card .elementor-widget:not(:last-child) {
    margin-bottom: 10px;
}

.rotary-card .elementor-widget-text-editor {
    flex-grow: 1;
}

.rotary-card .elementor-widget-button {
    margin-top: auto;
    padding-top: 14px;
}

/* --- Hero Pillar Cards (dark) --- */
.rotary-card-dark.elementor-column > .elementor-widget-wrap,
.rotary-card-dark > .elementor-widget-wrap {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    transition: background 0.25s ease, transform 0.25s ease;
}

.rotary-card-dark.elementor-column:hover > .elementor-widget-wrap,
.rotary-card-dark:hover > .elementor-widget-wrap {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
}

.rotary-card-dark .rotary-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(254, 147, 44, 0.18);
    border: 1px solid rgba(254, 147, 44, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.rotary-card-dark .rotary-icon-wrap .material-symbols-outlined {
    color: #ffdcc3;
    font-size: 22px;
}

/* --- Countdown Cards --- */
.rotary-countdown-card.elementor-column > .elementor-widget-wrap,
.rotary-countdown-card > .elementor-widget-wrap {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #eceef0;
    text-align: center;
    height: 100%;
    width: 100%;
}

/* --- Logistics Cards (When & Where) --- */
.rotary-logistics-item.elementor-column > .elementor-widget-wrap,
.rotary-logistics-item > .elementor-widget-wrap {
    background: #f2f4f6;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Condition of Entry Cards --- */
.rotary-condition-card.elementor-column > .elementor-widget-wrap,
.rotary-condition-card > .elementor-widget-wrap {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e6e8ea;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Pushes button to bottom of condition card right column */
.rotary-btn-mt-auto.elementor-widget-button,
.rotary-btn-mt-auto {
    margin-top: auto !important;
    padding-top: 20px !important;
}

/* ==========================================================================
   BUTTONS
   Use :where() so Elementor's Style tab (background, text color, border-radius,
   padding, hover state) can ALWAYS override these defaults.
   ========================================================================== */

:where(.rotary-btn-primary .elementor-button) {
    border-radius: 12px;
    padding: 12px 28px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(144, 77, 0, 0.25);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    text-decoration: none;
}

:where(.rotary-btn-primary .elementor-button:hover) {
    box-shadow: 0 10px 20px -3px rgba(144, 77, 0, 0.35);
    transform: translateY(-1px);
}

:where(.rotary-btn-secondary .elementor-button) {
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

:where(.rotary-btn-category .elementor-button) {
    background-color: transparent;
    color: #904d00;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
    text-decoration: none;
}

:where(.rotary-btn-category .elementor-button:hover) {
    color: #B45309;
}

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */

.rotary-accordion .elementor-accordion .elementor-accordion-item {
    border: 1px solid #eceef0;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.rotary-accordion .elementor-accordion .elementor-tab-title {
    background: #ffffff;
    color: #0e1c2f;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 24px;
    border: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.rotary-accordion .elementor-accordion .elementor-tab-title:hover {
    background: #f7f9fb;
}

.rotary-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
    color: #904d00;
    font-size: 16px;
}

.rotary-accordion .elementor-accordion .elementor-tab-content {
    background: #ffffff;
    padding: 0 24px 20px 24px;
    border: none;
    color: #64748B;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.rotary-accordion .elementor-accordion .elementor-tab-content a {
    color: #904d00;
    font-weight: 600;
}

.rotary-accordion .elementor-accordion .elementor-tab-content a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   GLOBAL FOOTER
   ========================================================================== */

.rotary-global-footer,
section[data-id="sec_ftr"] {
    background-color: #070e18;
    color: #ffffff;
}

.rotary-global-footer a,
section[data-id="sec_ftr"] a {
    color: #ffdcc3;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rotary-global-footer a:hover,
section[data-id="sec_ftr"] a:hover {
    color: #ffffff;
}

.rotary-global-footer p,
section[data-id="sec_ftr"] p,
.rotary-global-footer li,
section[data-id="sec_ftr"] li {
    color: #bac7e1;
}

/* Footer headings - :where() lets Elementor title_color setting override freely */
:where(.rotary-global-footer .elementor-heading-title,
       section[data-id="sec_ftr"] .elementor-heading-title) {
    color: #ffffff;
}

.rotary-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rotary-social-icon:hover {
    background: #904d00;
    color: #ffffff;
    transform: translateY(-2px);
}