:root {
    --white: #ffffff;
    --black: #000000;
    --gold: #b08a52;
    --text: #29343a;
    --background-light: #eeede6;
    --background-dark: var(--black);
    --dark-teal: #00574d;

    /* Spacing scale - drives the vertical rhythm between and within sections.
       Redefined at the mobile breakpoint below so every rule using these
       auto-adjusts instead of needing its own mobile override. */
    --space-sm: 24px;
    --space-md: 32px;
    --space-lg: 48px;
    --space-xl: 64px;
    --space-2xl: 80px;
    --space-3xl: 100px;
}

@media (max-width: 800px) {
    :root {
        --space-sm: 18px;
        --space-md: 24px;
        --space-lg: 32px;
        --space-xl: 44px;
        --space-2xl: 56px;
        --space-3xl: 64px;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 200px;

    /* The off-canvas mobile menu parks itself just past the right edge, and
       several mobile browsers let that pan the whole page sideways - content
       shunted left, the hero's background image ending in bare cream. `clip`
       stops it without turning the root into a scroll container (which would
       break the smooth anchor scrolling above); `hidden` is the fallback for
       engines that don't know `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

body, html {
    background: var(--background-light);
    color: var(--dark-teal);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3 {
    font-family: "Fraunces", serif;
    font-weight: normal;
}

a {
    color: inherit;
}


/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #00574d80;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--background-light);

  transition: 
  background 0.4s ease;
  border-color 0.3s ease;
  color 0.3s ease;
}

/* Top row (logo + CTA) */
.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 15px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-left{ display: flex; align-items: center; gap: 20px;}
.contact-link { font-size:15px; letter-spacing: 2px; text-decoration: none; color: rgb(255, 255, 255); text-transform: uppercase; }
.nav-logo img { height: 35px; transition: opacity 0.3s ease; }
.nav-right { display: flex; justify-content: flex-end; gap: 20px; font-size: 18px; }

.category-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0 0 15px 0;
}

.category-nav a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

.category-nav-contact {
    display: none;
}

/* Mobile menu toggle (hidden on desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.menu-bar {
    display: block;
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-overlay {
    display: none;
}

/* Mobile Navigation */
@media (max-width: 800px) {
    .header-top {
        padding: 15px 20px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-right {
        display: none;
    }

    .category-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(75vw, 320px);
        background: var(--dark-teal);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 36px;
        padding: 0;
        transform: translateX(100%);
        /* Hidden rather than merely shoved off-screen, so its links are not
           tabbable and cannot contribute to the page's horizontal scroll. */
        visibility: hidden;
        transition: transform 0.35s ease, visibility 0.35s ease;
        z-index: 1050;
    }

    .category-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .category-nav a {
        font-size: 16px;
    }

    .category-nav-contact {
        display: block;
        margin-top: 20px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 1040;
    }

    .nav-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* ------------------------------
   Hero
------------------------------ */
.hero {
    /* The height lives in a variable because the fade overlay below has to do
       arithmetic with it. Override the variable, not min-height. */
    --hero-height: 100vh;

    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: var(--hero-height);
    width: 100%;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* The hero photo carries its own alpha falloff down its bottom quarter, so it
   melts into the page rather than ending on a line. `cover` scales that
   1920x1080 image to the element's width, though, and crops the leftover
   height equally off the top and bottom - so any window wider than 16:9 (which
   is most of them, once browser chrome has eaten into the height) slices the
   tail off the falloff and leaves a hard edge against the cream.

   This puts back exactly the slice that was cropped. The height IS the crop
   calculation, so it comes out at 0 on a 16:9 window and goes negative - and
   so clamps to nothing - on anything taller, which is every portrait phone.
   Nothing about the image's own position or scaling is touched. */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(0px, calc((100vw * 1080 / 1920 - var(--hero-height)) / 2));
    background: linear-gradient(to bottom, transparent, var(--background-light));
    pointer-events: none;
}

.hero-content {
    max-width: 1200px;
    padding: 20px;
    z-index: 2;
}

.hero h1 {
    font-size: clamp(1.5rem, 8vw, 2rem);
    margin: 0 0 1rem;
    color: white;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.hero p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: white;
}

/* Added for the logo image specifically */
.hero-logo {
    display: block;
    margin: 0 auto 1.2rem;
    width: 750px;
    max-width: 90%;
    height: auto; 
}

.button {
    display: inline-block;
    background-color: var(--dark-teal);
    color: #ffffff;
    padding: 14px 32px;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    text-decoration: none;
    margin: 5px;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #1a4d4b;
    transform: translateY(-2px);
}

.button:focus {
    outline: 3px solid var(--dark-teal);
    outline-offset: 3px;
}

/* POST HERO*/
.heading-wrapper {
    display: inline-block; /* Keeps the container tight to the text width */
    position: relative;     /* Provides coordinates for the absolute underline */
    padding-bottom: 15px;   /* Space for the bar so it doesn't touch the letters */
    max-width: 90%;           /* Prevents the bar from hitting screen edges */
    margin: 0 auto;           /* Centers the wrapper on the page */
    padding-left: 15px;       /* Adds a "buffer" on the left side */
    padding-right: 15px;      /* Adds a "buffer" on the right side */
}

.post-hero {
    display: flex;           /* Ensures the wrapper centers horizontally */
    justify-content: center;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-md);
}

.scroll-text {
    font-size: 3.5rem;
    font-weight: 600;
    margin: 0;               /* Remove default margins to prevent layout shifts */
    text-align: center;
    line-height: 1.2;
}

.underline-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--dark-teal);
    width: 0%;
    /* This makes the growth feel fluid rather than "stuttery" */
    transition: width 0.15s ease-out; 
}

