/* Shared public-site chrome: the header bar and the footer.
 *
 * Extracted from layouts/center.blade.php so the BWM layout can wear the same
 * chrome without a second copy of it. Edit here, not in a layout — two copies
 * of a 250-line header is exactly how the two drift apart.
 *
 * Self-sufficient: it carries the brand custom properties it uses, so a layout
 * that does not define them (BWM defines its own --bwm-* set) still renders the
 * chrome correctly. A layout that DOES define them later in an inline <style>
 * simply wins, and the values are the same either way.
 */
:root {
    --gold: #C9A84C; --gold-dark: #8a6d1a; --ink: #1a1a1a; --muted: #666; --hairline: #ececec;
    --brand: #084563; --brand-dark: #063346; --brand-tint: #bfe0f0;
}

/* ── Header ─────────────────────────────────────── */
.center-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--brand); color: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}
.center-header-inner {
    max-width: 1180px; margin: 0 auto; padding: 4px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.center-brand { display: flex; flex-direction: column; color: #fff; }
/* Logo stays big but its transparent edges overflow the bar (negative
   margin), so the tall logo doesn't inflate the header height. */
.center-brand-logo { height: 88px; margin: -12px 0; }
.center-brand-name { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 0.2px; color: #fff; }
.center-brand-name .accent { color: var(--brand-tint); }
.center-brand-tag { color: rgba(255,255,255,0.82); font-size: 12px; margin-top: -2px; }

.center-nav { display: flex; gap: 4px; font-size: 14px; align-items: center; }
.center-nav a { color: rgba(255,255,255,0.92); font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.center-nav a:hover { color: #fff; background: rgba(255,255,255,0.15); }
.center-nav a.active { color: #fff; background: rgba(255,255,255,0.18); }

/* Dropdown (desktop) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    background: none; border: none; padding: 8px 12px; font: inherit; color: rgba(255,255,255,0.92);
    font-weight: 500; cursor: pointer; display: inline-flex; align-items: center;
    gap: 4px; border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.nav-dropdown-toggle:hover { color: #fff; background: rgba(255,255,255,0.15); }
.nav-dropdown-toggle .caret {
    width: 10px; height: 10px; transition: transform 0.15s; opacity: 0.85;
}
.nav-dropdown[data-open="true"] .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.nav-dropdown-panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 240px; background: #fff; border: 1px solid var(--hairline);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(40, 30, 0, 0.08);
    padding: 8px; z-index: 50;
}
.nav-dropdown-panel::before {
    content: ''; position: absolute; top: -6px; left: 24px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--hairline); border-top: 1px solid var(--hairline);
    transform: rotate(45deg);
}
.nav-dropdown-panel a {
    display: block; padding: 10px 12px; border-radius: 6px; font-weight: 500;
    line-height: 1.3; color: #333;
}
.nav-dropdown-panel a:hover { background: #eef5fa; color: var(--brand-dark); }
.nav-dropdown-panel a .sub-desc {
    display: block; font-size: 12px; color: #999; font-weight: 400; margin-top: 2px;
}

/* Mobile menu groups */
.mobile-menu-group { margin-top: 12px; }
.mobile-menu-group-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
    color: #999; margin: 0 0 4px;
}
.mobile-menu-group a { padding-left: 0; }
.mobile-submenu-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; padding: 9px 0; margin: 0; cursor: pointer;
    color: #fff; font-family: inherit; font-weight: 600; font-size: 14px;
}
.mobile-submenu-toggle .caret { width: 12px; height: 12px; opacity: 0.85; transition: transform 0.15s; flex-shrink: 0; }
.mobile-submenu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mobile-submenu { padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.25); margin: 0 0 6px; }

.center-auth { display: flex; gap: 10px; align-items: center; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 6px;
    font-weight: 600; font-size: 14px; transition: all 0.15s; cursor: pointer; border: none; }
.btn-ghost { background: transparent; color: #444; }
.btn-ghost:hover { color: var(--gold); }
.btn-outline { background: #fff; border: 1px solid var(--gold); color: var(--gold-dark); }
.btn-outline:hover { background: #fffbea; }
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); }

/* Header sits on the orange bar — recolour its buttons for contrast. */
.center-header .btn-ghost { color: #fff; }
.center-header .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.16); }
.center-header .btn-outline { background: transparent; border-color: rgba(255,255,255,0.7); color: #fff; }
.center-header .btn-outline:hover { background: rgba(255,255,255,0.16); }
.center-header .btn-primary { background: #fff; color: var(--brand-dark); }
.center-header .btn-primary:hover { background: #eaf3f9; color: var(--brand-dark); }

.menu-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; stroke: #fff; }
.center-mobile-actions { display: none; align-items: center; gap: 6px; }

@media (max-width: 880px) {
    .center-nav, .center-auth-desktop { display: none; }
    .menu-toggle { display: block; }
    .center-mobile-actions { display: flex; }
    .mobile-menu.open { display: block; }
    .mobile-menu { display: none; border-top: 1px solid rgba(255,255,255,0.25); padding: 14px 24px; background: var(--brand); }
    .mobile-menu a { display: block; padding: 9px 0; color: #fff; font-weight: 500; }
    .mobile-menu a:hover { color: var(--brand-tint); }
    .mobile-menu .btn { display: block; text-align: center; margin-top: 10px; }
    .mobile-menu-group-label { color: var(--brand-tint); }
    .center-brand-logo { height: 62px; margin: -8px 0; }
}
@media (min-width: 881px) { .mobile-menu { display: none !important; } }


/* ── Footer ───────────────────────────────────────── */
.center-footer { margin-top: 96px; background: #14291f; color: #d4dcd5;
    position: relative; }
.center-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); }
.center-footer-inner { max-width: 1180px; margin: 0 auto; padding: 64px 24px 36px;
    display: grid; gap: 48px; grid-template-columns: 1.6fr repeat(3, 1fr); }
@media (max-width: 880px) {
    .center-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 48px 24px 28px; }
    .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .center-footer-inner { grid-template-columns: 1fr; }
}
.footer-brand-block .footer-brand-name { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600; font-size: 26px; color: #fff; letter-spacing: 0.2px; }
.footer-brand-block .footer-brand-name .accent { color: var(--gold); }
.footer-brand-block .footer-tag { color: #a39d8e; font-size: 14px; max-width: 340px;
    margin-top: 10px; line-height: 1.65; }
.footer-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.footer-contact a, .footer-contact span { color: #c9c3b3; font-size: 14px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
    transition: color 0.15s; }
.footer-contact a:hover { color: var(--gold); }
.footer-contact svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.footer-social { margin-top: 22px; display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); color: #d9d4c7;
    transition: all 0.18s ease; }
.footer-social a:hover { background: var(--gold); color: #14291f; transform: translateY(-1px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px;
    color: var(--gold); margin: 0 0 18px; font-weight: 600;
    font-family: 'Inter', sans-serif; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 6px 0; }
.footer-col a { color: #c9c3b3; font-size: 14px; text-decoration: none;
    transition: color 0.15s, padding-left 0.18s; display: inline-block; }
.footer-col a:hover { color: var(--gold); padding-left: 3px; }
.footer-bottom-wrap { border-top: 1px solid rgba(201, 168, 76, 0.18); margin-top: 8px; }
.footer-bottom { max-width: 1180px; margin: 0 auto; padding: 22px 24px;
    color: #8b8674; font-size: 13px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom .footer-legal a { color: #8b8674; text-decoration: none; transition: color 0.15s; }
.footer-bottom .footer-legal a:hover { color: var(--gold); }