@font-face {
  font-family: "Montserrat";
  src: url('/assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-display: block;
}

@font-face {
        font-family: "HighlightFont";
        src: url('/assets/fonts/Bungee-Regular.ttf') format('truetype');
        font-display: block;
}

/* all variables */
:root {
        --background: 250, 250, 250;
        --backgroundFaint: 236, 236, 236;
        --text: 25,25,25;
        --textFaint: 65,65,65;
        /* highlight colour — for drawing attention to something */
        --highlight1: 250, 232, 168;
        --highlight1Faint: 230, 188, 140;
        /* call to action colour — for anything interactive */
        --highlight2: 40, 100, 110;
        --highlight2Faint: 10, 45, 68;

        --fontMicro: clamp(7px, min(0.5rem, calc((0.5vw + 0.5vh) / 2)), 1.5vw);
        --fontSmallest: clamp(13px, min(1rem, calc((1vw + 1vh) / 2)), 3vw);
        --fontSmall: clamp(15px, min(1.2rem, calc((1.2vw + 1.2vh) / 2)), 3.6vw);
        --fontMedium: clamp(22px, min(2rem, calc((2.4vw + 2.4vh) / 2)), 6vw);
        --fontLarge: clamp(26px, min(2.5rem, calc((3vw + 3vh) / 2)), 7.5vw);
        --fontLargest: clamp(30px, min(5rem, calc((5vw + 5vh) / 2)), 10vw);

        --paddingMinimum: clamp( 5px, min(1em, calc((1vw + 1vh) / 2)), 3vw);
        --paddingSmall: clamp( 7px, min(2em, calc((2vw + 2vh) / 2)), 6vw);
        --paddingLarge: clamp( 10px, min(4em, calc((3vw + 3vh) / 2)), 9vw);

        --fontWeightNormal: 300;
        --fontWeightBold: 400;

        --borderRadius: 10px;
        --transitionTime: 0.1s;

        --borderThickness: 1px;

        --scaleIncrease: 1.01;

        /* ---------- Added for the "rounded & bold" visual direction ---------- */
        /* Larger radius for cards/sections/panels — --borderRadius (above) is
           kept as-is for small elements like inputs, so nothing that already
           relies on it changes size. */
        --borderRadiusLarge: 20px;
        /* Fully rounded — for buttons, chips, and pill-shaped controls */
        --borderRadiusPill: 999px;

        /* This exact shadow value was already being hand-typed identically
           across a dozen different hover states site-wide — pulled out into
           one variable so it can't drift out of sync between components. */
        --shadowSoft: 0 4px 14px rgba(0, 0, 0, 0.08);
        --shadowStrong: 0 8px 24px rgba(0, 0, 0, 0.18);

        /* Error/danger color — used by .errors, delete buttons, etc.
           Previously hardcoded as raw hex in several places. */
        --error: 153, 27, 27;
        --errorFaint: 254, 226, 226;
}

/* remove base styling from doc */
* {
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
        color: rgb(var(--text));
        font-family: Montserrat;
        font-weight: var(--fontWeightNormal);
}

/* assign the font */
html, body {
    color: rgb(var(--text));
    background-color: rgb(var(--backgroundFaint));
    font-family: Montserrat;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    
    min-height: 100vh
}

.background-image-style{
	background-position: center;
	background-clip: border-box;
	background-repeat: no-repeat;
	object-fit: cover;
	background-size: cover;
}

/* ==========================================================================
   Pagination — shared by admin list pages and account/discover result pages
   (previously duplicated in admin-lists.css and result-card.css, with the
   admin version missing the .disabled state)
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--paddingSmall);
    margin-top: var(--paddingLarge);
    font-size: var(--fontSmall);
}

.pagination a {
    color: rgb(var(--highlight2));
    text-decoration: none;
}

.pagination a:hover {
    text-decoration: underline;
}

.pagination .disabled {
    color: rgb(var(--textFaint));
    pointer-events: none;
}

/* ==========================================================================
   Click-to-interact map lock overlay — shared by every embedded map on the
   site (attraction page location tab, search results map, admin coordinate
   picker). Sits over a map and blocks all interaction (drag/scroll-zoom/
   double-click-zoom/touch-zoom/keyboard) until clicked, so a map embedded
   in scrollable content never hijacks the page's own scrolling. The
   overlay itself stays fully transparent — only the small label has a
   background, so the map underneath stays fully visible.
   ========================================================================== */

.map-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000; /* above Leaflet's panes AND its own control container */
    cursor: pointer;
    transition: opacity var(--transitionTime) ease;
}