/* Mobile Adjustment */
@media (max-width: 700px) {
    .scroll-text {
        font-size: 2rem;     /* Scale down for mobile screens */
    }
}

/* ------------------------------
   ABOUT
------------------------------ */
.about {
    padding: 0rem;
    margin-left: 20%;
    margin-right: 20%;
    opacity: 0.0;
}

.about p {
    font-size: 1.3rem;
    text-align: center;
    margin-top: 0;
}

@media (max-width: 800px) {
    .about {
        margin: 2%;
    }
}

/* FEATURES / AMENETIES */
.features {
    display: flex;
    margin-top: 100px;
    margin-right: 20%;
    margin-left: 20%;
}

/* Feature Section Layout */
.feature-container {
    display: grid;
    grid-template-columns: 0.5fr 1fr; /* Split in two */
    gap: 60px;
    max-width: 1200px;
    margin: var(--space-2xl) auto 0;
    padding: 15px 15px;
    align-items: center;
    background-color: var(--background-light);
    color: var(--white);
}

/* Left Side List Styling */
.feature-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    padding: 20px 0;
    border-bottom: 2.5px solid var(--dark-teal);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    color: var(--dark-teal);
    opacity: 0.7;
    font-size: 1.3rem;
}

.feature-item:hover {
    color: var(--dark-teal);
    opacity: 1.0;
}

.feature-item.active {
    color: var(--dark-teal);
    font-weight: bold;
    opacity: 1.0;
}

.feature-icon {
    font-size: 1.5rem;
    max-height: 45px;
}

/* Right Side Display Styling */
.feature-nav,
.feature-display {
    /* Without this, a grid item won't shrink below its content's natural
       width - the icon bar's unwrapped row would blow out the grid track
       (and the whole page's viewport) on narrow screens. */
    min-width: 0;
}

.feature-display {
    text-align: center;
    justify-content: center;
}

#feature-image {
    width: 100%;
    max-height: 500px; /* Fixed height as requested */
    object-fit: cover; /* Prevents image stretching */
    border-radius: 10px;
    box-shadow: 0 10px 30px #00574d20;
    transition: opacity 0.3s ease;
}

.feature-text {
    font-size: 1.8rem;
    color: var(--dark-teal);
    font-family: "Fraunces";
    font-weight: 500;
}

#feature-description {
    transition: opacity 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 800px) {
    .feature-container {
        grid-template-columns: 1fr; /* Stack on top of each other */
        gap: 25px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .feature-nav {
        order: 2; /* Put the icon bar below the image on mobile */
    }

    .feature-display {
        order: 1;
    }

    /* Collapse the vertical list into a single horizontal icon bar. It has to
       fit whatever width the phone gives us: an overflowing scroller silently
       clipped the first and last amenity, which read as missing rather than as
       something to swipe. So the circles share the row and shrink to suit. */
    .feature-nav ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(8px, 2.5vw, 14px);
        padding: 4px 0 10px;
    }

    .feature-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        max-width: 56px;
        width: auto;
        height: auto;
        aspect-ratio: 1;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        gap: 0;
        border-bottom: none;
        border-radius: 50%;
        background: rgba(0, 87, 77, 0.08);
    }

    .feature-item.active {
        background: var(--dark-teal);
    }

    .feature-item.active .feature-icon {
        filter: brightness(0) invert(1);
    }

    /* Sized as a share of the circle so the icon shrinks with it. */
    .feature-icon {
        width: 48%;
        height: auto;
        max-height: 26px;
    }

    /* Name label is redundant once the bar is icon-only; still read by screen readers */
    .feature-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.time-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 60%;
  /* Auto margins, not justify-self: the latter only centres a block-level box
     on the newest engines, so on most phones this sat flush against the left
     edge with the whole right half of the screen empty. */
  margin: var(--space-2xl) auto 0;
}

