@charset "utf-8";

/* ==========================================================================
   BestOrlandoHotelsFL.com
   One stylesheet. Mobile-first, min-width media queries only.
   Every token below comes from the house style guide, section 74.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/poppins-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/poppins-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/source-sans-3-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens ------------------------------------------------------ */

:root {
    --navy: #0a1d3a;
    --teal: #00afcb;
    --teal-ink: #007f99;
    --teal-dark: #008fa8;
    --gold: #ffc857;
    --coral: #ff6b4a;
    --coral-dark: #e95839;
    --sky: #f2f4f7;
    --white: #fff;
    --slate: #516072;
    --border: #d9e1e8;
    --positive: #2eaf74;
    --warning: #f4a62a;

    --font-heading: "Poppins", system-ui, Arial, sans-serif;
    --font-body: "Source Sans 3", system-ui, Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-pill: 999px;

    --shadow-card: 0 6px 20px rgba(10, 29, 58, .08);
    --shadow-elevated: 0 10px 30px rgba(10, 29, 58, .12);

    --wide: 1280px;
    --standard: 1180px;
    --reading: 760px;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: normal;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--navy);
    margin: 0 0 .5em;
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-weight: 700; font-size: 34px; line-height: 1.12; }
h2 { font-weight: 700; font-size: 28px; line-height: 1.18; }
h3 { font-weight: 600; font-size: 23px; line-height: 1.22; }
h4 { font-weight: 600; font-size: 19px; line-height: 1.25; }

p, ul, ol, table, figure, blockquote {
    margin: 0 0 1rem;
}

a {
    color: var(--teal-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--navy);
}

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
    border-radius: 4px;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

small { font-size: 14px; }

/* --- Layout ------------------------------------------------------------- */

.container {
    width: min(100% - 32px, var(--standard));
    margin-inline: auto;
}

.container--wide { max-width: var(--wide); }
.container--reading { max-width: var(--reading); }

.section {
    padding-block: 48px;
}

.section--compact { padding-block: 32px; }
.section--sky { background: var(--sky); }

.prose { max-width: var(--reading); }
.prose > :last-child { margin-bottom: 0; }

/* Blocks inside a band sit next to each other, so the rhythm between them
   has to come from here rather than from each block's own margin.

   This is a universal sibling rule rather than a list of class names. The
   list was the bug: it named .prose, .table-block, .card-grid and a few
   others, and every block added afterwards inherited nothing. The quick
   facts panel sat flush against the verdict above it for exactly that
   reason, which read as two grey blocks glued together. */
.section > .container > * + * {
    margin-top: 36px;
}

/* A heading belongs to the block underneath it, so it keeps less distance
   than two independent blocks do. */
.section > .container > h2 + *,
.section > .container > h3 + *,
.section > .container > .prose + .table-block,
.section > .container > .prose + .card-grid,
.section > .container > .prose + .link-grid {
    margin-top: 20px;
}

.lead {
    font-size: 19px;
    line-height: 1.55;
    max-width: 820px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: var(--white);
    padding: 12px 20px;
    z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
    color: var(--white);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    padding-block: 6px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto;
    padding: 4px 0;
}

.logo__mark { flex: 0 0 auto; width: 44px; height: 44px; }
.logo__disc { fill: var(--navy); }

.logo__text {
    display: block;
    font-family: var(--font-heading);
    color: var(--navy);
    line-height: 1;
}

