/*
Theme Name: Exodus Child
Description: Britton Road Church of Christ child theme for Exodus. All site customizations live here — do not edit the parent Exodus theme directly.
Author: Britton Road Church of Christ
Version: 1.0.18
Template: exodus
*/

/*
Parent theme stylesheet is loaded first via functions.php (wp_enqueue_style).
Add overrides below. Rules here load after the parent, so no !important needed
unless fighting another plugin's inline styles.

See https://churchthemes.com/guides/developer/child-theming/
*/


/* ============================================================
   Top Bar — right-align the nav menu (Home, Visit, Members, Give)
   ============================================================ */
#exodus-top-bar-menu {
    float: right;
}


/* ============================================================
   Header — hide the site tagline from the logo bar right side
   The tagline text lives in the About Us section instead.
   ============================================================ */
#exodus-logo-bar-right-tagline {
    display: none;
}

/* ==========================================
   Header - Make less room above and below the logo bar content
   ============================================ */
#exodus-logo-bar-content {
    padding: 25px 0;
}

/* ============================================================
   Header nav bar — hide social icons (Facebook, Twitter, etc.)
   May be re-enabled in the footer later instead.
   ============================================================ */
#exodus-header-menu .exodus-list-icons {
    display: none;
}

#exodus-middle-content {
    margin-top: 25px;
}

/* ============================================================
   Hamburger menu — always on, right-aligned (all viewports)

   hamburger-menu.js re-initializes MeanMenu with
   meanScreenWidth:9999 so the toggle shows at every width.

   Pre-hide the desktop nav immediately (before JS runs) to
   prevent a flash of the full horizontal menu on load.
   Matches the technique the parent theme uses at ≤640px but
   applied at all widths. The mean-remove class (display:none)
   takes over once MeanMenu's JS activates.

   Give the nav bar an explicit min-height so it doesn't
   collapse to zero when the desktop menu is hidden.
   ============================================================ */
.js #exodus-header-menu-inner,
.js .sf-menu {
    visibility: hidden;
    height: 1px;
    overflow: hidden;
}

#exodus-header-menu {
    min-height: 50px;
}

/* ============================================================
   Teal nav bar — collapsed so it takes no visual space.

   height:auto (NOT 0) is important: when the menu OPENS, the bar must
   grow to contain the now-visible .mean-nav so it pushes page content
   (e.g. the banner image on interior pages) DOWN instead of overlapping
   it. With height:0 + overflow:visible the open menu spilled out with
   zero layout height and landed on top of the banner. When the menu is
   closed the .mean-nav is display:none and the desktop nav is height:1px,
   so the bar still collapses to ~0 — and the teal strip stays gone because
   background/padding/border/min-height are all zeroed below.
   ============================================================ */
#exodus-header-menu,
#exodus-header-menu.mean-container {
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
}

#exodus-header-menu .mean-bar {
    min-height: 0 !important;
    background: transparent;
    padding: 0;
}

/* Give the dropdown enough z-index to sit above the slider */
#exodus-header-menu .mean-nav {
    position: relative;
    z-index: 999999;
    margin-top: 0;
}

/* ============================================================
   Real MeanMenu button — hidden.
   The proxy button in the logo bar forwards clicks to it, so
   MeanMenu's open/close logic still runs. jQuery trigger('click')
   fires event handlers regardless of display state.
   jQuery's .show() calls inside MeanMenu are overridden by !important.
   ============================================================ */
#exodus-header-menu .meanmenu-reveal {
    display: none !important;
}

/* ============================================================
   Proxy hamburger button — lives permanently in the logo bar.
   hamburger-menu.js creates this element and appends it to
   #exodus-logo-bar, then wires its click to the real button.
   ============================================================ */
#exodus-logo-bar {
    position: relative; /* positioning context for the proxy */
}

.exodus-child-hamburger {
    position: absolute;
    top: 50%;
    right: 5%;
    left: auto;
    transform: translateY(-50%);
    display: block;
    cursor: pointer;
    text-decoration: none;
    /* Match MeanMenu button dimensions */
    width: 22px;
    height: 22px;
    padding: 15px 0 17px 11px;
    box-sizing: content-box;
    z-index: 9999;
}

/* The three hamburger lines */
.exodus-child-hamburger span {
    display: block;
    margin-top: 3px;
    height: 3px;
    background-color: #333;
}

