/*
Theme Name: SRPC
Description: Child theme for Stillwater Rifle & Pistol Club based on Hello Elementor.
Author: Matt Mueggenborg
Template: hello-elementor
*/

/* Colours and type come from assets/css/tokens.css, which loads first.
   Layout here is deliberately unchanged — the header's negative-margin logo
   positioning is a known fragility and belongs to its own pass. */

/* ============================================================
   HEADER
   ============================================================ */

/* The badge deliberately overhangs the orange bar at both ends — it is the
   one distinctive thing about this header. It used to be achieved with four
   negative margins (-70 top, -75 bottom) re-guessed at every breakpoint,
   which meant any change to header padding broke the alignment.
   The bar is now a positioning context and the logo centres on it, so the
   overhang follows from the layout and survives a change of padding. */

:root {
    --srpc-logo-w:   240px;
    --srpc-bar-h:    58px;
    --srpc-logo-gap: 20px;
}

#site-header {
    background: var(--srpc-navy-deep);
    border-bottom: 2px solid var(--srpc-orange);
    padding: 45px 0;
}

#site-header .header-inner {
    position: relative;
    max-width: 1140px;
    min-height: var(--srpc-bar-h);
    margin-top: 15px;
    background: var(--srpc-orange);
    border-radius: var(--srpc-radius);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Reserve the logo's width so the nav can never run underneath it. */
    padding-left: calc(var(--srpc-logo-w) + var(--srpc-logo-gap)) !important;
    padding-right: 15px !important;
}

#site-header .site-branding {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

#site-header .site-logo,
#site-header .site-branding {
    line-height: 0;
}

#site-header .site-logo img {
    display: block;
    width: var(--srpc-logo-w);
    max-width: 100%;
    height: auto;
}

header .header-menu {
    flex-grow: 0;
}

header .header-menu ul,
header .header-menu ul li {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

header .header-menu ul {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
}

header .header-menu ul li {
    padding: 15px 5px;
}

header .header-menu ul li a {
    font-family: var(--srpc-font-display);
    padding: 8px 12px;
    color: #fff;
    text-transform: uppercase;
    font-size: var(--srpc-text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    border-radius: var(--srpc-radius);
    transition: background-color 0.15s ease;
}

header .header-menu ul li a:hover,
header .header-menu ul li a:focus {
    color: #fff;
    background: rgba(0, 0, 0, 0.18);
}

/* ============================================================
   CONTENT
   ============================================================ */

#content {
    margin-top: 35px;
}

/* The Events Calendar shortcode lists, and block widgets, arrive as bare
   <li> elements that would otherwise inherit list bullets. */
.elementor-shortcode .ecs-event-list,
.elementor-shortcode .ecs-event.list li,
li.widget_block {
    list-style-type: none;
    list-style-image: none;
    padding: 0;
    margin: 0;
}

footer {
    background-color: var(--srpc-navy-deep);
    color: var(--srpc-rule);
}

footer a {
    color: var(--srpc-paper);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* On phones the two columns stack, which used to bury the upcoming events
   feed at 87% of the page — a member checking the next trap shoot had to
   scroll past everything else to find it. Source order and stacking order do
   not have to match: on narrow screens the events column comes first, while
   wide screens keep the two-column layout untouched.

   Selected by what the column contains rather than by its Elementor id, so
   rebuilding the section in the editor will not silently undo this. */
@media (max-width: 767px) {
    .elementor-top-column:has(.elementor-widget-sidebar) {
        order: -1;
    }

    /* The events feed is the reason for being here; give it a little room
       rather than letting it butt straight against the header. */
    .elementor-top-column:has(.elementor-widget-sidebar) .elementor-widget-sidebar {
        padding-top: 4px;
    }
}

/* Only the three variables change per breakpoint now. The logo stays centred
   on the bar and keeps its overhang without any further arithmetic. */

@media (max-width: 860px) {
    :root {
        --srpc-logo-w: 180px;
    }
}

@media (max-width: 700px) {
    :root {
        --srpc-logo-w:   150px;
        --srpc-logo-gap: 14px;
    }

    #site-header {
        padding: 22px 0;
    }

    #site-header .header-inner {
        margin-top: 0;
    }

    /* With only three items a hamburger would hide the whole menu behind an
       extra tap, so the nav simply stacks. That makes tap target size matter
       more than it would behind a toggle: these are sized to the 44px WCAG
       minimum, with enough separation to avoid thumb mis-taps. */
    #site-header .header-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-right: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    header .header-menu ul li {
        padding: 0;
    }

    header .header-menu ul li a {
        display: block;
        text-align: right;
        padding: 13px 14px;
    }
}

@media (max-width: 420px) {
    :root {
        --srpc-logo-w:   118px;
        --srpc-logo-gap: 10px;
    }

    #site-header {
        padding: 14px 0;
    }

    #site-header .site-branding {
        left: 8px;
    }
}