.logo__name {
    display: block;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.logo__name .t { color: var(--teal-ink); }

.logo__sub {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
}

.logo__sub .g { color: #b8860f; }

/* On the navy footer the two navy words would disappear, so they turn
   white and the accents brighten to their full brand values. */
.site-footer .logo__text { color: #fff; }
.site-footer .logo__name .t { color: var(--teal); }
.site-footer .logo__sub .g { color: var(--gold); }
.site-footer .logo__disc { fill: rgba(255, 255, 255, .1); }

.nav-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    background: var(--white);
    border: 1.5px solid var(--navy);
    border-radius: var(--radius-pill);
    color: var(--navy);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.nav-toggle:hover { background: var(--sky); }

.site-nav {
    display: none;
    padding-bottom: 16px;
}

.site-nav.is-open { display: block; }

.site-nav__group + .site-nav__group {
    border-top: 1px solid var(--border);
}

.site-nav__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate);
    margin: 16px 0 8px;
}

.site-nav__list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 2px;
}

.site-nav__list a {
    display: block;
    padding: 10px 8px;
    color: var(--navy);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
    background: var(--sky);
    color: var(--teal-ink);
}

/* Specific enough to beat .button, which is defined later. */
.site-header .header-cta { display: none; }

/* --- Buttons ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 24px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
}

.button--primary { background: var(--coral); color: var(--white); }
.button--primary:hover { background: var(--coral-dark); color: var(--white); transform: translateY(-1px); }

.button--secondary { background: var(--teal); color: var(--white); }
.button--secondary:hover { background: var(--teal-dark); color: var(--white); }

.button--outline {
    background: var(--white);
    border: 1.5px solid var(--navy);
    color: var(--navy);
}

.button--outline:hover { background: var(--sky); color: var(--navy); }

.button--full { width: 100%; }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.hero .button-row { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .button:hover, .card:hover { transform: none; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--navy);
    color: var(--white);
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 420px;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(10, 29, 58, .92) 0%,
        rgba(10, 29, 58, .78) 55%,
        rgba(10, 29, 58, .62) 100%);
}

.hero > .container {
    width: min(100% - 32px, var(--standard));
}

.hero__inner {
    padding-block: 40px 44px;
    max-width: 680px;
}

.hero h1 { color: var(--white); font-size: 36px; }

.hero__lead {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 24px;
}

.hero .breadcrumb,
.hero .breadcrumb a,
.hero .breadcrumb li[aria-current] {
    color: rgba(255, 255, 255, .82);
}

.hero .breadcrumb a:hover { color: var(--white); }

.hero--compact .hero__inner { padding-block: 28px 32px; }

/* --- Breadcrumbs -------------------------------------------------------- */

.breadcrumb {
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 12px;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    opacity: .55;
}

.breadcrumb a { color: inherit; }

/* --- Verdict, callouts -------------------------------------------------- */

.verdict {
    background: var(--sky);
    border: 1px solid var(--border);
    border-left: 4px solid var(--coral);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 0 0 24px;
    max-width: 820px;
}

.verdict h2,
.verdict p:first-child strong {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--coral-dark);
    margin: 0 0 8px;
}

.verdict p:last-child { margin-bottom: 0; }

.callout {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 0 0 24px;
    background: var(--sky);
    max-width: 820px;
}

.callout > :last-child { margin-bottom: 0; }
.callout h3 { font-size: 19px; margin-bottom: 6px; }

.callout--info { background: rgba(0, 175, 203, .08); border-color: rgba(0, 175, 203, .35); }
.callout--warning { background: rgba(244, 166, 42, .1); border-color: rgba(244, 166, 42, .45); }
.callout--tradeoff { background: rgba(255, 107, 74, .07); border-color: rgba(255, 107, 74, .35); }

.tradeoff {
    border-left: 4px solid var(--warning);
    background: rgba(244, 166, 42, .09);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin: 0 0 16px;
}

.tradeoff > :last-child { margin-bottom: 0; }

.tradeoff__label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a5a06;
    margin-bottom: 4px;
}

/* --- Fit lists ---------------------------------------------------------- */

.fit-grid {
    display: grid;
    gap: 16px;
    margin: 0 0 24px;
}

.fit {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px 20px;
    background: var(--white);
}

