/*
 * shared-layout.css
 * Layout primitives for hero pattern, breadcrumb strip, and container width.
 * Consumed by WordPress home, WordPress location template, and Laravel public profile.
 * Sister file to shared-header.css. Part of Build 1.5f — UX Unification.
 */

:root {
    --rc-container-max: 1380px;
    --rc-brand-navy: #3d4c6a;

    --rc-breadcrumb-bg: #f4f4f4;
    --rc-breadcrumb-text: #6b7280;
    --rc-breadcrumb-separator: #c0c0c0;
}

/* ----------------------------------------------------------
   Breadcrumb strip
   Sits in the gap between the header and the hero.
   ---------------------------------------------------------- */

.rc-breadcrumb {
    background: #ffffff;
    width: 100%;
}

.rc-breadcrumb-inner {
    max-width: var(--rc-container-max);
    margin: 0 auto;
    padding: 12px 40px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rc-breadcrumb-text);
    border-bottom: 1px solid #e5e7eb;
}

.rc-breadcrumb a {
    color: var(--rc-breadcrumb-text);
    text-decoration: none;
}

.rc-breadcrumb a:hover,
.rc-breadcrumb a:focus {
    text-decoration: underline;
}

.rc-breadcrumb-separator {
    margin: 0 8px;
    color: var(--rc-breadcrumb-separator);
}

.rc-breadcrumb-current {
    color: var(--rc-breadcrumb-text);
    font-weight: 500;
}

@media (max-width: 768px) {
    .rc-breadcrumb-inner {
        padding: 10px 20px;
        font-size: 12px;
    }
}

/* ----------------------------------------------------------
   Hero pattern
   Full-bleed 50/50 split: image left, navy block right.
   Stacks vertically on mobile.
   No fade or overlay between image and navy block — hard edge.
   ---------------------------------------------------------- */

.rc-hero {
    max-width: var(--rc-container-max);
    margin: 0 auto;
    width: 100%;
}

.rc-hero-inner {
    display: flex;
}

.rc-hero-image {
    flex: 0 0 40%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 360px;
}

.rc-hero-content {
    flex: 0 0 60%;
    background: var(--rc-brand-navy);
    color: #ffffff;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rc-hero-heading {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
}

.rc-hero-body {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 480px;
}

.rc-hero-meta {
    color: #c8cdda;
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 8px;
}

.rc-hero-cta {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    border: 1.5px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    align-self: flex-start;
    transition: background 0.2s ease, color 0.2s ease;
}

.rc-hero-cta:hover,
.rc-hero-cta:focus {
    background: #ffffff;
    color: var(--rc-brand-navy);
}

@media (max-width: 768px) {
    .rc-hero {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .rc-hero-inner {
        flex-direction: column;
        min-height: 0;
    }

    .rc-hero-image {
        min-height: 280px;
    }

    .rc-hero-content {
        padding: 40px 24px;
    }

    .rc-hero-heading {
        font-size: 32px;
    }

    .rc-hero-body {
        font-size: 16px;
    }
}

/* ----------------------------------------------------------
   Prevent horizontal scrollbar from 100vw on hero.
   Some browsers include scrollbar width in 100vw, causing
   1-17px of overflow. overflow-x: clip stops it without
   breaking position: sticky elsewhere on the page.
   ---------------------------------------------------------- */

body {
    overflow-x: clip;
}

/* ----------------------------------------------------------
   Location template wrapper compensation
   ----------------------------------------------------------
   GP's .one-container .site-content rule applies 80px top + 40px
   horizontal padding to the wrapper that contains location.php's
   breadcrumb and hero. We zero the top padding when a .rc-hero is
   present (so the hero owns the top of the page) and negative-
   margin the breadcrumb and hero to break out of the horizontal
   padding (so they align with the 1380px header width).
   ---------------------------------------------------------- */

.one-container .site-content:has(.rc-hero) {
    padding-top: 0;
}

.rc-location > .rc-breadcrumb {
    margin-left: -40px;
    margin-right: -40px;
}

@media (max-width: 768px) {
    .rc-location > .rc-breadcrumb {
        margin-left: -30px;
        margin-right: -30px;
    }
    /* .rc-hero on mobile is handled by its own existing 100vw rule above —
       do not override it here. */
}