/* =========================================================
   Rate-Match by HOTEL switch — brand tokens.

   Source artwork: Hotel_Switch_Print_45x30cm.pdf. That file is
   unmanaged DeviceCMYK (no ICC profile, no OutputIntent), so the
   CMYK values noted below are the spec and the sRGB values here
   are the conversion that matches the artwork as drawn. If the
   designer supplies intended hex codes, those win over these.

   Loaded by base.html.twig for every page, so it must come
   before any stylesheet that maps its own tokens onto these.
   ========================================================= */
:root {
    /* --- the four brand colours --- */
    --hs-navy: #071d45;   /* cmyk 94/75/40/55 — the ground */
    --hs-cream: #fbf5e6;  /* cmyk  2/ 3/ 8/ 0 — "HOTEL", pill fill */
    --hs-amber: #dd9e4b;  /* cmyk  8/36/82/ 4 — "switch", pill border */
    --hs-teal: #7f9e8e;   /* cmyk 53/16/37/ 8 — the dot */

    /* --- navy scale, so cards can sit on the brand ground and read as raised --- */
    --hs-navy-surface: #0c2a57;
    --hs-navy-raised: #12356a;
    --hs-navy-sunken: #051530;
    --hs-navy-line: #1d4079;

    /* --- type on navy --- */
    --hs-text: var(--hs-cream);
    --hs-text-sub: #aebacf;
    --hs-text-muted: #7b89a5;

    /* --- accent ramps --- */
    --hs-amber-light: #ebb871;
    --hs-amber-soft: rgba(221, 158, 75, 0.14);
    --hs-amber-glow: rgba(221, 158, 75, 0.22);
    --hs-teal-light: #9db9aa;
    --hs-teal-soft: rgba(127, 158, 142, 0.16);

    /* Amber and cream are both light. Anything sitting on them takes navy,
       never white — cream on amber is about 2:1, which fails at any size. */
    --hs-on-accent: var(--hs-navy);

    /* --- status colours, lifted for legibility on a dark ground --- */
    --hs-success: #4fbf8b;
    --hs-success-soft: rgba(79, 191, 139, 0.15);
    --hs-success-line: rgba(79, 191, 139, 0.35);
    --hs-danger: #e4695f;
    --hs-danger-soft: rgba(228, 105, 95, 0.15);
    --hs-danger-line: rgba(228, 105, 95, 0.35);
    --hs-warning: #e0a93f;
    --hs-warning-soft: rgba(224, 169, 63, 0.15);
    --hs-warning-line: rgba(224, 169, 63, 0.35);

    /* --- shadows only read as depth on navy if they are darker than it --- */
    --hs-shadow-sm: 0 1px 3px rgba(2, 8, 20, 0.35);
    --hs-shadow: 0 4px 10px rgba(2, 8, 20, 0.4);
    --hs-shadow-lg: 0 14px 34px rgba(2, 8, 20, 0.5);
    --hs-shadow-glow: 0 0 20px var(--hs-amber-glow);

    /* --- wordmark face. Segoe UI is a Windows system font with no web
       embedding licence, so it resolves locally and falls back to Selawik
       (Microsoft's metric-compatible open clone) or Inter elsewhere. --- */
    --hs-font-brand: 'Segoe UI', Selawik, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================================================
   The wordmark lockup: "Rate-Match by HOTEL switch".
   Rebuilt in markup rather than shipped as an image because the
   outgoing Logo_Signature.png sets its wordmark in dark ink,
   which disappears against the navy ground.

   Proportions follow the print sheet: "switch" at 96% of
   "HOTEL", 0.030em tracking on HOTEL, ~0.34em word gap.
   ========================================================= */
.hs-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: 0.42em;
    font-family: var(--hs-font-brand);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.hs-lockup:hover {
    text-decoration: none;
}

.hs-lockup-product {
    color: var(--hs-cream);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hs-lockup-by {
    color: var(--hs-text-muted);
    font-size: 0.62em;
    font-weight: 500;
    font-style: italic;
}

.hs-lockup-parent {
    font-size: 0.92em;
    font-weight: 300;
}

.hs-lockup-hotel {
    color: var(--hs-cream);
    letter-spacing: 0.03em;
}

/* 96% of HOTEL, no tracking — as set in the artwork */
.hs-lockup-switch {
    color: var(--hs-amber);
    font-size: 0.96em;
    letter-spacing: 0;
    margin-left: 0.3em;
}

/* Header and footer sizes: the header carries the mark, the footer echoes it */
.hs-lockup--header {
    font-size: 1.05rem;
}

.hs-lockup--footer {
    font-size: 0.92rem;
    opacity: 0.85;
}

/* Co-branded header lockup. Its proportions mirror the supplied artwork while
   keeping the typography and divider sharp at every screen density. */
.hs-partner-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1rem;
    color: inherit;
    font-family: var(--hs-font-brand);
    text-decoration: none;
    white-space: nowrap;
}

.hs-partner-logo:hover {
    color: inherit;
    text-decoration: none;
}

.hs-partner-logo__hotel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .22rem;
}