.fit h3 {
    font-size: 17px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fit h3 svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.fit--good h3 svg { color: var(--positive); }
.fit--skip h3 svg { color: var(--coral-dark); }

.fit ul {
    margin: 0;
    padding-left: 20px;
}

.fit li { margin-bottom: 6px; }
.fit li:last-child { margin-bottom: 0; }

.fit--good { border-top: 3px solid var(--positive); }
.fit--skip { border-top: 3px solid var(--coral); }

/* --- Cards -------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .16s ease, box-shadow .16s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.card__media {
    position: relative;
    background: var(--sky);
}

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

.card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    margin: 0;
}

.card__title a { color: var(--navy); text-decoration: none; }
.card__title a:hover { color: var(--teal-ink); text-decoration: underline; }

.card__meta {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.card__meta .dot { opacity: .5; }

.card p { margin: 0; }

.card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.card__foot .button { min-height: 44px; font-size: 14px; padding: 6px 18px; }

/* Compact link cards used for hub navigation. */
.link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.link-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    text-decoration: none;
    color: var(--navy);
    transition: border-color .16s ease, background-color .16s ease;
}

.link-card:hover {
    border-color: var(--teal);
    background: var(--sky);
    color: var(--navy);
}

.link-card svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-top: 2px;
    color: var(--teal);
}

.link-card strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
}

.link-card span {
    display: block;
    font-size: 14px;
    color: var(--slate);
    line-height: 1.45;
}

/* --- Badges and scores -------------------------------------------------- */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    /* The award label and the feature chips underneath are two different
       kinds of thing, and with no gap they read as one crowded row. */
    margin: 0 0 12px;
    padding: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: nowrap;
}

.badge svg { width: 14px; height: 14px; flex: 0 0 14px; }

.badge--navy { background: var(--navy); color: var(--white); }
.badge--teal { background: rgba(0, 175, 203, .14); color: #056579; }
.badge--gold { background: rgba(255, 200, 87, .28); color: #7a5502; }
.badge--coral { background: rgba(255, 107, 74, .14); color: #b23a1e; }
.badge--green { background: rgba(46, 175, 116, .15); color: #17683f; }

.badge--navy svg { stroke: currentColor; }

.score {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--navy);
    color: var(--white);
    border-radius: 10px;
    padding: 3px 9px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
}

.score span { font-size: 11px; font-weight: 600; opacity: .8; }

.stars {
    color: #c98f14;
    letter-spacing: .05em;
    font-size: 13px;
}

/* --- Hotel entries on collection pages ---------------------------------- */

.pick {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin: 0 0 24px;
}

.pick__media {
    display: block;
    background: var(--sky);
}

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

/* The generated tile for a property with no photograph. It is drawn to fill
   the same frame, so it needs no separate sizing, only a background that
   matches its own gradient while it decodes. */
.pick__media--tile { background: var(--navy); }

.pick__body {
    padding: 22px 20px;
}

.pick__body > :last-child { margin-bottom: 0; }

.pick__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 4px;
}

.pick__rank {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal-ink);
    display: block;
    margin-bottom: 6px;
}

.pick h3 { margin: 0; font-size: 22px; }
.pick h3 a { color: var(--navy); text-decoration: none; }
.pick h3 a:hover { color: var(--teal-ink); text-decoration: underline; }

.pick__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
    margin: 8px 0 14px;
}

/* The reason to book and the reason not to: same shape, green then amber. */
.pick__bestfor,
.pick__watch {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 15.5px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.pick__bestfor {
    background: rgba(46, 175, 116, .1);
    border-left: 3px solid var(--positive);
}

.pick__watch {
    background: rgba(244, 166, 42, .12);
    border-left: 3px solid var(--warning);
    margin-bottom: 0;
}

.pick__bestfor svg,
.pick__watch svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin-top: 2px;
}