.time-divider::before,
.time-divider::after {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--dark-teal);
}

/* Each block (3PM + Check In stacked) */
.time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

/* Typography control */
.time {
  font-weight: 600;
  font-size: 1.4rem;
}

.label {
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.time-note {
  margin-top: var(--space-sm);
  font-size: 1.0rem;
  color: #00574daa;
  max-width: 800px;
  /* Matches the side padding of the sections these notes sit under, so the
     text never runs edge to edge on a phone. */
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* On a phone 60% is narrower than the two time blocks need, which squeezes
   the flanking rules out of existence. Give the row the width instead. */
@media (max-width: 800px) {
  .time-divider {
    width: 90%;
    gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  .time-divider {
    gap: 1rem;
  }
}

/* On the narrowest phones the two time blocks alone fill the row and squeeze
   the flanking rules down to stubs. A small step back in the type gives them
   room to read as rules again. */
@media (max-width: 400px) {
  .time {
    font-size: 1.2rem;
  }

  .label {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
}

.time-note-fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 3.0s ease, transform 3.0s ease;
}

.time-note-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ROOMS SECTION */

.rooms-header {
    text-align: center;
    max-width: 800px;
    margin: var(--space-3xl) auto var(--space-lg);
    padding: 0 20px;
    font-size: 1.3rem;
}

.rooms-header h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 0;
}

/* The Grid System */
.room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto var(--space-md);
    padding: 0 20px;
}

.room-card {
    display: flex;
    flex-direction: column;
}

/* The image doubles as the button that opens the room overlay, so the button
   itself is stripped back to behaving like the plain <img> it replaced. */
.room-card-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    -webkit-tap-highlight-color: transparent;
}

.room-card-trigger:focus-visible {
    outline: 3px solid var(--dark-teal);
    outline-offset: 3px;
}

.room-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1150 / 500;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.room-card-trigger:hover img,
.room-card-trigger:focus-visible img {
    transform: scale(1.04);
}

/* Photo-count badge. Always visible on touch screens (see the media query at
   the end of this block) so the card reads as tappable without a hover state. */
.room-card-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(0, 23, 20, 0.72);
    color: var(--white);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.room-card-trigger:hover .room-card-hint,
.room-card-trigger:focus-visible .room-card-hint {
    opacity: 1;
    transform: translateY(0);
}

.room-content {
    padding: 15px 0;
    text-align: center;
}

.room-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 500;
}

.room-content p {
    font-size: 1.3rem;
    margin: 0;
    color: var(--dark-teal);
}

/* Mobile Responsiveness */
@media (max-width: 800px) {
    .room-grid {
        grid-template-columns: 1fr;       /* Stacks into 1 column on mobile */
        gap: 30px;
    }
}

/* Without hover there is nothing to reveal the badge, so pin it open. */
@media (hover: none) {
    .room-card-hint {
        opacity: 1;
        transform: translateY(0);
    }
}


/* EVENTS PAGE */

.events {
    max-width: 800px;
    text-align: center;
    margin: var(--space-3xl) auto 0;
}

.events h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 0;
}

.events p {
    text-align: center;
    font-size: 1.3rem;
}

/* EVENT SPACES SECTION */

.event-spaces-section {
    padding: var(--space-2xl) 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Centred on the container, the way .rooms-header and .location are. The
   heading used to lean on justify-self, which most engines ignore on a
   block-level box - it landed hard left on every phone we tested. */
.section-header {
    text-align: center;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--dark-teal);
    margin-top: 0;
}

.section-header p {
    text-align: center;
    font-size: 1.3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Vertical list of rooms, instead of a horizontal scroller */
.event-spaces-grid-container {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin: 0 auto;
}

/* Each room is a centered stub, bounded by hairlines top and bottom */
.event-space-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: 3px solid rgba(21, 71, 68, 0.5);
    padding: 15px 0;
}

.event-space-card:first-child {
    border-top: 3px solid var(--dark-teal);
}

.event-space-card:last-child {
    border-bottom: 3px solid var(--dark-teal);
}

.event-space-card h3 {
    font-size: 2rem;
    font-family: "Fraunces";
    margin: 0 0 8px 0;
    color: var(--dark-teal);
    line-height: 1.15;
}

