@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
    --primary-color: #2c79b9;
    --primary-color-dark: #1f5f93;
    --secondary-color: #9f6f00;
    --secondary-color-soft: #f9e7b0;
    --secondary-color-soft-dark: #f2d48a;
    --pink-color: #333;
    --background-color: #f7fafc;
    --primary-font: 'Lora', serif;
    --secondary-font: 'Raleway', sans-serif;
    --tertiary-font: 'Montserrat', sans-serif;
    --picker-font: 'Poppins', sans-serif;
    --primary-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.288);
    --primary-margin-bottom: 60px;
    --status-available-bg: #e5f4ec;
    --status-available-color: #2f8f5b;
    --status-booked-bg: #fbe4e4;
    --status-booked-color: #c1554f;
    --status-provisional-bg: var(--secondary-color-soft);
    --status-provisional-color: var(--secondary-color);
    --status-mine-bg: #ece3f7;
    --status-mine-color: #6b3fa0;
}

body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: var(--tertiary-font);
    /* Sticky footer: every page includes templates/footer/footer.html's single shared
       .site-footer, so pushing THAT to the bottom via margin-top:auto (rather than growing each
       page's own differently-shaped main-content wrapper) works universally across every page
       type - public pages, the guest Manage Booking hub, staff, and Owner Suite alike - without
       needing a matching flex-grow rule added to each one individually. Confirmed with Thomas
       2026-08-30 as a genuine sitewide layout change, not scoped to one area. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================
   HEADINGS
   ========================= */

h1 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-family: var(--primary-font);
    font-size: 3.2em;
    font-weight: 400;
}

h2 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 10px;
    font-family: var(--secondary-font);
    font-size: 2em;
    font-weight: 400;
}

h3 {
    color: var(--secondary-color);
    font-family: var(--tertiary-font);
    font-size: 1.2em;
    font-weight: 400;
}

/* =========================
IMAGES
   ========================= */

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

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.icon {
    width: 50px;
    height: 50px;
}

/* =========================
   MAIN CONTAINER: BASE
   ========================= */
   
.container {
    width: 100%;
    height: 100vh;
    margin: 0 0 var(--primary-margin-bottom) 0;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* =========================
   MAIN CONTAINER: CENTER
   ========================= */

.container.center {
    max-width: 1200px;
    margin: 0 auto var(--primary-margin-bottom) auto;
    text-align: center;
}

/* =========================
    MAIN CONTAINER: TOP
    ========================= */

.container.top {
    justify-content: center;
    align-items: center;
}

/* =========================
   MAIN CONTAINER: TOP HERO CAROUSEL
   ========================= */

/* Never taller than the photos' own shape (2026-10-03, per Thomas): every photo is 3:2, and a
   full-height hero on a phone showed only a narrow vertical slice of each one. On a landscape
   desktop window the 100vh limit still wins, so nothing changes there. */
.container.top.hero {
    overflow: hidden;
    background-color: #000;
    margin-bottom: 0;
    height: min(100vh, calc(100vw * 2 / 3));
}

.container.top.hero .hero-carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.container.top.hero .hero-carousel-image.active {
    opacity: 1;
}

.container.top.hero .hero-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.container.top.hero .hero-carousel-control:hover {
    background: rgba(0, 0, 0, 0.55);
}

.container.top.hero .hero-carousel-control.prev {
    left: 20px;
}

.container.top.hero .hero-carousel-control.next {
    right: 20px;
}

@media (max-width: 768px) {
    .container.top.hero .hero-carousel-control {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .container.top.hero .hero-carousel-control.prev {
        left: 10px;
    }

    .container.top.hero .hero-carousel-control.next {
        right: 10px;
    }
}

/* =========================
   MAIN CONTAINER: FIFTY-FIFTY
   ========================= */
.container.fifty-fifty .left,
.container.fifty-fifty .right {
    width: 50%;
    height: 100%;
    box-shadow: var(--primary-box-shadow);
}

/* =========================
   MAIN CONTAINER: MOSAIC
   ========================= */

.container.mosaic {
    align-items: center;
    justify-content: center;
}

.container.mosaic .tile img {
    object-fit: cover;
    filter: brightness(0.7);
    opacity: 0.9;
    z-index: -1;
}

.container.mosaic .tile h1, 
.container.mosaic .tile h2, 
.container.mosaic .tile h3, 
.container.mosaic .tile p {
    position: absolute;
    color: white;
    z-index: 1;
    text-shadow: 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,0.5);
    text-decoration: solid;
}

.container.mosaic .tile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: inherit;
}