.pick__bestfor svg { color: #17683f; }
.pick__watch svg { color: #8a5a06; }

.pick__bestfor strong { color: #14603a; }
.pick__watch strong { color: #8a5a06; }

.pick__features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
}

.pick__features li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sky);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    color: var(--navy);
}

.pick__features svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--teal-ink);
}

.pick__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Buttons need clear air below the Best for and Watch out bars. */
    margin-top: 28px;
}

.pick__actions .button { min-height: 44px; font-size: 14px; }

/* --- Tables ------------------------------------------------------------- */

/* A table is a block with room around it, not a paragraph. */
.table-block {
    margin: 32px 0 40px;
}

.table-block:first-child { margin-top: 0; }

.table-block__caption {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
    margin: 0 0 12px;
}

.table-wrap {
    overflow-x: auto;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 15px;
    margin: 0;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

thead th {
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    padding: 0;
}

tbody tr:nth-child(even) { background: var(--sky); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

tbody th {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--navy);
}

td .yes { color: #17683f; font-weight: 600; }
td .no { color: var(--slate); }

.table-hint {
    font-size: 13px;
    color: var(--slate);
    margin: 8px 0 0;
}

/* --- Sorting ---------------------------------------------------------- */

.table-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.table-sort:hover { background: rgba(255, 255, 255, .1); }

.table-sort__arrow {
    opacity: .45;
    font-size: 11px;
    line-height: 1;
}

th[aria-sort] .table-sort__arrow { opacity: 1; color: var(--gold); }

/* --- Filter ----------------------------------------------------------- */

.table-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 12px;
}

.table-filter label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--slate);
}

.table-filter input {
    width: min(100%, 260px);
    min-height: 44px;
    padding: 8px 14px;
    font-size: 15px;
}

.table-filter__count {
    font-size: 14px;
    color: var(--slate);
}

.table-empty {
    padding: 16px;
    margin: 0;
    font-size: 15px;
    color: var(--slate);
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
    border-top: 1px solid var(--border);
    max-width: 820px;
}

.faq details {
    border-bottom: 1px solid var(--border);
}

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 40px 16px 0;
    position: relative;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 24px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.faq details[open] summary::after {
    transform: rotate(-135deg);
    top: 27px;
}

.faq details > div {
    padding: 0 0 16px;
}

.faq details > div > :last-child { margin-bottom: 0; }

/* --- Related links ------------------------------------------------------ */

.related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.related a {
    display: block;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
    font-size: 16px;
}

.related a:hover { border-color: var(--teal); background: var(--sky); }

.related a span,
.related__static span {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: var(--slate);
    margin-top: 2px;
}

/* Card variant: the same links, each with the picture of the page it leads
   to. A column of bordered text boxes reads as a list of leftovers; with the
   image it reads as somewhere worth going. */
.related--cards {
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.related--cards a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .16s ease, box-shadow .16s ease,
        border-color .16s ease;
}

.related--cards a:hover,
.related--cards a:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
    background: var(--white);
}

.related__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--sky);
    overflow: hidden;
}

.related__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.related--cards a:hover .related__media img { transform: scale(1.035); }

.related__text {
    display: block;
    padding: 14px 16px 16px;
}

.related--cards a span span { margin-top: 4px; }

/* An alternative that has no profile of its own yet. */
.related__static {
    display: block;
    padding: 12px 16px;
    background: var(--sky);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--navy);
    font-weight: 600;
    font-size: 16px;
}

/* --- Quick facts -------------------------------------------------------- */

.facts {
    margin: 0 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background: var(--sky);
    padding: 20px;
}

.facts h2 { font-size: 19px; margin-bottom: 12px; }

.facts dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.facts div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.facts div:last-child { border-bottom: 0; }

.facts dt {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--slate);
    flex: 0 0 auto;
    min-width: 150px;
}

.facts dd { margin: 0; font-size: 15px; }

/* --- Hotel profile intro ------------------------------------------------ */

.hotel-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 0 24px;
}

.hotel-intro .pick__media {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--border);
}