.hs-partner-logo__wordmark {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    padding-inline: .28rem;
    font-size: 1.48rem;
    font-weight: 300;
    line-height: 1;
}

.hs-partner-logo__hotel-name {
    color: var(--hs-cream);
    letter-spacing: .025em;
}

.hs-partner-logo__switch-name {
    color: var(--hs-amber);
    font-size: .96em;
}

.hs-partner-logo__tagline {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-width: 18rem;
    padding: .2rem .25rem .2rem .72rem;
    border: 1px solid var(--hs-amber);
    border-radius: 999px;
    background: var(--hs-cream);
    color: var(--hs-navy);
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
}

.hs-partner-logo__tagline i {
    width: .72rem;
    height: .72rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--hs-teal);
    box-shadow: inset 0 0 0 1px rgba(7, 29, 69, .16);
}

.hs-partner-logo__divider {
    align-self: stretch;
    width: 1px;
    min-height: 3.15rem;
    background: var(--hs-amber);
}

.hs-partner-logo__rate-match {
    position: relative;
    display: block;
    width: 7.5rem;
    line-height: 0;
}

.hs-partner-logo__rate-match img {
    display: block;
    width: 100%;
    height: auto;
}

.hs-partner-logo__rate-match-text {
    position: absolute;
    inset: 0;
    /* Keep the turquoise monogram from the original artwork and recolour only
       the dark wordmark so it remains legible on the navy header. */
    clip-path: inset(0 0 0 34%);
    filter: brightness(0) invert(92%) sepia(11%) saturate(373%) hue-rotate(352deg) brightness(107%);
}

@media (max-width: 1100px) {
    .hs-partner-logo {
        gap: .65rem;
    }

    .hs-partner-logo__wordmark {
        font-size: 1.2rem;
    }

    .hs-partner-logo__tagline {
        min-width: 14.5rem;
        font-size: .39rem;
    }

    .hs-partner-logo__rate-match {
        width: 5.7rem;
    }
}

@media (max-width: 700px) {
    .hs-partner-logo__tagline,
    .hs-partner-logo__divider {
        display: none;
    }

    .hs-partner-logo__wordmark {
        padding: 0;
        font-size: 1.08rem;
    }

    .hs-partner-logo__rate-match {
        width: 4.8rem;
    }
}

@media (max-width: 430px) {
    .hs-partner-logo__rate-match {
        display: none;
    }
}

/* The tagline pill: cream fill, amber hairline, navy text, teal dot at the
   right end. Dot is 57% of the pill height and the text 43%, per the sheet. */
.hs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.5em 0.55em 0.5em 1.5em;
    background: var(--hs-cream);
    border: 1.5px solid var(--hs-amber);
    border-radius: 999px;
    color: var(--hs-navy);
    font-family: var(--hs-font-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hs-pill-dot {
    flex: 0 0 auto;
    width: 1.32em;
    height: 1.32em;
    border-radius: 50%;
    background: var(--hs-teal);
    box-shadow: 0 0 0 1.5px var(--hs-amber);
}

/* =========================================================
   Bootstrap 5.1.3 bridge.

   5.1 predates `data-bs-theme` and hardcodes a light palette in
   its component rules, so every surface Bootstrap paints has to
   be re-pointed at the brand by hand. Only the components this
   project actually uses are covered — card, table, forms, modal,
   badge, dropdown, list-group, progress, close button, buttons.
   ========================================================= */

/* --- buttons: amber and cream are light, so their label is navy --- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--hs-amber);
    border-color: var(--hs-amber);
    color: var(--hs-on-accent);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--hs-amber-light);
    border-color: var(--hs-amber-light);
    color: var(--hs-on-accent);
}

.btn-outline-primary {
    color: var(--hs-amber);
    border-color: var(--hs-amber);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--hs-amber);
    border-color: var(--hs-amber);
    color: var(--hs-on-accent);
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--hs-text-sub);
    background-color: transparent;
    border-color: var(--hs-navy-line);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    color: var(--hs-text);
    background-color: var(--hs-navy-raised);
    border-color: var(--hs-navy-raised);
}

.btn-link {
    color: var(--hs-amber);
}

.btn-close {
    /* Bootstrap's default close glyph is a black SVG: invert it for navy */
    filter: invert(1) grayscale(1) brightness(2);
}

