/*
 * Theme Name:  Bexar Country Child
 * Theme URI:   https://bexarcountry.com
 * Description: Child theme for Bexar Country built on the BlankSlate parent theme.
 *              Phase 1: Bootstrap 5 functional scaffold — all pipes connected,
 *              no custom branding CSS yet. Phase 2 will replace Bootstrap with the
 *              full Bexar Country dark desert design system.
 * Author:      Bexar Country
 * Author URI:  https://bexarcountry.com
 * Template:    blankslate
 * Version:     1.0.0
 * License:     GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: bexar-country-child
 *
 * PHASE 1 NOTES:
 * - Bootstrap 5.3 is loaded via CDN in functions.php
 * - This file only contains minimal overrides on top of Bootstrap
 * - The parent theme (BlankSlate) CSS reset is also enqueued
 * - In Phase 2, Bootstrap CDN links will be removed and this file
 *   will be replaced with the full Bexar Country brand CSS
 */


/* =============================================================================
   GLOBAL UTILITY OVERRIDES
   Minor adjustments so BlankSlate's reset plays nicely with Bootstrap.
   Bootstrap's reboot handles most normalization; these fill the gaps.
   ============================================================================= */

/*
 * BlankSlate resets list-style to none globally.
 * Bootstrap's nav and dropdown components expect bullets removed by default,
 * so no conflict here — but wp_nav_menu() wraps in <ul> which needs this.
 */
ul, ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/*
 * BlankSlate removes all margins/padding from everything.
 * Bootstrap's spacing utilities (mb-*, mt-*, etc.) add it back where needed,
 * but body needs a sensible line-height for readability.
 */
body {
    line-height: 1.6;
}


/* =============================================================================
   WORDPRESS NAVIGATION MENU — wp_nav_menu() OUTPUT
   WordPress wraps nav menus in <ul class="menu"> by default.
   These styles wire wp_nav_menu() output into Bootstrap's navbar markup.
   ============================================================================= */

/*
 * The <ul> generated by wp_nav_menu() gets class "menu" by default.
 * We map it to Bootstrap's navbar-nav so it inherits all navbar styling.
 */
#site-navigation .menu {
    display: flex;
    flex-direction: row;
    gap: 0.25rem; /* breathing room between nav items */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Each <li> in the nav gets class "menu-item" from WordPress.
 * Map it to Bootstrap's nav-item so link padding and hover states apply.
 */
#site-navigation .menu-item {
    display: list-item;
}

/*
 * WordPress wraps nav link text in <a> directly inside .menu-item.
 * Style as Bootstrap nav-link for consistent padding and hover.
 */
#site-navigation .menu-item a {
    display: block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

#site-navigation .menu-item a:hover,
#site-navigation .menu-item.current-menu-item a {
    color: #fff;
}


/* =============================================================================
   WORDPRESS ADMIN BAR COMPENSATION
   When a logged-in admin views the front end, WordPress injects a 32px admin
   bar at the top. The fixed navbar needs to push down to avoid overlap.
   ============================================================================= */

/*
 * When the navbar is fixed-top, the page body starts at position 0
 * and content slides under the navbar. padding-top on <body> pushes
 * everything down by the navbar height (Bootstrap default navbar = 56px).
 *
 * Set on body directly so the hero section on front-page.php (which sits
 * outside .bc-main-content) is also correctly offset.
 */
body {
    padding-top: 56px;
}

/*
 * WordPress adds .admin-bar to <body> when the WP toolbar is visible
 * (logged-in users). Two things must shift down:
 *   1. The fixed navbar must sit below the 32px WP toolbar
 *   2. body padding-top must cover navbar + toolbar combined
 *
 * body.admin-bar is correct — both classes sit on the same <body> element.
 * '.admin-bar body' would mean a <body> INSIDE .admin-bar, which is invalid.
 */
body.admin-bar .navbar.fixed-top {
    top: 32px;
}

body.admin-bar {
    padding-top: calc(56px + 32px) !important; /* !important overrides WP admin-bar.css inline margin */
}

/*
 * On screens narrower than 782px the WP admin bar shrinks from 32px to 46px.
 * Adjust both navbar position and body padding accordingly.
 */
@media screen and (max-width: 782px) {
    body.admin-bar .navbar.fixed-top {
        top: 46px;
    }
    body.admin-bar {
        padding-top: calc(56px + 46px) !important;
    }
}


/* =============================================================================
   MAIN CONTENT & LAYOUT
   Basic content width and spacing so posts/pages render readably.
   ============================================================================= */