/* height: auto (overriding the base .container's fixed 100vh) lets this grid grow with however
   many locations exist, rather than clipping to exactly one viewport's worth - .tile below sizes
   itself directly off the viewport (50vh) rather than a percentage of this container's own height,
   which is what actually let the 2x2 grid this was built for silently break the moment a 5th
   location (Balaia Atlantico/Cerro Mar, added straight to the DB) needed a 3rd row: at a fixed
   100vh parent height, tile height:50% only ever carved out exactly two rows' worth of space, so
   the row after that overflowed the container and visually collided with the next section down
   the page (confirmed via screenshot, 2026-09-08).

   A fixed 2-per-row (width: 50%) had its own version of the same problem at a count that isn't a
   clean multiple of 2 (2026-09-11, per Thomas - 3 locations left the last tile alone, centred in
   a mostly-empty row rather than sitting flush with its neighbours). auto-fit here instead lets
   however many tiles exist share one row evenly whenever they fit (3 or 4 today), wrapping only
   once they genuinely can't - no longer tied to being an even number, so nothing needs revisiting
   the next time a location is added or removed. */
.container.mosaic.simple {
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.container.mosaic.simple .tile {
    height: 50vh;
    box-sizing: border-box;
    border: 2px solid white;
}

.container.mosaic.simple .tile:hover {
    filter: brightness(1.3);
    opacity: 1;
    transition: filter 0.3s ease;
    cursor: pointer;
}

.container.mosaic.simple .tile:hover h1,
.container.mosaic.simple .tile:hover h2,
.container.mosaic.simple .tile:hover h3,
.container.mosaic.simple .tile:hover p {
    display: none;
}

.container.mosaic.ornate {
    height: 50vh;
    justify-content: flex-start;
}

.container.mosaic.ornate .tile {
    box-shadow: none;
    box-sizing: border-box;
    border: 10px solid white;
}

.container.mosaic.ornate img {
    filter: brightness(0.65);
}

.container.mosaic.ornate .left {
    width: 33%;
    height: 100%;
    
}

.container.mosaic.ornate .left .tile {
    width: 100%;
    height: 100%;
}

.container.mosaic.ornate .left .tile img {
    display: flex;
    object-fit: cover;
}

.container.mosaic.ornate .right {
    display: flex;
    flex-direction: row;
    width: 67%;
    height: 100%;
    flex-wrap: wrap;
}

.container.mosaic.ornate .right .tile {
    width: 50%;
    height: 50%;
}

/* =========================
   MAIN CONTAINER: TEXT + IMAGE
   ========================= */
.container.text-image {
    height: 50vh;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 5px;
}

.container.text-image.odd {
    display: flex;
    flex-direction: row-reverse;
}

.container.text-image.even {
    display: flex;
}

.container.text-image .text {
    width: 42.5%;
}

.container.text-image .image {
    width: 52.5%;
}   

/* =========================
   MAIN CONTAINER: TEXT BOXES
   ========================= */

.container.text-boxes {
    justify-content: space-between;
    row-gap: 100px;
}

.container.text-boxes .text-box {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
}   

.container.text-boxes .text-box.wide {
    width: 43%;
}

.container.text-boxes .text-box-icon {
    text-align: center;
    width: 90px;
    height: 90px;
}

.container.text-boxes h2 {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding-top: 20px;
}

.container.text-boxes .text-box-content {
    padding: 20px;
    padding-bottom: 0;
    line-height: 1.5;
    text-align: center;
    font-size: 0.9em;
    color: rgb(80, 80, 80);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =========================
   MAIN CONTAINER: LISTS
   ========================= */

.container.lists {
    justify-content: center;
    align-items: flex-start;
}

.container.lists h1 {
    margin-bottom: 20px;
    top: 10%;
}

.container.lists .list {
    width: fit-content;
    height: fit-content;
    margin: 0px 20px;
    padding: 20px;
    top: 30%;
    position: relative;
}   

.container.lists .list h3 {
    text-align: center;
    margin-bottom: 20px;
}

.container.lists .list ul {
    padding-left: 20px;
}

.container.lists .list ul li {
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* =========================
   MAIN CONTAINER: CARDS
   ========================= */

.container.cards {
    align-items: center;
    justify-content: center;

}

.cards .card {
    max-width: 80%;
    width: 500px;
    background-color: rgb(255, 255, 255);
    box-shadow: var(--primary-box-shadow);
    overflow: hidden;
    text-align: left;
    margin: 20px;
}

.cards .card-content {
    padding: 0 20px;
}

.cards h3 {
    color: var(--secondary-color);
    font-size: 1.5em;
    font-weight: 600;
    margin: 10px 0;
}

.cards .card-description {
    font-size: .9em;
    margin: 10px 0;
}

.cards .card-address {
    font-size: 0.8em;
    color: rgb(100, 100, 100);
    margin: 10px 0;
}

.cards .card img {
    width: 100%;
    height: auto;
}

/* =========================
    MAIN CONTAINER: PICKERs
    ========================= */

.container.picker.visible {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--picker-font);
    color: var(--picker-color);
}

.container.picker[hidden] {
    display: none !important;
}

.container.picker input {
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-right: 1px solid #b1acac;
    padding: 10px;
    color: var(--primary-color, #2c79b9);
    width: 100px;
    height: 30px;
    text-align: center;
}

.container.picker input:focus,
.container.picker input:focus-visible {
    outline: none;
    box-shadow: none;
}

.container.picker.hidden {
    position: absolute;
    z-index: 100;
    margin-top: 2px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: fit-content;
    width: fit-content;
}

.container.picker.hidden button {
    cursor: pointer;
    border: none;
    border-radius: 3px;
    font-size: .8rem;
    font-weight: 500;
    background: transparent;
    text-transform: uppercase;
    transition: .3s;
}

.container.picker.hidden button:hover {
    background: rgba(119, 136, 153, 0.1);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.container.picker.hidden button:disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

/* Faded prev/next-month fill dates - unlike :disabled dates, these stay clickable so clicking
   one navigates the calendar to that month instead of doing nothing (or, before this rule
   existed, silently advancing the toolbar to the next field - see static/pickers/dates.js). */
.container.picker.hidden button.other-month {
    opacity: 0.5;
}

.container.picker.hidden button.other-month:hover {
    opacity: 0.8;
}

.container.picker.hidden .picker.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}

.container.picker.hidden .picker.header > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.container.picker.hidden select,
.container.picker.hidden input {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 4px 6px;
}

.container.picker.hidden .picker.header input.year {
    font-size: 0.9rem;
    width: 56px;
}

.container.picker.hidden select {
    min-width: 100px;
}

.container.picker.hidden input {
    max-width: 64px;
    width: 64px;
}

.container.picker.hidden button {
    color: slategray;
}

.container.picker.hidden button:hover {
    color: var(--primary-color, #2c79b9);
}

/* =========================
   RESPONSIVE: CONTAINER OVERRIDES
   ========================= */
@media (max-width: 768px) {
    .container.text-image .text {
        width: 100%;
        height: 50%;
    }

    .container.tiles {
        flex-direction: column;
        height: 150vh;
    }
    
    .container.tiles .tile {
        width: 100%;
        height: 25%;
    }
    
    .container.text-image.odd,
    .container.text-image.even {
        flex-direction: column-reverse;
    }
    
    .container.text-image .text {
        width: 100%;
    }

    .container.text-image .image {
        width: 100%;
    }
}

.currency-toggle {
    display: inline-flex;
    background: rgba(44, 121, 185, 0.08);
    border: 1px solid rgba(44, 121, 185, 0.18);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.currency-toggle button {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--secondary-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.currency-toggle button.active {
    background: var(--primary-color, #2c79b9);
    color: #fff;
}