/*
 * Vacdoo — site-wide styles on top of Bootstrap 5.
 * Keep this file small: prefer Bootstrap utility classes in templates,
 * and only add rules here for things utilities can't express.
 */

:root {
    /* Brand palette ported as-is from the legacy app's actual production
       stylesheet (main_v4.css, served from CloudFront and loaded by the
       live default.ctp layout — not webroot/css/style.css, which belongs
       to an unused older layout). Matches the logo's real pixel colors:
       orange #f54f1d, teal #296679. */
    --vac-orange: #f54f1d;
    --vac-teal: #296679;
    --vac-primary: var(--vac-orange);
    --vac-primary-dark: var(--vac-teal);
    --vac-topbar-bg: #464646;
    --vac-copyright: #000000;
    --vac-ink: var(--vac-teal);
    --vac-muted: #6c757d;
    --vac-surface: #f7f8fa;
    --vac-radius: 0.75rem;

    /* Autumn-leaves accent palette (client-supplied swatch) — the two
       "in-between" tones that sit alongside the existing orange/teal brand
       colors: a warmer mid-orange and a muted, cooler teal-blue. Used
       sparingly as secondary accents (badges, decorative icons) on
       subscription, destinations, and articles pages — not a replacement
       for --vac-orange/--vac-teal, which stay the primary CTA colors. */
    --vac-amber: #e8862c;
    --vac-amber-ink: #8a5417;
    --vac-sage: #6f97a1;

    /* Re-theme Bootstrap's own tokens so built-in components (.btn-primary,
       .bg-primary, .text-primary, links, nav-pills) pick up the same
       legacy brand colors without touching the vendored bootstrap.min.css. */
    --bs-primary: var(--vac-primary);
    --bs-primary-rgb: 245, 79, 29;
    --bs-link-color: var(--vac-teal);
    --bs-link-color-rgb: 41, 102, 121;
    --bs-link-hover-color: var(--vac-orange);
    --bs-link-hover-color-rgb: 245, 79, 29;
    --bs-focus-ring-color: rgba(245, 79, 29, 0.25);
}

/*
 * Bootstrap 5's compiled CSS bakes its default blue directly into each
 * component's own custom properties (--bs-btn-bg, --bs-nav-pills-link-active-bg,
 * --bs-pagination-active-bg, etc.) rather than referencing the root
 * --bs-primary token, so the :root override above doesn't reach them.
 * Re-declared here per component instead of touching the vendored file.
 */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vac-orange);
    --bs-btn-border-color: var(--vac-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vac-teal);
    --bs-btn-hover-border-color: var(--vac-teal);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vac-teal);
    --bs-btn-active-border-color: var(--vac-teal);
    --bs-btn-disabled-bg: var(--vac-orange);
    --bs-btn-disabled-border-color: var(--vac-orange);
    --bs-btn-focus-shadow-rgb: 245, 79, 29;
}

.btn-outline-primary {
    --bs-btn-color: var(--vac-orange);
    --bs-btn-border-color: var(--vac-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vac-orange);
    --bs-btn-hover-border-color: var(--vac-orange);
    --bs-btn-active-bg: var(--vac-orange);
    --bs-btn-active-border-color: var(--vac-orange);
    --bs-btn-disabled-color: var(--vac-orange);
    --bs-btn-focus-shadow-rgb: 245, 79, 29;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--vac-orange);
}

.pagination {
    --bs-pagination-active-bg: var(--vac-orange);
    --bs-pagination-active-border-color: var(--vac-orange);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--vac-orange);
}

.list-group {
    --bs-list-group-active-bg: var(--vac-orange);
    --bs-list-group-active-border-color: var(--vac-orange);
}

.progress, .progress-stacked {
    --bs-progress-bar-bg: var(--vac-orange);
}

/* Bootstrap's default checkbox/radio border (--bs-border-color, #dee2e6)
   is very faint against a white card background — darkened so unchecked
   boxes are actually visible, not just the checked/filled state. */
.form-check-input {
    border-color: #6c7a80;
}

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

body {
    color: #1c2330;
    background-color: #fff;
}

/* Matches the live site's header .main-header .logo img sizing exactly
   (main_v4.css: 70px desktop, stepping down at the same breakpoints) so
   the logo isn't just the right file but also the right size relative
   to everything else on the page. */