/*
 * #content is the main landmark from BlankSlate's header.php (overridden in
 * our child header.php). We constrain width and add vertical breathing room.
 */
.bc-main-content {
    min-height: 60vh; /* prevent footer from floating up on short pages */
    padding-top: 2rem;
    padding-bottom: 3rem;
}


/* =============================================================================
   ENTRY / POST CARD STYLES
   BlankSlate's entry.php outputs <article> with class "post" plus post-type
   and status classes. These give posts a card-like appearance in Bootstrap.
   ============================================================================= */

/*
 * Each post on archive/index pages gets a card wrapper.
 * Bootstrap's .card class handles most of this, but WordPress's <article>
 * needs a bottom margin to separate stacked posts.
 */
article.post,
article.page,
article.drop_bag,
article.race {
    margin-bottom: 2rem;
}

/*
 * Post title links — remove underline, inherit color from heading.
 */
.entry-title a {
    text-decoration: none;
    color: inherit;
}

.entry-title a:hover {
    text-decoration: underline;
}


/* =============================================================================
   FEATURED IMAGE
   WordPress outputs the featured image via the_post_thumbnail().
   Make images responsive inside posts.
   ============================================================================= */

.entry-content img,
.entry-summary img {
    max-width: 100%;
    height: auto;
}


/* =============================================================================
   PAGINATION / NAVIGATION
   BlankSlate's nav-below.php and nav-below-single.php output post navigation.
   Wire into Bootstrap pagination styles.
   ============================================================================= */

.navigation.posts-navigation,
.post-navigation {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid #dee2e6;
}


/* =============================================================================
   WORDPRESS ALIGNMENTS
   WordPress block editor and classic editor both output alignment classes.
   Bootstrap's float utilities handle these, but we define them explicitly
   so they work in the content area even without extra Bootstrap classes.
   ============================================================================= */

.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* =============================================================================
   FOOTER
   Basic footer styling — Phase 2 will replace this with the full 3-column
   Bexar Country footer with runner SVG and dark desert branding.
   ============================================================================= */

#bc-footer {
    background-color: #212529; /* Bootstrap dark */
    color: #adb5bd;
    padding: 2rem 0;
    margin-top: 3rem;
}

#bc-footer a {
    color: #adb5bd;
    text-decoration: none;
}

#bc-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

#bc-footer-bottom {
    border-top: 1px solid #343a40;
    margin-top: 1.5rem;
    padding-top: 1rem;
    font-size: 0.875rem;
}


/* =============================================================================
   DROP BAG CPT — ARCHIVE & SINGLE
   Custom styles for Drop Bag post type cards and single post layout.
   These are minimal Phase 1 styles — Phase 2 will apply full branding.
   ============================================================================= */

/*
 * Drop Bag archive card — each episode displays as a Bootstrap card.
 * The card layout is built in page-the-drop-bag.php using Bootstrap classes;
 * these rules handle the few WordPress-specific output tweaks needed.
 */
.drop-bag-card .card-title a {
    text-decoration: none;
    color: inherit;
}

/*
 * Podcast meta row — episode number, duration, guest, podcast name.
 * Displayed as small muted text below the card title.
 */
.drop-bag-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.drop-bag-meta span {
    margin-right: 1rem;
}

/*
 * Key Takeaways list — ACF repeater outputs as <ul> in the single template.
 * Give it a left border accent so takeaways stand out visually.
 */
.drop-bag-takeaways {
    border-left: 4px solid #0d6efd; /* Bootstrap primary blue — Phase 2 changes to --rust */
    padding-left: 1rem;
    margin: 1rem 0;
    list-style: none;
}