/* Capacity as a plain centered line, no pill */
.capacity-tag {
    display: block;
    background: none;
    color: var(--dark-teal);
    font-weight: 500;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0.2px;
    margin-bottom: 20px;
}

.event-space-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark-teal);
    max-width: 480px;
    margin: 0 0 20px 0;
}

/* Bullets styling — centered, marker inline rather than left-hung */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    font-size: 1.0rem;
    color: var(--dark-teal);
    margin-bottom: 8px;
}

.feature-list li::before {
    content: "– ";
    font-weight: 600;
}

/* ==========================================
   MOBILE RESPONSIVE BREAKPOINTS
   ========================================== */

@media (max-width: 768px) {
    .event-space-card {
        padding: 32px 0;
    }
}

/* No mobile shrink for the heading or the intro here: "Our Rooms", "Gallery"
   and "Explore Torquay" all stay at 3rem/1.3rem on a phone, and this section
   used to drop to 1.8rem/1rem, which read as a mistake beside them. */
@media (max-width: 480px) {
    .event-space-card {
        padding: 26px 0;
    }
}

/* Contact Us Button Wrapper - Ensures centering */
.contact-us-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Contact Us Button */
.contact-us-btn {
    display: inline-block;
    background-color: var(--dark-teal);
    color: #ffffff;
    padding: 14px 32px;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 40px;
    transition: all 0.3s ease;
}

.contact-us-btn:hover {
    background-color: #1a4d4b;
    transform: translateY(-2px);
}

.contact-us-btn:focus {
    outline: 3px solid var(--dark-teal);
    outline-offset: 3px;
}

/* Mobile optimization for button */
@media (max-width: 480px) {
    .contact-us-wrapper {
        margin-top: 20px;
    }
    
    .contact-us-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
        margin-top: 30px;
    }

    .button,
    .footer-cta .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}


/* LOCATION */

.location {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
    padding: var(--space-3xl) 20px 0;
}

.location h2 {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
}

.location h3 {
    margin-top: 12px;
    font-size: 2rem;
    font-weight: 500;
}

.location p {
    font-size: 1.3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.location-spaces-grid-container {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    overflow-x: auto; /* Enables horizontal scroll on mobile */
    padding-bottom: 0px; /* Space for scrollbar and iOS address bar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: var(--dark-teal) #f5f5f5;
}

.location-spaces-grid-container::-webkit-scrollbar {
    height: 8px;
}

.location-spaces-grid-container::-webkit-scrollbar-thumb {
    background-color: var(--dark-teal);
    border-radius: 10px;
}

.location-spaces-grid-container::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Individual Location Card Styling */
.location-card {
    min-width: 280px; /* Ensures cards don't get too squished on mobile */
    max-width: 380px; /* Limits width on desktop for consistency */
    flex-shrink: 0; /* Prevents cards from shrinking too much */
}

/* Image Styling - Fixed Aspect Ratio */
.location-card img {
    width: 100%;
    height: 50%;
    object-fit: cover; /* Ensures images fill space without stretching */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Content Under Image */
.location-content {
    padding: 10px 10px;
}

.location-content h3 {
    font-size: 1.6rem;
    margin: 0 0 10px 0;
    color: var(--dark-teal);
    font-family: "Fraunces";
}

.location-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark-teal);
    margin: 0;
}

/* ==========================================
   MOBILE RESPONSIVE BREAKPOINTS
   ========================================== */

@media (max-width: 768px) {
    .location-spaces-grid-container {
        gap: 20px;
        padding-bottom: 25px;
    }
    
    .location-card {
        min-width: 240px;
        max-width: 360px;
    }
    
    .location-content h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) { /* Small mobile devices */
    .location-spaces-grid-container {
        gap: 15px;
        padding-bottom: 25px;
    }
    
    .location-card {
        min-width: 220px;
        max-width: 340px;
    }
    
    .location-content h3 {
        font-size: 1.3rem;
    }
    
    .location-content p {
        font-size: 0.9rem;
    }
}

/* Prevent text selection inside scroll area */
.location-spaces-grid-container * {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard */
}


/* ------------------------------
   GALLERY
------------------------------ */

.gallery {
    padding: var(--space-3xl) 20px var(--space-3xl);
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
}

.gallery-header h2 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--dark-teal);
    margin-top: 0;
    margin-bottom: 12px;
}

.gallery-header h3 {
    margin-top: 12px;
    font-size: 2rem;
    font-weight: 500;
}