/* ============================================================
   Open menu alignment — match the centered content + right-align

   The parent theme renders .mean-nav full-bleed with its links
   floated LEFT, so on wide ("max width") screens the open menu
   drifts to the far-left edge while the logo and hamburger stay in
   the centered 1170px container (.exodus-centered-content). We:

   1. Constrain .mean-nav to that same 1170px / 90% centered box so
      it lines up horizontally with the logo bar + hamburger.
   2. Right-align the links as full-width BLOCK elements (not floats).
      The parent theme floats links left; we must NOT just flip them to
      float:right, because a floated parent link makes its submenu <ul>
      (a block sibling in the same <li>) wrap into the leftover space to
      its LEFT, shoving submenus to the far edge. Block + text-align:right
      keeps each submenu flowing straight down, right-aligned under its
      parent.

   padding-right uses max(5%, 54px): 5% lines the right edge up with
   the hamburger on the default 1170px container, while the 54px floor
   always clears the ~50px expand (+/-) toggle (absolute, right:0) on
   narrower screens. The :not(.mean-expand) guard keeps us from
   restyling that toggle.
   ============================================================ */
#exodus-header-menu .mean-nav {
    float: none;
    width: 1170px;        /* same as .exodus-centered-content */
    max-width: 90%;       /* shrink on narrow screens */
    margin-left: auto;
    margin-right: auto;   /* center under the logo/hamburger container */
}

#exodus-header-menu .mean-nav ul li a:not(.mean-expand) {
    float: none;          /* block flow — avoids submenu wrapping left */
    display: block;
    width: auto;          /* fill the row instead of the parent's 75% */
    text-align: right;
    padding-right: max(5%, 54px);
}

/* Mirror the nesting indentation to the right so hierarchy still reads */
#exodus-header-menu .mean-nav ul li li a:not(.mean-expand)    { padding-right: max(10%, 54px); }
#exodus-header-menu .mean-nav ul li li li a:not(.mean-expand) { padding-right: max(15%, 54px); }

/* Submenu <ul> carries an INLINE width:13em from the parent theme's
   Supersubs config (minWidth/maxWidth:13 in main.js), baked into the menu
   copy MeanMenu uses. That inline style pins each submenu to a narrow box
   on the left, so our right-aligned items were lining up inside it. Force
   the submenu full-width — !important is required to beat the inline style. */
#exodus-header-menu .mean-nav ul li ul {
    width: 100% !important;
}

/* ============================================================
   About Us intro — reduce the oversized "lead" paragraph text.
   The Exodus intro section renders body copy at ~30px by default,
   which reads too large. Bring it down to a comfortable size.
   ============================================================ */
#exodus-intro p {
    font-size: 20px;
    line-height: 1.6;
}

/* ============================================================
   About Us spacing — the Exodus intro section ships with heavy
   top/bottom padding that leaves too much empty space above and
   below the "About Us" content. Tighten it up.
   ============================================================ */
#exodus-intro {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* ============================================================
   Homepage slider height — Exodus ships a fixed 500px slider
   window with slides cropped to 1700x500 (a wide 3.4:1 ratio).
   Coming from Resurrect (960x480, a taller 2:1 ratio), we want
   more height. Raise the window and let the images scale to
   fill it with object-fit: cover (crops the sides rather than
   letterboxing). 650px ≈ a 2.6:1 ratio — between Exodus-wide
   and Resurrect-tall. Adjust the two heights together to taste.
   ============================================================ */
#exodus-slider {
    height: 650px;
}
#exodus-slider .flexslider .slides img {
    height: 650px;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   Responsive slider height — the parent theme's css/responsive.css
   steps the slider window DOWN at each breakpoint to hold a constant
   3.4:1 ratio (heights 444/376/294/235/176 paired with the shrinking
   #exodus-slider-inner width). Our base bump to 650 only touched the
   widest tier, so below 1280px it snapped back to the short originals.
   Here we re-scale each breakpoint by 1.3x (650/500) to keep our
   taller proportion all the way down to mobile. The #exodus-slider-container
   ancestor gives us two IDs so we win regardless of stylesheet load order.
   Keep these in sync if the base height changes.
   ------------------------------------------------------------ */
@media only screen and (max-width: 1280px) {
    #exodus-slider-container #exodus-slider,
    #exodus-slider-container #exodus-slider .flexslider .slides img { height: 577px; }
}
@media only screen and (max-width: 1024px) {
    #exodus-slider-container #exodus-slider,
    #exodus-slider-container #exodus-slider .flexslider .slides img { height: 489px; }
}
@media only screen and (max-width: 800px) {
    #exodus-slider-container #exodus-slider,
    #exodus-slider-container #exodus-slider .flexslider .slides img { height: 382px; }
}
@media only screen and (max-width: 640px) {
    #exodus-slider-container #exodus-slider,
    #exodus-slider-container #exodus-slider .flexslider .slides img { height: 306px; }
}
@media only screen and (max-width: 480px) {
    #exodus-slider-container #exodus-slider,
    #exodus-slider-container #exodus-slider .flexslider .slides img { height: 229px; }
}