/* --- surfaces --- */
.card {
    background-color: var(--hs-navy-surface);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.card-header,
.card-footer {
    background-color: var(--hs-navy-raised);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.list-group-item {
    background-color: var(--hs-navy-surface);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.dropdown-menu {
    background-color: var(--hs-navy-surface);
    border-color: var(--hs-navy-line);
}

.dropdown-item {
    color: var(--hs-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hs-navy-raised);
    color: var(--hs-text);
}

/* Utility backgrounds assume a light page; on navy they must not go white */
.bg-light,
.bg-white {
    background-color: var(--hs-navy-raised) !important;
    color: var(--hs-text);
}

.text-muted {
    color: var(--hs-text-sub) !important;
}

.border {
    border-color: var(--hs-navy-line) !important;
}

/* --- tables --- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hs-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--hs-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--hs-text);
    color: var(--hs-text);
    border-color: var(--hs-navy-line);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.table thead th {
    color: var(--hs-text);
    border-bottom-color: var(--hs-navy-line);
}

/* --- form controls --- */
.form-control,
.form-select {
    background-color: var(--hs-navy-sunken);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--hs-navy-sunken);
    border-color: var(--hs-amber);
    color: var(--hs-text);
    box-shadow: 0 0 0 0.25rem var(--hs-amber-glow);
}

.form-control::placeholder {
    color: var(--hs-text-muted);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--hs-navy-surface);
    color: var(--hs-text-sub);
}

.form-select {
    /* the default chevron is a dark SVG data URI — recolour it to cream */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fbf5e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-label,
.col-form-label {
    color: var(--hs-text);
}

.form-check-input {
    background-color: var(--hs-navy-sunken);
    border-color: var(--hs-navy-line);
}

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

.input-group-text {
    background-color: var(--hs-navy-raised);
    border-color: var(--hs-navy-line);
    color: var(--hs-text-sub);
}

/* --- modal --- */
.modal-content {
    background-color: var(--hs-navy-surface);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.modal-header,
.modal-footer {
    border-color: var(--hs-navy-line);
}

/* --- badges and progress --- */
.badge.bg-primary { background-color: var(--hs-amber) !important; color: var(--hs-on-accent); }
.badge.bg-secondary { background-color: var(--hs-navy-raised) !important; color: var(--hs-text); }
.badge.bg-success { background-color: var(--hs-success) !important; color: var(--hs-on-accent); }
.badge.bg-danger { background-color: var(--hs-danger) !important; color: var(--hs-on-accent); }
.badge.bg-warning { background-color: var(--hs-warning) !important; color: var(--hs-on-accent); }
.badge.bg-info { background-color: var(--hs-teal) !important; color: var(--hs-on-accent); }
.badge.bg-light { background-color: var(--hs-navy-raised) !important; color: var(--hs-text); }

.progress {
    background-color: var(--hs-navy-sunken);
}

.progress-bar {
    background-color: var(--hs-amber);
    color: var(--hs-on-accent);
}

/* --- alerts. genwizard.css also restyles these, but only the wizard loads it;
   every other page gets Bootstrap's pale tints unless they are fixed here. --- */
.alert {
    border-width: 1px;
}

.alert-primary,
.alert-info {
    background-color: var(--hs-amber-soft);
    border-color: var(--hs-amber-glow);
    color: var(--hs-amber-light);
}

.alert-success {
    background-color: var(--hs-success-soft);
    border-color: var(--hs-success-line);
    color: var(--hs-success);
}

.alert-warning {
    background-color: var(--hs-warning-soft);
    border-color: var(--hs-warning-line);
    color: var(--hs-warning);
}

.alert-danger {
    background-color: var(--hs-danger-soft);
    border-color: var(--hs-danger-line);
    color: var(--hs-danger);
}

.alert-secondary,
.alert-light,
.alert-dark {
    background-color: var(--hs-navy-raised);
    border-color: var(--hs-navy-line);
    color: var(--hs-text);
}

.alert-link {
    color: inherit;
}

/* --- inline code and pre, which Bootstrap leaves on the page ground --- */
code {
    color: var(--hs-amber-light);
}

pre {
    color: var(--hs-text);
}

/* --- text and table utilities that assume light ink on a light page --- */
.text-primary { color: var(--hs-amber) !important; }
.text-secondary { color: var(--hs-text-sub) !important; }
.text-success { color: var(--hs-success) !important; }
.text-danger { color: var(--hs-danger) !important; }
.text-warning { color: var(--hs-warning) !important; }
.text-info { color: var(--hs-teal-light) !important; }
.text-dark,
.text-black,
.text-body { color: var(--hs-text) !important; }

.bg-dark { background-color: var(--hs-navy-sunken) !important; }
.bg-body { background-color: var(--hs-navy) !important; }

.table-light > :not(caption) > * > *,
.table-light th,
.table-light td {
    background-color: var(--hs-navy-raised);
    color: var(--hs-text);
    border-color: var(--hs-navy-line);
}

/* Bootstrap's shadow utilities are tuned for light grounds and vanish on navy */
.shadow-sm { box-shadow: var(--hs-shadow-sm) !important; }
.shadow { box-shadow: var(--hs-shadow) !important; }
.shadow-lg { box-shadow: var(--hs-shadow-lg) !important; }

/* Links inside content default to Bootstrap blue, unreadable on navy.
   The exclusions are links that are really controls and colour themselves —
   four :not() make this specific enough to beat a plain component class. */
a:not(.btn):not(.hs-lockup):not([class*="breadcrumb"]):not([class*="card"]):not(.scope-option):not(.hotels-cta):not(.hotel-row-site) {
    color: var(--hs-amber);
}

a:not(.btn):not(.hs-lockup):not([class*="breadcrumb"]):not([class*="card"]):not(.scope-option):not(.hotels-cta):not(.hotel-row-site):hover {
    color: var(--hs-amber-light);
}

/* Native scrollbars: the default light thumb is loud against navy */
* {
    scrollbar-color: var(--hs-navy-line) transparent;
}