.gallery-header p {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 40px;
}

/* The Horizontal Scroll Gallery Grid (2 rows tall, N columns wide) */
.gallery-grid-container {
    display: grid;
    grid-template-rows: repeat(2, 200px);
    grid-auto-flow: column;
    grid-auto-columns: 380px;
    gap: 24px;
    overflow-x: auto; /* Enables horizontal scroll on mobile */
    overflow-y: hidden;
    padding-bottom: 30px; /* Space for scrollbar and iOS address bar */
    scroll-behavior: smooth;

    /* Critical for iOS touch scrolling */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbar visually but keep functionality */
.gallery-grid-container::-webkit-scrollbar {
    height: 8px;
}

.gallery-grid-container::-webkit-scrollbar-thumb {
    background-color: var(--dark-teal);
    border-radius: 10px;
}

.gallery-grid-container::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Prevent text selection inside scroll area */
.gallery-grid-container * {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard */
}

/* Individual Gallery Item Styling */
.gallery-item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Image inside gallery item */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill space without stretching */
    display: block;
}

/* Gallery Item Hover Effect */
.gallery-item:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Caption styling (optional) */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: rgba(39, 80, 71, 0.85); /* Dark teal with opacity */
    color: white;
    font-size: 0.9rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* Show caption on hover */
.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* ==========================================
   LIGHTBOX (MODAL) STYLES
   ========================================== */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #001714e4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: var(--dark-teal);
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-lightbox:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .gallery-grid-container {
        grid-template-rows: repeat(2, 180px);
        grid-auto-columns: 290px;
        gap: 15px;
        padding-bottom: 25px;
    }
}

@media (max-width: 480px) { /* Small mobile devices */
    .gallery-grid-container {
        grid-template-rows: repeat(2, 160px);
        grid-auto-columns: 270px;
        gap: 12px;
        padding-bottom: 25px;
    }
}

/* No images fallback styling */
.no-images-message {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 1.1rem;
}

/* Lightbox Navigation Buttons */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--dark-teal);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
    z-index: 100;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Hide arrows on very small screens */
@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}



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

.footer {
    background-color: var(--dark-teal);
    color: #ffffff;
    padding: var(--space-3xl) 20px 40px;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* CTA Section */
.footer-cta h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center; /* Center heading */
    width: 100%;
    display: block;
}

.footer-cta p {
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: center; /* Center text */
    display: block;
}

/* Button wrapper for perfect centering */
.footer-cta .btn {
    display: inline-block;
    background-color: #ffffff;
    color: var(--dark-teal);
    padding: 14px 32px;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    text-decoration: none;
    margin-left: auto; /* Push to center */
    margin-right: auto; /* Push to center */
    transition: all 0.3s ease;
    text-align: center;
}

.footer-cta .btn:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
}

.footer-cta .btn:focus {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Contact Section - Grid Layout */
.footer-contact {
    padding: 40px 0;
}

.grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: left;
}

/* Column Headings */
.footer-column h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
}