.hotel-intro .facts { margin: 0; }

@media (min-width: 64rem) {
    .hotel-intro {
        grid-template-columns: 380px minmax(0, 1fr);
        align-items: start;
        gap: 28px;
    }
}

/* --- Verified line ------------------------------------------------------ */

.checked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--slate);
    background: var(--sky);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    margin: 0 0 20px;
}

.checked svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--positive);
}

.disclosure {
    font-size: 14px;
    color: var(--slate);
    max-width: var(--reading);
    margin: 0 0 20px;
}

/* --- Forms -------------------------------------------------------------- */

.form { max-width: 620px; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.field .hint {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--slate);
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 16px;
}

textarea { min-height: 140px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 175, 203, .15);
}

.checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
}

.checkbox input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 20px; }

/* --- Hotel finder ------------------------------------------------------- */

.finder {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-card);
    padding: 28px 20px 24px;
}

/* Padding-top on a fieldset lands *below* the legend, not above it: the
   legend sits on the top border edge and the content box starts under it.
   Using it for the space above the question therefore did the opposite of
   what it looked like, pushing each question away from its own answers while
   leaving it jammed against the one before. The air above comes from the
   legend's own margin, the air below from the fieldset's padding-bottom. */
.finder__step {
    border: 0;
    border-top: 1px solid var(--border);
    padding: 0 0 40px;
    margin: 0;
}

.finder__step:last-of-type { padding-bottom: 8px; }

.finder legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    /* margin-top on a legend does not move it: it is anchored to the
       fieldset's top border edge. The air above each question therefore has
       to come from the previous fieldset's padding-bottom. */
    margin: 0 0 16px;
}

/* The first question needs no padding-top of its own: on a fieldset that
   space lands under the legend, which would push the question away from its
   own answers. The panel's padding provides it instead. */
.finder__step:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.finder__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
}

/* Each step gets its own accent so the four questions read as four steps
   rather than one long list. The badge is the only place the colour appears
   at full strength, which keeps it decoration and not a signal. */
.finder__step:nth-of-type(1) .finder__num { background: var(--navy); }
.finder__step:nth-of-type(2) .finder__num { background: var(--teal-ink); }
.finder__step:nth-of-type(3) .finder__num { background: #b8860f; }
.finder__step:nth-of-type(4) .finder__num { background: var(--coral-dark); }

.finder__q {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
}

.finder__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    margin-top: 28px;
    padding-top: 24px;
}

.finder__hint {
    flex: 1 1 240px;
    margin: 0;
    font-size: 14px;
    color: var(--slate);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    position: relative;
    display: inline-flex;
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* A chip is a button, so it is shaped like one: centred label, a floor under
   its width so a two-letter option does not shrink to a dot, and room to
   breathe between the icon and the text. */
.chip span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 116px;
    /* Symmetric padding, so the label sits in the middle of the button. With
       the icon in the flow it pushed the text off centre, and chips with an
       icon read as misaligned next to chips without one. */
    padding: 6px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
        color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.chip span svg {
    position: absolute;
    left: 16px;
    top: 50%;
    translate: 0 -50%;
    width: 18px;
    height: 18px;
    color: var(--teal-ink);
    transition: color .15s ease, transform .15s ease;
}

.chip:hover span {
    border-color: var(--teal);
    background: #e6f7fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 175, 203, .22);
}

.chip:hover span svg { transform: scale(1.12); }

/* White on the bright teal is 2.6:1, which is below AA. The darker teal in
   the gradient carries the text instead and clears 4.5:1 across the fill. */
.chip input:checked + span {
    background: linear-gradient(135deg, var(--navy) 0%, var(--teal-ink) 100%);
    border-color: var(--navy);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10, 29, 58, .26);
}

.chip input:checked + span svg { color: var(--gold); }

.chip input:checked:hover + span,
.chip:hover input:checked + span {
    transform: translateY(-2px);
}