.drop-bag-takeaways li {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

/*
 * Listen link button — links to the original podcast episode.
 * Styled as a Bootstrap outline button in Phase 1.
 */
.drop-bag-listen-link {
    margin-top: 1rem;
}


/* =============================================================================
   FAVORITE PODCASTERS SIDEBAR CARD
   Styles for the #bc-podcasters-card in the Drop Bag single sidebar.
   Each podcaster entry (.bc-podcaster-entry) stacks vertically with a
   top border divider between entries.
   Phase 2 will swap Bootstrap grays for the Bexar Country --rust accent.
   ============================================================================= */

/*
 * Wrapper for a single podcaster entry inside the card.
 * Padding and the conditional border-top are set in the PHP loop;
 * these rules handle text flow and spacing within the entry.
 */
.bc-podcaster-entry {
    line-height: 1.4; /* tighter than body default — sidebar space is limited */
}

/*
 * Social/link button row — wraps Instagram, YouTube, and Listen buttons.
 * flex-wrap allows buttons to wrap to a second line if all three are present
 * and the sidebar is narrow (e.g. on 992px breakpoint where col-lg-4 is ~300px).
 */
.bc-podcaster-links {
    margin-top: 0.4rem;
}

/*
 * Individual social link buttons.
 * btn-sm + btn-outline-secondary from Bootstrap gives us a compact pill shape.
 * We tighten the font size further so three buttons can fit in one row.
 *
 * Phase 2: change border-color and hover background to --rust (#C8451A).
 */
.bc-social-btn {
    font-size: 0.72rem;   /* smaller than Bootstrap's btn-sm default (0.875rem) */
    padding: 0.2rem 0.5rem;
    white-space: nowrap;  /* prevent "📸 Insta" from wrapping mid-label */
}


/* =============================================================================
   RACE CPT — ARCHIVE & SINGLE
   Custom styles for Race post type. In Phase 1 these are minimal Bootstrap
   overrides. In Phase 2, the Race CPT will replace the Airtable events page
   with full Bexar Country card branding.
   ============================================================================= */

/*
 * Race archive card — each race displays with date, location, distances.
 * The card structure is built in archive-race.php using Bootstrap classes.
 */
.race-card .card-title a {
    text-decoration: none;
    color: inherit;
}

/*
 * Race meta row — date, location, distances.
 */
.race-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.race-meta span {
    margin-right: 1rem;
}

/*
 * Distance badges — each distance (50K, 25K, 5K etc.) rendered as a badge.
 * Phase 2 will style these as the rust-colored distance tags from events.html.
 */
.race-distance-badge {
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}


/* =============================================================================
   FOOTER SOCIAL MEDIA ICON ROW
   Styles for .bc-social-row and .bc-social-icon in footer.php.

   The icon row sits between the 3-column grid and the copyright bar.
   Icons are 24×24 inline SVG using currentColor, so changing the
   color property here automatically recolors them.

   PHASE 2: Update hover color from #fff to --rust (#C8451A) to match
   the full Bexar Country dark desert brand aesthetic.
   ============================================================================= */

/*
 * Each social icon link.
 * Inherits the footer's muted gray (#adb5bd) by default from #bc-footer a.
 * Transitions to white on hover for a clean Phase 1 look.
 * display: inline-flex centers the SVG vertically within the tap target.
 */
.bc-social-icon {
    display: inline-flex;          /* vertically centers the SVG */
    align-items: center;
    color: #adb5bd;                /* muted gray — matches footer link color */
    text-decoration: none;         /* no underline on icon links */
    transition: color 0.2s ease, transform 0.2s ease;
                                   /* smooth color fade + subtle lift on hover */
}

/*
 * Hover state: brighten to white and lift the icon slightly.
 * Phase 2: change color to var(--rust) when CSS vars are wired in.
 */
.bc-social-icon:hover {
    color: #ffffff;                /* brighten to full white on hover */
    transform: translateY(-2px);   /* subtle upward lift for tactile feel */
    text-decoration: none;         /* ensure no underline appears on hover */
}

/*
 * The SVG itself — block display removes the small inline gap
 * that browsers add below inline SVG elements.
 */
.bc-social-icon svg {
    display: block;
}



   Basic styling for the search results page.
   ============================================================================= */

.search-results article {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}


/* =============================================================================
   404 PAGE
   ============================================================================= */

.error404 .bc-main-content {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}


/* =============================================================================
   RESPONSIVE TWEAKS
   A handful of Bootstrap breakpoint overrides specific to our layout.
   ============================================================================= */

/* Tighten up card grids on small screens */
@media (max-width: 576px) {
    .bc-main-content {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
}


/* =============================================================================
   BUG FIXES — applied after initial build
   ============================================================================= */

/*
 * FIX: Drop Bag meta spans were running together with no visual separator.
 * Add a bullet character after each span (except the last) using ::after.
 * The :last-child exception prevents a trailing bullet at the end of the row.
 */
.drop-bag-meta span::after {
    content: ' ·';          /* bullet separator between meta items */
    margin-right: 0.4rem;   /* small gap after the bullet before next item */
    color: #adb5bd;         /* lighter than the text so it recedes visually */
}

.drop-bag-meta span:last-child::after {
    content: '';            /* no bullet after the final meta item */
    margin-right: 0;
}

/*
 * FIX: Race meta spans same issue — date and location ran together.
 */
.race-meta span::after {
    content: ' ·';
    margin-right: 0.4rem;
    color: #adb5bd;
}

.race-meta span:last-child::after {
    content: '';
    margin-right: 0;
}