/* Address Column */
.footer-column address {
    font-style: normal;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

/* Email Link */
.footer-column address a {
    color: #ffffff;
    text-decoration: none;
}

/* Contact Info Column */
.contact-info {
    margin-top: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.contact-item .icon {
    font-size: 1.2rem;
}

.contact-item a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-item a:hover {
    color: #f1f1f1;
}

/* Social Media Column - icon badge + label per network */
.social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Inherits the link colour, so hover states carry through */
    display: block;
}

.social-label {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.social-links a:hover .social-icon {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.social-links a:hover .social-label {
    color: #f1f1f1;
}

.social-links a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Copyright Section - LEFT and RIGHT alignment */
.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
    display: flex; /* Use flexbox for left/right alignment */
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-copyright p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0; /* Reset margin */
}

/* First line: Copyright (left) */
.footer-copyright .copyright-text {
    flex: 1;
    text-align: left;
}

/* Second line: Designer credit (right) */
.footer-copyright .designer-credit {
    flex: 1;
    text-align: right;
}

.footer-copyright a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* Narrow screens: two side-by-side columns squeeze both credits into
   awkward ragged blocks, so stack them into centred full-width lines. */
@media (max-width: 700px) {
    .footer-copyright {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-copyright .copyright-text,
    .footer-copyright .designer-credit {
        flex: none;
        text-align: center;
    }
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .footer-cta h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .grid-3-cols {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-cta h2 {
        font-size: 2rem;
    }
    
    .footer-cta p {
        font-size: 1.1rem;
    }
}

/* Footer background override for main theme */
@media (max-width: 480px) {
    .footer-cta h2 {
        font-size: 1.8rem;
    }
}


/* ------------------------------
   Mobile
------------------------------ */

@media (max-width: 800px) {

    .hero {
        --hero-height: 65vh;
    }

    .amenity-grid {
        grid-template-columns: 1fr 1fr;
    }
    
}





/* ------------------------------
   ROOM DETAIL OVERLAY
------------------------------ */

/* This stylesheet has no global box-sizing reset, so scope one to the overlay -
   its explicit heights and flex bases assume padding sits inside the box. */
.room-modal,
.room-modal *,
.room-modal *::before,
.room-modal *::after {
    box-sizing: border-box;
}

.room-modal {
    position: fixed;
    inset: 0;
    /* dvh keeps the sheet inside the visible area on mobile browsers whose
       address bar collapses; vh is the fallback for older engines. */
    height: 100vh;
    height: 100dvh;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.room-modal[hidden] {
    display: none;
}

.room-modal.is-open {
    opacity: 1;
}

.room-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: #001714e4;
}

.room-modal-card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1080px;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    background: var(--background-light);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s ease;
}

.room-modal.is-open .room-modal-card {
    transform: translateY(0) scale(1);
}

/* --- Close button --- */

.room-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--dark-teal);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.room-modal-close:hover {
    background-color: var(--white);
    transform: scale(1.08);
}

.room-modal-close:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* --- Carousel --- */

.room-modal-media {
    position: relative;
    flex: 1 1 58%;
    min-width: 0;
    background: #00110f;
}

.room-modal-viewport {
    height: 100%;
    overflow: hidden;
    /* Let vertical swipes scroll the page/panel while horizontal ones drag. */
    touch-action: pan-y;
}

.room-modal-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.room-modal-track.is-animating {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.room-modal-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.room-modal-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.room-modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.82);
    color: var(--dark-teal);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.room-modal-arrow:hover {
    background-color: var(--white);
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.room-modal-arrow:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

.room-modal-arrow--prev {
    left: 16px;
}

.room-modal-arrow--next {
    right: 16px;
}

/* A single-image room gets no arrows, counter or dots. */
.room-modal.is-single .room-modal-arrow,
.room-modal.is-single .room-modal-counter,
.room-modal.is-single .room-modal-dots {
    display: none;
}

.room-modal-counter {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 23, 20, 0.6);
    color: var(--white);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

.room-modal-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    max-width: 70%;
    flex-wrap: wrap;
    justify-content: center;
}

.room-modal-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    /* Keeps the dots readable over pale images. */
    box-shadow: 0 0 0 1px rgba(0, 23, 20, 0.35);
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.room-modal-dot.is-active {
    background: var(--white);
    transform: scale(1.25);
}

.room-modal-dot:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

/* --- Text panel --- */

.room-modal-body {
    flex: 1 1 42%;
    min-width: 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--dark-teal);
}

.room-modal-body h3 {
    margin: 0 0 var(--space-sm);
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(0, 87, 77, 0.25);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.15;
}

/* Captions are per-image, so they are shown only when the room has at least
   one - and then the line is always reserved, otherwise the panel would jump
   as you move between a captioned and an uncaptioned photo. */
.room-modal-caption {
    display: none;
}

.room-modal.is-captioned .room-modal-body h3 {
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
}

.room-modal.is-captioned .room-modal-caption {
    display: block;
    min-height: 1.4em;
    margin: 0 0 var(--space-sm);
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(0, 87, 77, 0.25);
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.75;
}

.room-modal-desc p {
    margin: 0 0 1em;
    font-size: 1.1rem;
    line-height: 1.6;
}

.room-modal-desc p:last-child {
    margin-bottom: 0;
}

.room-modal-features {
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

.room-modal-features li {
    position: relative;
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1.4;
}

.room-modal-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}

.room-modal-features li p {
    margin: 0;
}

/* Screen-reader-only announcement of the current slide. */
.room-modal-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Mobile: full-height sheet, image on top, text scrolls beneath --- */

@media (max-width: 800px) {
    .room-modal {
        padding: 0;
        align-items: flex-end;
    }

    .room-modal-card {
        flex-direction: column;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: translateY(28px);
    }

    .room-modal-media {
        flex: 0 0 auto;
        /* Cap the image so there is always text visible under it on landscape
           phones, where 56vh of photo would fill the whole screen. */
        height: min(46vh, 300px);
    }

    .room-modal-arrow {
        width: 44px;
        height: 44px;
    }

    .room-modal-arrow--prev {
        left: 10px;
    }

    .room-modal-arrow--next {
        right: 10px;
    }

    .room-modal-body {
        flex: 1 1 auto;
        padding: var(--space-md) 22px calc(var(--space-lg) + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .room-modal-body h3 {
        font-size: 1.7rem;
    }

    .room-modal-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .room-modal-features {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .room-modal,
    .room-modal-card,
    .room-modal-track.is-animating,
    .room-card img {
        transition: none;
    }
}



/* ==========================================
   GUEST GUIDE PAGE (/guest-guide/)
   Reached by QR code in the rooms, so it is built mobile-first: a single
   readable column that widens gently on desktop.
   ========================================== */

/* Banner - a solid teal block so the translucent fixed header has something
   dark to sit against, in place of the homepage's hero image. */
.guide-hero {
    background-color: var(--dark-teal);
    color: var(--white);
    text-align: center;
    padding: 180px 20px var(--space-2xl);
}

.guide-hero-logo {
    width: 300px;
    max-width: 80%;
    height: auto;
    margin-bottom: var(--space-lg);
}

.guide-eyebrow {
    margin: 0 0 8px;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.guide-hero-heading {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: var(--white);
}

.guide-hero-sub {
    margin: 12px 0 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Welcome message. Typography sits on the container, not on `p`, because
   markdownify returns bare text for single-paragraph copy. */
.guide-welcome {
    max-width: 720px;
    margin: var(--space-2xl) auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.6;
}

.guide-welcome p {
    margin: 0 0 1rem;
}

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

/* Check in / check out - reuses .time-divider from the homepage, minus the
   scroll-triggered fade, since this page is short enough to be seen at once. */
.guide-times {
    width: min(720px, 90%);
    margin-left: auto;
    margin-right: auto;
}

.guide-time-note {
    margin-bottom: 0;
}

/* Information cards - hairline-separated stubs, echoing the event spaces list
   on the homepage. */
.guide-items {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin: var(--space-2xl) auto 0;
    padding: 0 20px;
}

.guide-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: 3px solid rgba(21, 71, 68, 0.5);
    padding: var(--space-md) 0;
}

.guide-card:first-child {
    border-top: 3px solid var(--dark-teal);
}

.guide-card:last-child {
    border-bottom: 3px solid var(--dark-teal);
}

.guide-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
}

.guide-card h2 {
    font-size: 2rem;
    font-family: "Fraunces", serif;
    margin: 0 0 8px;
    color: var(--dark-teal);
    line-height: 1.15;
}

/* The at-a-glance line: times or price, the thing a guest scans for. Set in
   teal rather than gold, which is too low-contrast on the cream background. */
.guide-card-meta {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-teal);
}

.guide-card-body {
    max-width: 480px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark-teal);
}

.guide-card-body p {
    margin: 0 0 12px;
}

.guide-card-body p:last-child {
    margin-bottom: 0;
}

.guide-card-body strong {
    font-weight: 700;
}

/* Explore Torquay + map link */
.guide-explore {
    max-width: 720px;
    margin: var(--space-3xl) auto 0;
    padding: 0 20px;
    text-align: center;
}

.guide-explore h2 {
    font-size: 3rem;
    font-weight: 600;
    color: var(--dark-teal);
    margin: 0 0 16px;
}

.guide-explore p {
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0;
}

/* Reception contact block */
.guide-help {
    max-width: 720px;
    margin: var(--space-2xl) auto;
    padding: 0 20px;
    text-align: center;
}

.guide-help h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dark-teal);
    margin: 0 0 12px;
}

