/*
 * LostInManila — Compass Point Brand Theme
 *
 * This stylesheet intentionally loads after the existing public
 * stylesheets. It provides branding overrides without changing
 * existing layouts, routes, maps, forms, or JavaScript behavior.
 */

:root {
    --brand-forest: #1F5C42;
    --brand-moss: #4A6B3A;
    --brand-orange: #F28C28;
    --brand-sand: #F6F2E8;
    --brand-charcoal: #2C2C2C;
    --brand-white: #FFFFFF;

    --brand-forest-dark: #174632;
    --brand-moss-dark: #3D592F;
    --brand-orange-dark: #C96812;

    --brand-forest-soft: #E8F0EB;
    --brand-moss-soft: #EDF1E8;
    --brand-orange-soft: #FFF1E3;

    --brand-border: #D9E1DC;
    --brand-muted: #66736B;

    /*
     * Existing shared names are mapped to the official palette
     * wherever current styles use these variables.
     */
    --green: var(--brand-forest);
    --green-dark: var(--brand-forest-dark);
    --cream: var(--brand-sand);
    --ink: var(--brand-charcoal);
    --muted: var(--brand-muted);

    --lim-header-green: var(--brand-forest);
    --lim-header-green-hover: var(--brand-forest-dark);
    --lim-header-text: var(--brand-white);
    --lim-header-muted: rgba(255, 255, 255, 0.78);

    --lim-panel-text: var(--brand-charcoal);
    --lim-panel-muted: var(--brand-muted);
    --lim-panel-border: var(--brand-border);
    --lim-panel-background: var(--brand-white);
    --lim-panel-soft: var(--brand-sand);
}


/* ================================================================
   GENERAL WEBSITE COLORS
   ================================================================ */

html {
    accent-color: var(--brand-orange);
}

body {
    color: var(--brand-charcoal);
    background-color: var(--brand-white);
}

body,
button,
input,
select,
textarea {
    color: var(--brand-charcoal);
}

::selection {
    color: var(--brand-white);
    background-color: var(--brand-forest);
}

a {
    color: var(--brand-forest);
}

a:hover,
a:focus-visible {
    color: var(--brand-orange-dark);
}


/* ================================================================
   HEADER AND DESKTOP NAVIGATION
   ================================================================ */

.lim-site-header,
.site-navbar,
.navbar.site-navbar {
    color: var(--brand-white);
    background: var(--brand-forest);
}

.lim-brand,
.lim-brand:hover,
.lim-brand:focus-visible,
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus-visible {
    color: var(--brand-white);
}

.lim-brand span,
.navbar-brand span {
    color: #FFD4A8;
}

.lim-main-link,
.lim-nav-dropdown > summary {
    color: rgba(255, 255, 255, 0.82);
}

.lim-main-link:hover,
.lim-main-link:focus-visible,
.lim-main-link.active,
.lim-nav-dropdown > summary:hover,
.lim-nav-dropdown > summary:focus-visible,
.lim-nav-dropdown > summary.active,
.lim-nav-dropdown[open] > summary {
    color: var(--brand-white);
    background: rgba(242, 140, 40, 0.20);
}

.lim-main-link.active,
.lim-nav-dropdown > summary.active {
    box-shadow: inset 0 -3px 0 var(--brand-orange);
}

.lim-dropdown-panel {
    color: var(--brand-charcoal);
    background: var(--brand-white);
    border-color: var(--brand-border);
}

.lim-dropdown-panel a,
.lim-routes-panel > a {
    color: var(--brand-charcoal);
}

.lim-dropdown-panel a:hover,
.lim-dropdown-panel a:focus-visible,
.lim-routes-panel > a:hover,
.lim-routes-panel > a:focus-visible {
    color: var(--brand-forest);
    background: var(--brand-orange-soft);
}

.lim-dropdown-featured strong {
    color: var(--brand-forest);
}

.lim-dropdown-separator {
    background: var(--brand-border);
}

.lim-register-link {
    color: var(--brand-white);
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}

.lim-register-link:hover,
.lim-register-link:focus-visible {
    color: var(--brand-white);
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
}


/* ================================================================
   MOBILE NAVIGATION
   ================================================================ */

.lim-mobile-navigation,
.lim-mobile-panel,
.lim-mobile-drawer,
.lim-mobile-menu {
    color: var(--brand-charcoal);
}

.lim-mobile-navigation a,
.lim-mobile-panel a,
.lim-mobile-drawer a,
.lim-mobile-menu a {
    color: var(--brand-charcoal);
}

.lim-mobile-navigation a:hover,
.lim-mobile-navigation a:focus-visible,
.lim-mobile-navigation a.active,
.lim-mobile-panel a:hover,
.lim-mobile-panel a:focus-visible,
.lim-mobile-panel a.active,
.lim-mobile-drawer a:hover,
.lim-mobile-drawer a:focus-visible,
.lim-mobile-drawer a.active {
    color: var(--brand-forest);
    background: var(--brand-orange-soft);
}

.lim-mobile-navigation a.active,
.lim-mobile-panel a.active,
.lim-mobile-drawer a.active {
    border-left-color: var(--brand-orange);
}

.lim-menu-toggle:hover,
.lim-menu-toggle:focus-visible {
    color: var(--brand-white);
    background: rgba(242, 140, 40, 0.20);
}


/* ================================================================
   HERO AND PAGE HEADERS
   ================================================================ */