.vac-logo {
    height: 70px;
    width: auto;
}

@media (max-width: 1200px) {
    .vac-logo {
        height: 60px;
    }
}

@media (max-width: 991px) {
    .vac-logo {
        height: 50px;
    }
}

@media (max-width: 767px) {
    .vac-logo {
        height: 42px;
    }
}

a {
    color: var(--vac-teal);
}

a:hover {
    color: var(--vac-orange);
}

/* Main nav — every item is its own solid pill with bold white text (not
   just colored text — a filled background reads as "highlighted" much
   more clearly at a glance than text color alone, per follow-up feedback
   on two earlier, subtler attempts). `margin` between items keeps
   adjacent pills from touching now that they have a visible background,
   not just padding inside a transparent link the way plain colored text
   needed. Selector matches Bootstrap's own
   `.navbar-expand-lg .navbar-nav .nav-link` (3 classes) rather than the
   simpler `.navbar .nav-link` — otherwise Bootstrap's higher-specificity
   rule wins at the lg breakpoint and this has no effect at desktop
   widths, which is exactly what happened the first time this was
   written.
   Follow-up (autumn-palette rebalance): five solid orange pills side by
   side, on every single page, made orange the dominant color of the
   entire site rather than an accent. Swapped the resting state to teal
   (the theme's other brand color) so orange is freed up to mean
   something — it now shows on hover/focus and on whichever pill is the
   current page, at most one pill at a time instead of all five. */
.navbar .navbar-nav .nav-link {
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    color: #fff;
    font-weight: 700;
    background: var(--vac-teal);
    border-radius: 0.375rem;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.active {
    color: #fff;
    background: var(--vac-orange);
}

/* Top utility bar (phone number, sign in / sign up) — matches the legacy
   header .top-bar exactly (#464646), distinct from the teal footer. */
.vac-topbar {
    background: var(--vac-topbar-bg);
    color: #dfe3ea;
    font-size: 0.85rem;
}

.vac-topbar a {
    color: #dfe3ea;
    text-decoration: none;
}

.vac-topbar a:hover {
    color: #fff;
}

/* Hero */
.vac-hero {
    position: relative;
    background: linear-gradient(120deg, var(--vac-teal), var(--vac-orange) 140%);
    color: #fff;
    padding: 4.5rem 0 5.5rem;
}

/* Homepage-only variant: the real banner_main.png photo from the legacy
   app, instead of the flat brand gradient used on inner-page hero bands.
   Follow-up (mobile PageSpeed): the original PNG was 1920x900 and 593KB —
   a full desktop-resolution image downloaded on every device regardless
   of viewport, and by far the page's Largest Contentful Paint element.
   Replaced with WebP (same visual quality, ~80% smaller at the same
   resolution) and a separately-sized 960x450 variant for narrow
   viewports, so phones don't download desktop-resolution pixels they'll
   never render at full size. */
.vac-hero-photo {
    background: linear-gradient(rgba(20, 30, 35, 0.35), rgba(20, 30, 35, 0.45)), url("/img/hero-banner.webp") no-repeat center / cover;
}

@media (max-width: 767.98px) {
    .vac-hero-photo {
        background-image: linear-gradient(rgba(20, 30, 35, 0.35), rgba(20, 30, 35, 0.45)), url("/img/hero-banner-mobile.webp");
    }
}

.vac-hero h1 {
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.vac-hero .lead {
    max-width: 42rem;
    opacity: 0.96;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.vac-search-card {
    border-radius: var(--vac-radius);
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.18);
}

/* Section spacing/headings */
.vac-section {
    padding: 3.5rem 0;
}

.vac-section-title {
    font-weight: 700;
}

.vac-section-subtitle {
    color: var(--vac-muted);
}

/* Cards (destinations, packages, articles) */
.vac-card {
    position: relative;
    border: 0;
    border-radius: var(--vac-radius);
    overflow: hidden;
    box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
}

.vac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.15);
}

.vac-card .vac-card-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.vac-card .card-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.vac-badge-count {
    background: rgba(245, 79, 29, 0.1);
    color: var(--vac-teal);
}

/* Amber "deal"/highlight badge — subscription discount badges, etc. */
.vac-badge-amber {
    background: rgba(232, 134, 44, 0.14);
    color: var(--vac-amber-ink);
}