.guide-help p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 0 var(--space-sm);
}

.guide-help-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
}

.guide-help-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    /* reception@abbeysandshotel.co.uk has nowhere to break, so on the
       narrowest phones it pushed the whole page wider than the screen. */
    overflow-wrap: anywhere;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--dark-teal);
    border-bottom: 1px solid rgba(0, 87, 77, 0.35);
    padding-bottom: 2px;
    transition: border-color 0.3s ease;
}

.guide-help-link:hover {
    border-bottom-color: var(--dark-teal);
}

.guide-help-link .icon {
    font-size: 1.2rem;
}

@media (max-width: 800px) {
    .guide-hero {
        padding-top: 150px;
    }

    .guide-hero-logo {
        width: 220px;
    }

    .guide-hero-heading {
        font-size: 2.5rem;
    }

    .guide-welcome {
        font-size: 1.1rem;
    }

    .guide-explore h2 {
        font-size: 2rem;
    }

    .guide-explore p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .guide-hero-heading {
        font-size: 2.1rem;
    }

    .guide-hero-sub {
        font-size: 1rem;
    }

    .guide-card h2 {
        font-size: 1.7rem;
    }

    .guide-card-meta {
        font-size: 0.85rem;
    }

    .guide-help-links {
        flex-direction: column;
        align-items: center;
    }
}