.hero-label,
.section-kicker,
.community-eyebrow {
    color: var(--brand-orange);
}

.page-header,
.place-detail-header,
.destination-section,
.empty-state {
    background-color: var(--brand-sand);
}

.page-header h1,
.place-detail-header h1,
.section-heading h1,
.section-heading h2,
.section-heading h3 {
    color: var(--brand-charcoal);
}


/* ================================================================
   BUTTONS AND CALLS TO ACTION
   ================================================================ */

.btn-primary {
    --bs-btn-color: var(--brand-white);
    --bs-btn-bg: var(--brand-forest);
    --bs-btn-border-color: var(--brand-forest);

    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-forest-dark);
    --bs-btn-hover-border-color: var(--brand-forest-dark);

    --bs-btn-focus-shadow-rgb: 31, 92, 66;

    --bs-btn-active-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-forest-dark);
    --bs-btn-active-border-color: var(--brand-forest-dark);
}

.btn-success {
    --bs-btn-color: var(--brand-white);
    --bs-btn-bg: var(--brand-moss);
    --bs-btn-border-color: var(--brand-moss);

    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-moss-dark);
    --bs-btn-hover-border-color: var(--brand-moss-dark);

    --bs-btn-focus-shadow-rgb: 74, 107, 58;

    --bs-btn-active-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-moss-dark);
    --bs-btn-active-border-color: var(--brand-moss-dark);
}

/*
 * Trail Orange is reserved for the most important discovery actions.
 */
.hero-search .btn,
.search-button,
.search-submit,
.main-cta,
.primary-cta,
.cta-button {
    color: var(--brand-white);
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.hero-search .btn:hover,
.hero-search .btn:focus-visible,
.search-button:hover,
.search-button:focus-visible,
.search-submit:hover,
.search-submit:focus-visible,
.main-cta:hover,
.main-cta:focus-visible,
.primary-cta:hover,
.primary-cta:focus-visible,
.cta-button:hover,
.cta-button:focus-visible {
    color: var(--brand-white);
    background-color: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-forest);
    --bs-btn-border-color: var(--brand-forest);

    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-forest);
    --bs-btn-hover-border-color: var(--brand-forest);

    --bs-btn-focus-shadow-rgb: 31, 92, 66;

    --bs-btn-active-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-forest);
    --bs-btn-active-border-color: var(--brand-forest);
}


/* ================================================================
   CARDS AND LIGHT SECTIONS
   ================================================================ */

.category-card {
    color: var(--brand-charcoal);
    background: var(--brand-sand);
    border: 1px solid transparent;
}

.category-card:hover {
    color: var(--brand-charcoal);
    background: var(--brand-orange-soft);
    border-color: rgba(242, 140, 40, 0.28);
}

.category-icon {
    color: var(--brand-forest);
    background: var(--brand-white);
}

.destination-card {
    color: var(--brand-white);
    background:
        linear-gradient(
            135deg,
            rgba(31, 92, 66, 0.98),
            rgba(74, 107, 58, 0.92)
        );
}

.filter-panel,
.content-card,
.contact-card,
.place-card,
.card {
    border-color: var(--brand-border);
}

.card-title,
.place-card h2,
.place-card h3,
.place-card h4,
.content-card h2,
.content-card h3,
.contact-card h2,
.contact-card h3 {
    color: var(--brand-charcoal);
}

.place-card-placeholder {
    color: var(--brand-moss);
    background: var(--brand-moss-soft);
}


/* ================================================================
   FORMS AND SEARCH CONTROLS
   ================================================================ */

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"] {
    color: var(--brand-charcoal);
    border-color: var(--brand-border);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 0.2rem rgba(242, 140, 40, 0.18);
}

.form-check-input:checked {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}


/* ================================================================
   FILTERS, TAGS AND BADGES
   ================================================================ */

.tag,
.place-tag,
.status-badge-success,
.badge.bg-success {
    color: var(--brand-white);
    background-color: var(--brand-moss) !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.filter-chip.active,
.filter-chip[aria-pressed="true"],
.selected-filter {
    color: var(--brand-white);
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.filter-chip:hover,
.filter-chip:focus-visible {
    color: var(--brand-forest);
    border-color: var(--brand-orange);
    background: var(--brand-orange-soft);
}


/* ================================================================
   MAP AND ROUTE INTERFACE ACCENTS
   ================================================================ */

.map-control-button:hover,
.map-control-button:focus-visible,
.map-toolbar button:hover,
.map-toolbar button:focus-visible,
.route-control-button:hover,
.route-control-button:focus-visible {
    color: var(--brand-forest);
    border-color: var(--brand-orange);
    background: var(--brand-orange-soft);
}

.map-control-button.active,
.map-toolbar button.active,
.route-control-button.active {
    color: var(--brand-white);
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}


/* ================================================================
   FOOTER
   ================================================================ */

.site-footer {
    color: rgba(255, 255, 255, 0.82);
    background: var(--brand-forest);
}

.site-footer h5,
.site-footer h6,
.site-footer strong {
    color: var(--brand-white);
}

.site-footer a {
    color: var(--brand-white);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: #FFD4A8;
}

.site-contact-footer-link {
    border-color: rgba(255, 255, 255, 0.14);
}


/* ================================================================
   ACCESSIBLE KEYBOARD FOCUS
   ================================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgba(242, 140, 40, 0.58);
    outline-offset: 2px;
}