/* Muted sage accent for decorative icons on destinations/articles pages —
   keeps the strong brand orange reserved for actionable CTAs. */
.vac-icon-sage {
    color: var(--vac-sage);
}

/* Top accent stripe for standalone cards (e.g. the subscription pricing
   card) that aren't part of an equal-height grid, echoing .vac-hero's
   teal-to-amber gradient in miniature. */
.vac-accent-card {
    position: relative;
    overflow: hidden;
}

.vac-accent-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--vac-teal), var(--vac-amber));
}

/* Feature/icon blocks */
.vac-feature-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: rgba(245, 79, 29, 0.1);
    color: var(--vac-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Footer */
.vac-footer {
    background: var(--vac-ink);
    color: #c6cbd6;
}

.vac-footer h6 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}

.vac-footer a {
    color: #c6cbd6;
    text-decoration: none;
}

.vac-footer a:hover {
    color: #fff;
}

/* Matches the legacy site's plain black copyright strip below the footer. */
.vac-copyright-bar {
    background: var(--vac-copyright);
    color: #dfe3ea;
}

.vac-copyright-bar a {
    color: #dfe3ea;
    text-decoration: none;
}

.vac-copyright-bar a:hover {
    color: #fff;
}

.vac-footer .vac-social a {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Back to top */
#vac-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#vac-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Rich text content (article bodies, state/destination descriptions) —
   shared by Articles, Destinations, States, and Places' public pages, so
   one set of rules here reaches every long-form content page at once. */
.vac-article-body {
    line-height: 1.46;
    font-size: 1.05rem;
    color: #33424a;
}

.vac-article-body p {
    margin-bottom: 1.25rem;
    /* Justified body copy, but the last line of a paragraph is left-aligned
       rather than stretched to the full width — matches how printed
       editorial content is set, and avoids the ugly, overly-spaced-out
       final line justification produces on a short trailing line. */
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.vac-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--vac-radius);
}

.vac-article-body h1,
.vac-article-body h2,
.vac-article-body h3,
.vac-article-body h4 {
    color: var(--vac-ink);
    margin-top: 1.75rem;
    margin-bottom: 1rem;
}

.vac-article-body blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 1.5rem;
    border-left: 3px solid var(--vac-orange);
    font-style: italic;
    color: var(--vac-muted);
}

/* A raw <table> pasted through CKEditor's Source view carries no classes
   of its own, so without this it renders with the browser's bare default
   (cell text flush against the borders, no spacing at all). */
.vac-article-body table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.vac-article-body table th,
.vac-article-body table td {
    padding: 0.6rem 0.9rem;
    border: 1px solid #dee2e6;
}

.vac-article-body table th {
    background: var(--vac-surface);
    text-align: left;
}

.vac-hero .vac-article-body {
    opacity: 0.95;
}

/* The lead photo and location map on a content page's main column get the
   same soft lift as the site's card grid, instead of sitting perfectly
   flat against the page background. */
.vac-content-photo {
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
}

/* A small accent rule under each section heading within a content page's
   main column (About, Best Time to Visit, How to Reach, ...) gives long
   pages a clearer break between sections than font-weight alone. */
.vac-section .col-lg-8 > h2 {
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--vac-surface);
}

/* Admin shell */

/* Form field labels across every admin and travel-agent screen (dashboard
   shell, plus the standalone admin/agent login and agent register layouts,
   all of which carry this class on <body>) — Bootstrap's default <label>
   has no distinct weight or color of its own, so labels read as barely
   heavier than the input placeholder text beneath them. Deliberately
   scoped to these two sections only, not the public site's own forms
   (contact, login/register, package inquiry). */
.vac-dashboard-shell form label {
    font-weight: 700;
    color: #11181f;
}

.vac-admin-sidebar {
    background: var(--vac-ink);
    color: #dfe3ea;
    min-height: 100vh;
}

.vac-admin-sidebar .nav-link {
    color: #b7bfcc;
}

.vac-admin-sidebar .nav-link.active,
.vac-admin-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}

/* Collapsible sidebar groups — same look as a .nav-link, but a <button>
   toggling a .collapse instead of a link. data-bs-parent on the .collapse
   itself (set inline) makes Bootstrap close any other open group in the
   same accordion container automatically. */