/*
* {
  outline: 1px solid red;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: red;
  z-index: 9999;
  pointer-events: none;
}
*/


/* ------------------------------
   FOOTER CTA BUTTON PAIR
------------------------------ */

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}

/* The single-button rule above centres itself with auto margins; inside a flex
   row those would push the pair apart, so the row does the centring instead.
   border-box is scoped here because this stylesheet has no global reset - the
   padding and border have to sit inside the width the stacked layout sets. */
.footer-cta-actions .btn {
    box-sizing: border-box;
    margin: 0;
    /* Both labels are short, so a shared floor makes the pair equal width
       rather than sizing each one to its own text. */
    min-width: 220px;
}

/* "Book Now" is a <button>, which inherits none of the page's type by default. */
.footer-cta .btn {
    font-family: inherit;
    border: 2px solid #ffffff;
    cursor: pointer;
}

/* The secondary action reads as an outline against the teal footer. */
.footer-cta .btn--ghost {
    background-color: transparent;
    color: #ffffff;
}

.footer-cta .btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.14);
}


/* ------------------------------
   BOOKING POPUP
------------------------------ */

/* No global box-sizing reset in this stylesheet, so scope one to the popup. */
.booking-modal,
.booking-modal *,
.booking-modal *::before,
.booking-modal *::after {
    box-sizing: border-box;
}

.booking-modal {
    position: fixed;
    inset: 0;
    /* dvh keeps the card inside the visible area on mobile browsers whose
       address bar collapses; vh is the fallback for older engines. */
    height: 100vh;
    height: 100dvh;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.booking-modal[hidden] {
    display: none;
}

.booking-modal.is-open {
    opacity: 1;
}

.booking-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: #001714e4;
}

.booking-modal-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: var(--background-light);
    color: var(--dark-teal);
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s ease;
}

.booking-modal.is-open .booking-modal-card {
    transform: translateY(0) scale(1);
}

.booking-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 87, 77, 0.08);
    color: var(--dark-teal);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.booking-modal-close:hover {
    background-color: rgba(0, 87, 77, 0.18);
    transform: scale(1.08);
}

.booking-modal-close:focus-visible {
    outline: 3px solid var(--dark-teal);
    outline-offset: 2px;
}

.booking-modal-card h3 {
    margin: 0 0 12px;
    padding-right: 48px;   /* clear of the close button */
    font-size: 2.1rem;
    font-weight: 500;
}

.booking-modal-intro {
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(0, 87, 77, 0.8);
}

.booking-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.booking-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid rgba(0, 87, 77, 0.18);
    border-radius: 5px;
    text-decoration: none;
    color: var(--dark-teal);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.booking-option:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 23, 20, 0.12);
}

.booking-option:focus-visible {
    outline: 3px solid var(--dark-teal);
    outline-offset: 2px;
}

.booking-option-text {
    flex: 1 1 auto;
    min-width: 0;
}

.booking-option-name {
    display: block;
    font-family: "Fraunces", serif;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.booking-option-desc {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(0, 87, 77, 0.75);
}

.booking-option-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    transition: transform 0.25s ease;
}

.booking-option:hover .booking-option-arrow {
    transform: translate(2px, -2px);
}

.booking-modal-note {
    margin: var(--space-sm) 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    color: rgba(0, 87, 77, 0.8);
}

.booking-modal-note a {
    color: var(--dark-teal);
    text-decoration: underline;
}

/* Screen-reader-only text (the "opens in a new tab" hint). */
.booking-modal-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .booking-modal,
    .booking-modal-card,
    .booking-option,
    .booking-option-arrow {
        transition: none;
    }
}

/* Below this the equal-width pair no longer fits side by side, so stack it.
   Matches the 600px breakpoint the rest of the footer already uses. */
@media (max-width: 600px) {
    .footer-cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-cta-actions .btn {
        width: 100%;
        /* Keeps the stack from stretching edge to edge on wider phones. */
        max-width: 360px;
    }
}

@media (max-width: 480px) {
    .booking-modal {
        padding: 20px 14px;
    }

    .booking-modal-card {
        padding: var(--space-md) 18px 18px;
    }

    .booking-modal-card h3 {
        font-size: 1.6rem;
    }

    .booking-option {
        padding: 16px;
        gap: 12px;
    }
}