.map-lock-overlay span {
    position: absolute;
    bottom: calc(var(--paddingMinimum) / 2);
    left: calc(var(--paddingMinimum) / 2);
    padding: calc(var(--paddingMinimum) / 3) calc(var(--paddingMinimum) / 1.5);
    color: rgb(var(--background));
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--borderRadiusPill);
    font-size: 0.7rem;
    font-weight: var(--fontWeightBold);
}

.map-lock-overlay.dismissed {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Save/Saved button (components/save-attraction-button.php) — lives here
   rather than in the component's own inline <style> block, since that
   block was duplicated once per card and depended on at least one
   instance actually rendering in the DOM. This component is used across
   multiple different pages (search results, my-saved, the attraction
   page hero) that don't all share the same page-specific stylesheet, but
   every one of them loads master.css.
   ========================================================================== */

.save-attraction-btn {
    box-sizing: border-box; /* without this, the border below makes this render slightly larger than the borderless hero badges/New chip it needs to match sizing with */
    display: inline-flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 3);
    /* Matches .breadcrumb-chip exactly, so this sits consistently
       alongside other pill badges wherever it's used */
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--textFaint));
    background: rgb(var(--background));
    border: var(--borderThickness) solid rgb(var(--backgroundFaint));
    border-radius: var(--borderRadiusPill);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadowSoft);
    transition: background var(--transitionTime) ease, color var(--transitionTime) ease, box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease;
}

.save-attraction-btn:hover {
    background: rgb(var(--backgroundFaint));
    box-shadow: var(--shadowStrong);
    transform: translateY(-2px);
}

.save-attraction-btn:focus-visible {
    outline: 2px solid rgb(var(--highlight2));
    outline-offset: 2px;
}

/* Saved state — filled pill, same "active" treatment used elsewhere on
   the site for a selected/current state, rather than overloading the
   semantically-named --error colour for something that isn't an error */
.save-attraction-btn[data-saved="1"] {
    color: rgb(var(--background));
    background: rgb(var(--highlight2));
    border-color: rgb(var(--highlight2));
}

.save-attraction-btn[data-saved="1"] i,
.save-attraction-btn[data-saved="1"] span {
    color: rgb(var(--background));
}

.save-attraction-btn[data-saved="1"]:hover {
    background: rgb(var(--highlight2Faint));
    border-color: rgb(var(--highlight2Faint));
}

.save-attraction-btn.save-attraction-btn-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Folder dropdown ---------- */
.save-attraction-menu-wrapper {
    position: relative;
    display: inline-block;
}

.save-attraction-btn.active {
    background: rgb(var(--highlight2));
    border-color: rgb(var(--highlight2));
}

.save-attraction-btn.active i,
.save-attraction-btn.active span {
    color: rgb(var(--background));
}

.save-attraction-dropdown {
    display: none;
    position: fixed;
    z-index: 60;
    min-width: 200px;
    max-width: calc(100vw - var(--paddingLarge) * 2);
    padding: calc(var(--paddingMinimum) / 2);
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowStrong);
}

.save-attraction-dropdown.open {
    display: block;
}

.save-attraction-dropdown-none {
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    width: 100%;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.save-attraction-dropdown-none input {
    cursor: default;
}

.save-attraction-dropdown-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 2);
    width: 100%;
    min-height: 44px;
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--text));
    background: none;
    border: none;
    border-radius: var(--borderRadius);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transitionTime) ease;
}

label.save-attraction-dropdown-item {
    cursor: pointer;
}

.save-attraction-dropdown-item:hover {
    background: rgb(var(--backgroundFaint));
}

.save-attraction-dropdown-empty {
    padding: calc(var(--paddingMinimum) / 2) var(--paddingMinimum);
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.save-attraction-dropdown-empty a {
    color: rgb(var(--highlight2));
    font-weight: var(--fontWeightBold);
}

.save-attraction-dropdown-divider {
    height: var(--borderThickness);
    margin: calc(var(--paddingMinimum) / 2) 0;
    background: rgb(var(--backgroundFaint));
}

.save-attraction-remove-btn {
    color: rgb(var(--error));
}

.save-attraction-remove-btn i {
    color: rgb(var(--error));
}

.save-attraction-remove-btn:hover {
    background: rgb(var(--errorFaint));
}