.vac-sidebar-group-toggle {
    background: none;
    border: 0;
    padding: 0.5rem 0.75rem;
    color: #b7bfcc;
    font-size: inherit;
    text-align: left;
}

.vac-sidebar-group-toggle:hover,
.vac-sidebar-group-toggle.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}

.vac-sidebar-chevron {
    transition: transform 0.15s ease;
    font-size: 0.75em;
}

.vac-sidebar-group-toggle[aria-expanded="true"] .vac-sidebar-chevron {
    transform: rotate(180deg);
}

.vac-sidebar-subitems {
    padding-left: 1.25rem;
    margin-top: 0.125rem;
}

.vac-sidebar-subitems .nav-link {
    font-size: 0.925em;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Desktop rail scrolls independently of the page — the mobile offcanvas
   already gets its own scroll from Bootstrap's .offcanvas-body. */
.vac-admin-sidebar-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.vac-admin-topbar {
    background: #fff;
    border-bottom: 1px solid #e7e9ee;
}

/*
 * Flex items default to min-width: auto, so a wide table (e.g. an admin
 * listing with long unbroken content) forces the whole content column
 * wider than the viewport instead of scrolling inside .table-responsive
 * as intended. Bootstrap doesn't ship a min-w-0 utility, so it's defined
 * here.
 */
.min-w-0 {
    min-width: 0;
}

/*
 * FormHelper's multi-checkbox select() (admin/agent package forms' Holiday
 * themes / Package types) nests the <input> directly inside the <label>,
 * immediately followed by the option text with no separating markup —
 * Bootstrap's own .form-check spacing (input/label as siblings with a
 * negative-margin offset) doesn't apply to that nested structure, so the
 * checkbox and its text render flush against each other. Doesn't affect
 * standalone checkboxes built the normal Form->checkbox()+Form->label()
 * way (e.g. the "Active" toggle), since there the input isn't a child of
 * the label at all.
 */
.form-check-label > .form-check-input {
    margin-right: 0.4rem;
}

/*
 * Package itinerary accordion headers — shorter (all days render expanded
 * by default now, so a tall header per day added up fast), in both the
 * expanded and collapsed states. The caret icon is Bootstrap's own chevron
 * SVG re-colored white (baked into the data URI — there's no separate
 * icon-color variable to override) to stay visible against the fill.
 *
 * Follow-up (autumn-palette rebalance): this was orange, meaning a package
 * with a multi-day itinerary (some run 8-10 days) rendered that many solid
 * orange bars stacked down the page — by far the single biggest block of
 * orange on the whole site, worse than the main nav ever was. Switched to
 * teal, matching the same "orange is a spotlight, not a wash" rebalance
 * applied to the main nav above.
 */
#itineraryAccordion .accordion-button {
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-btn-bg: var(--vac-teal);
    --bs-accordion-active-bg: var(--vac-teal);
    --bs-accordion-btn-color: #fff;
    --bs-accordion-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(41, 102, 121, 0.35);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    font-weight: 700;
}

/*
 * Each day is its own visually separate rounded box (a 2px gap) instead of
 * Bootstrap's default touching-items-with-shared-borders look — needed
 * once every item started rendering expanded by default, so adjacent days
 * no longer read as one continuous block. overflow: hidden clips the
 * button/body's square corners to the item's own border-radius, so no
 * per-corner radius overrides are needed on the button itself.
 */
#itineraryAccordion .accordion-item {
    margin-bottom: 2px;
    border-radius: var(--bs-accordion-border-radius);
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    overflow: hidden;
}

#itineraryAccordion .accordion-item:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .vac-hero {
        padding: 3rem 0 3.5rem;
        text-align: center;
    }

    .vac-hero .lead {
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * FormHelper's own automatic per-field validation output (used by
 * Form->control() whenever no manual .invalid-feedback block is coded —
 * e.g. the registration forms) renders as <div class="error-message">
 * with no color of its own; Bootstrap only styles its own .invalid-feedback
 * class. Matched to that class's color/size/spacing so both mechanisms
 * look identical wherever they're mixed on the same form.
 */
.error-message {
    color: var(--bs-form-invalid-color, #dc3545);
    font-size: 0.875em;
    margin-top: 0.25rem;
}