.chip input:focus-visible + span {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .chip span,
    .chip span svg,
    .related--cards a,
    .related__media img {
        transition: none;
    }
    .chip:hover span,
    .chip input:checked + span { transform: none; }
}

.finder__status {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--slate);
    margin: 0 0 16px;
}

.finder-results .pick[hidden] { display: none; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, .88);
    padding-block: 48px 28px;
    margin-top: 56px;
    font-size: 15px;
}

.site-footer__brand {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.site-footer__tagline {
    color: rgba(255, 255, 255, .78);
    margin: 14px 0 0;
    font-size: 17px;
    max-width: 46ch;
}

.site-footer h2 {
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.site-footer ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.site-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.site-footer a:hover { color: var(--teal); text-decoration: underline; }

.site-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.site-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
}

.site-footer__legal p { margin: 0 0 8px; }
.site-footer__legal p:last-child { margin: 0; }

/* --- 404 ---------------------------------------------------------------- */

.error-page { padding-block: 56px; text-align: left; }

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 48rem) {
    body { font-size: 18px; }

    h1 { font-size: 44px; }
    h2 { font-size: 34px; }
    h3 { font-size: 26px; }
    h4 { font-size: 21px; }

    .lead { font-size: 21px; }

    .container { width: min(100% - 48px, var(--standard)); }

    .section { padding-block: 64px; }
    .section--compact { padding-block: 40px; }

    .hero { min-height: 500px; }
    .hero h1 { font-size: 48px; }
    .hero__inner { padding-block: 56px 60px; }
    .hero__lead { font-size: 21px; }

    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .related { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

    .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }

    /* Photo beside the text once there is room for both. */
    .pick { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
    .pick:not(:has(.pick__media)) { display: block; }
    .pick__media { height: 100%; }
    .pick__media img { height: 100%; min-height: 220px; aspect-ratio: auto; }
    .pick__body { padding: 26px 28px; }

    .verdict { padding: 24px 28px; }

    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 64rem) {
    h1 { font-size: 44px; }

    .hero { min-height: 560px; }
    .hero h1 { font-size: 52px; line-height: 1.08; }

    .hero::before {
        background: linear-gradient(90deg,
            rgba(10, 29, 58, .88) 0%,
            rgba(10, 29, 58, .65) 36%,
            rgba(10, 29, 58, .10) 72%,
            rgba(10, 29, 58, 0) 100%);
    }

    .hero__inner { padding-block: 72px 76px; min-height: 340px; }

    .nav-toggle { display: none; }

    .site-header__bar { min-height: 76px; gap: 24px; }

    .logo__text { font-size: 20px; }

    .site-nav {
        display: block;
        margin-left: auto;
        padding-bottom: 0;
    }

    .site-nav > ul {
        display: flex;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__group { position: relative; border-top: 0 !important; }

    .site-nav__group > a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 15px;
        color: var(--navy);
        text-decoration: none;
        white-space: nowrap;
    }

    .site-nav__group > a:hover,
    .site-nav__group:focus-within > a { background: var(--sky); color: var(--teal-ink); }

    .site-nav__title { display: none; }

    .site-nav__group .site-nav__list {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 268px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-elevated);
        padding: 8px;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s;
        z-index: 40;
    }

    .site-nav__group:hover .site-nav__list,
    .site-nav__group:focus-within .site-nav__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-header .header-cta {
        display: inline-flex;
        min-height: 44px;
        font-size: 14px;
        padding: 6px 20px;
        flex: 0 0 auto;
    }

    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .related { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

    .section { padding-block: 72px; }
    .section--compact { padding-block: 44px; }

    .pick { grid-template-columns: 300px minmax(0, 1fr); }

    .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; }

    .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 48px;
        align-items: start;
    }
}

@media (min-width: 80rem) {
    .section--landing { padding-block: 96px; }
}