/* ==========================================================================
   GLOBAL VARIABLES & FONTS
   ========================================================================== */
/* These variables store our main brand colors and custom font names so we can easily reuse and update them across the entire stylesheet. */
:root {
    --font-regular: 'SagoMini Rounded Regular', sans-serif; /* Our standard body font */
    --font-bold: 'SagoMini Rounded Bold', sans-serif; /* Our bold heading font */
    --color-text-main: #635F5E; /* Dark grey for standard text */
    --color-link: #51beb5; /* Teal for clickable links */
    --color-modal-text: #4b5563; /* Slightly darker grey specifically for modal body text */
    --color-modal-heading: #2c3e50; /* Deep blue-grey for modal titles */
    --color-btn-blue: #4aa0e2; /* Primary blue for our main buttons */
    --color-btn-blue-hover: #354eb5; /* Darker blue color when a user hovers over a button */
}

/* Loading our custom web fonts from the CDN so they render correctly on all devices. */
@font-face {
    font-family: 'SagoMini Rounded Regular';
    src: url('https://world-cdn.sagosago.com/fonts/SagoMiniRounded-Regular_v2.otf') format('opentype'),
         url('https://world-cdn.sagosago.com/fonts/SagoMiniRounded-Regular_v2.woff2') format('woff2');
    font-weight: 300; /* Sets the standard thickness for regular text */
    font-style: normal; /* Ensures the font isn't italicized by default */
    -webkit-font-smoothing: antialiased; /* Makes the font look crisp and smooth on Apple devices */
}

@font-face {
    font-family: 'SagoMini Rounded Bold';
    src: url('https://world-cdn.sagosago.com/fonts/SagoMiniRounded-Bold_v2.otf') format('opentype'),
         url('https://world-cdn.sagosago.com/fonts/SagoMiniRounded-Bold_v2.woff2') format('woff2');
    font-weight: bold; /* Sets the thickness for bold text */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   BASE & LAYOUT STYLES
   ========================================================================== */
/* Setting up the baseline design for standard page elements. */

body {
    font-family: var(--font-regular); /* Applies our custom regular font everywhere by default */
}

footer p {
    text-align: center; /* Centers the copyright and footer text */
    margin-top: 20px; /* Adds a bit of breathing room above the footer */
}

ul {
    padding: 0px; /* Removes default browser padding on lists */
    margin: 0px; /* Removes default browser margins on lists */
}

li { 
    padding-left: 0px; /* Ensures list items line up nicely without extra indentations */
}

a {
    color: var(--color-link); /* Applies our brand teal to all links */
}

/* We hide some default Help Scout navigation elements here to keep the header clean. */
.brand span, .nav-collapse, .navbar .btn-navbar {
    display: none; 
}

/* Styles the main top navigation bar. */
.navbar .navbar-inner {
    background-color: #fff; /* Keeps the header background clean white */
    box-shadow: 0px 4px 4px -2px #EFEFEF; /* Adds a very soft drop shadow under the header */
}

/* ==========================================================================
   SEARCH AREA
   ========================================================================== */
/* Customizing the big search banner on the homepage. */

#searchBar .search-query {
    background: #fff; /* Sets the search box background to white */
    border-color: transparent; /* Removes the default harsh border */
    box-shadow: none; /* Removes the default inset shadow */
    color: #777; /* Dark grey text for what the user types */
    border-radius: 25px; /* Gives the search bar pill-shaped rounded corners */
    height: 50px; /* Makes the search bar tall and easy to tap */
    padding: 0px 20px 0px 50px; /* Adds space inside the box so text doesn't touch the edges or the icon */
    background: white url(https://world-cdn.sagosago.com/images/helpscout_search_icon.svg) no-repeat 22px 16px; /* Injects a custom magnifying glass icon */
    background-size: 18px 18px; /* Sizes the custom magnifying glass icon properly */
}

#searchBar button { 
    display: none; /* Hides the default submit button since pressing enter works fine */
}

#docsSearch #searchBar button i::before { 
    color: #fff; 
}

/* The massive banner area holding the main title and search bar. */
#docsSearch {
    background: #85C8EE; /* Sets the fallback sky blue background color */
    border-bottom: none; /* Removes the default bottom line */
    padding-top: 200px; /* Pushes the content down to make the banner very tall */
    padding-bottom: 40px; /* Adds some space below the search bar */
    background-image: url(https://world-cdn.sagosago.com/images/sagomini_helpscout_tom.png); /* Adds the custom character banner image */
    background-repeat: no-repeat; /* Ensures the image only shows up once and doesn't tile */
    background-position: center 50px; /* Positions the characters exactly where we want them */
    z-index: 1; /* Keeps this banner underneath any dropdowns or modals */
}

#docsSearch h1 {
    color: white; /* Makes the main page title pop against the blue background */
    font-weight: bold; /* Uses our bold font style */
    font-size: 40px; /* Makes the title nice and large on desktop */
}

/* Shrinks the main banner title on smaller screens so it doesn't break into awkward lines. */
@media only screen and (max-width: 768px) {
    #docsSearch h1 { 
        font-size: 28px; 
    }
}

/* ==========================================================================
   ARTICLE LISTS & CATEGORIES
   ========================================================================== */
/* Styling the main content blocks on the homepage (categories and popular articles). */

.most-pop-articles h2, .icon-article-doc, .sep::after { 
    display: none; /* Hides standard icons and headers we don't want to use */
}

.most-pop-articles .popArticles {
    font-size: 20px; /* Increases the size of popular article links */
    line-height: 30px; /* Adds line height so stacked links are easier to read and tap */
    margin-bottom: 40px; /* Spaces out this section from what comes below it */
}

/* Injects our own custom 'Popular articles' heading since we hid the default one. */
.most-pop-articles::before {
    content: 'Popular articles';
    font-size: 30px; 
    text-align: center; /* Centers the title over the list */
    display: block; 
    color: var(--color-text-main); 
    margin-bottom: 50px; /* Pushes the list down from the title */
    margin-top: 20px; /* Pulls the title down from the section above it */
}

/* Injects our own custom 'Categories' heading. */
.category-list::before {
    content: 'Categories';
    display: block;
    font-size: 30px;
    text-align: center;
    color: var(--color-text-main);
    margin-bottom: 50px;
}

/* Styles the individual category cards on the homepage. */
.category-list .category {
    border: 1px solid #D8D7D7; /* Gives the card a subtle grey outline */
    border-radius: 10px; /* Softens the corners of the cards */
    background-color: #fff; /* Keeps the card background solid white */
    transition: all ease 0.15s; /* Smooths out the hover effect animation */
}

/* Makes the category cards 'pop' forward slightly when a mouse hovers over them. */
.category-list .category:hover { 
    transform: scale(1.04); 
}

.category-list .category h3 {
    font-weight: bold; 
    font-size: 18px; 
    line-height: 24px; 
    text-align: center; /* Centers the category title nicely in the card */
}

.category-list .category .article-count { 
    display: none; /* Hides the standard 'X articles' counter */
}

.category-list h3 { 
    color: var(--color-text-main); 
}

/* Removes some spacing on mobile so the cards stack tighter. */
@media only screen and (max-width: 768px) {
    .category-list .category { 
        margin-bottom: 10px; 
    }
}

/* ==========================================================================
   SIDEBAR & WIDGETS
   ========================================================================== */
/* Cleans up the styling for sidebar menus and integrations like the language picker. */

.articleRatings, .rateAction, .rateAction hover { 
    box-shadow: none; /* Flattens out the rating buttons */
}

.articleRatings { 
    border: 0px; 
    padding: 0px; 
    justify-content: left; /* Aligns the rating options to the left side */
}

/* Adjustments for the Weglot language selector widget. */
.wg-default, .wg-default .country-selector { 
    position: relative; 
}
.country-selector { 
    height: 38px; 
    top: 10px; 
    border-radius: 5px; 
    border: none; 
    font-size: 16px; 
}
.wg-drop.country-selector .wgcurrent { 
    border-radius: 5px; 
}
.wg-default .wg-drop.country-selector a, #weglot-container #wg-default { 
    font-size: 16px; 
}

/* Styles for the smaller search box inside the sidebar. */
#sidebar form .search-query { 
    border-radius: 25px; 
    border: solid 1px #B1AFAE; 
    height: 50px; 
    font-size: 16px; 
}

#sidebar h3 { 
    display: none; /* Hides sidebar block titles for a cleaner look */
}

#sidebar .sm { 
    margin-bottom: 30px; 
}

#sidebar .nav-list li { 
    line-height: 42px; /* Spaces out sidebar links so they are easy to click */
}

#sidebar .nav-list a, #sidebar .nav-list .active a {
    color: var(--color-text-main); 
    font-size: 18px; 
    font-family: var(--font-regular); 
}

/* Highlights the currently selected category in the sidebar. */
#sidebar .nav-list .active a { 
    font-weight: bold; 
}

#sidebar .nav-list .active a .icon-arrow, #sidebar .nav-list .active a:hover .icon-arrow { 
    display: none; /* Hides default arrow icons */
}

#sidebar .nav-list .active a:hover, #sidebar .nav-list a:hover { 
    text-decoration: underline; /* Adds an underline when hovering over a sidebar link */
}

/* ==========================================================================
   ARTICLE CONTENT (FULL VIEW)
   ========================================================================== */
/* Controls how individual articles and their contents look when a user is reading them. */

#main-content { 
    background: none; /* Removes any default background color behind the article */
}

#main-content .contentWrapper {
    border-radius: 0px; 
    box-shadow: none; /* Flattens the article container */
    border: none; 
    padding: 0px 0px 80px 0px; /* Leaves a lot of space at the bottom of the article */
}

#main-content .sort { 
    display: none; /* Hides sorting controls */
}

#categoryHead { 
    margin-bottom: 40px; /* Adds space under the category title */
}

#fullArticle .title { 
    margin-bottom: 1.5em; /* Pushes the article content down from the title */
}

/* Standardizes the look of dates and author info at the bottom of an article. */
.articleFoot p.lu, .articleFoot time.lu, .articleFoot p, .articleFoot time {
    font-family: var(--font-regular);
    font-style: normal;
    color: var(--color-text-main);
    display: inline-block;
}

#sbContact { 
    color: var(--color-link); 
    border-bottom: none; 
}

#sbContact a:hover { 
    text-decoration: underline; 
}

.icon-print { 
    display: none; /* Hides the default print button */
}

/* Adjusts padding on mobile so the article takes up more screen space. */
@media only screen and (max-width: 768px) {
    #main-content .contentWrapper { 
        padding: 22px 22px 45px 22px; 
    }
}

#fullArticle img { 
    border: none; /* Prevents browsers from putting ugly borders around images */
}

.related a span { 
    color: var(--color-link); 
}

.related { 
    border: none; 
    padding: 0px 0px 30px 0px; 
}

.related h3 { 
    text-transform: none; 
    color: var(--color-text-main); 
    font-size: 18px; 
}

.related ul>li a { 
    font-size: 18px; /* Bumps up the size of related article links */
}

#fullArticle h1 { 
    color: var(--color-text-main); 
}

/* Ensures body text across the whole article is perfectly readable. */
#fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table { 
    font-size: 18px; 
}

#fullArticle ul { 
    list-style-position: inside; /* Keeps bullet points neatly aligned with the text block */
}

.contentWrapper.withRelated { 
    padding: 50px; 
}

.contentWrapper h1 { 
    color: var(--color-text-main); 
}

/* Styles standard lists of links found inside categories. */
.articleList {
    font-size: 20px; 
    line-height: 1.4em; 
    margin-left: -25px; 
    list-style-position: inside; 
    list-style-image: none; 
    list-style-type: none; /* Removes bullets from category lists entirely */
    padding-inline-start: 0px;
}

.articleList a { 
    margin-left: 0px; 
}

.articleList li { 
    padding-left: 25px; 
}

/* Tweaks list margins on mobile devices to prevent horizontal scrolling issues. */
@media (max-width: 768px) {
    ul.articleList { 
        margin-left: -25px; 
        margin-right: 25px; 
        margin-top: 25px; 
        margin-bottom: -25px; 
    }
}

/* ==========================================================================
   HIDDEN ARTICLES & PAGINATION (MANUAL OVERRIDES)
   ========================================================================== */
/* We use this section to manually hide utility pages and sub-articles from the main category lists so they don't clutter the user experience. */

ul.articleList li:has(a[href*="/article/841-map-downtown"]),
ul.articleList li:has(a[href*="/article/845-map-cloud-garden"]),
ul.articleList li:has(a[href*="/article/838-map-local-laneway"]),
ul.articleList li:has(a[href*="/article/837-map-nola-s-neighborhood"]),
ul.articleList li:has(a[href*="/article/839-map-party-park"]),
ul.articleList li:has(a[href*="/article/840-map-bridge-boulevard"]),
ul.articleList li:has(a[href*="/article/843-map-western-waves"]),
ul.articleList li:has(a[href*="/article/844-map-harbor"]),
ul.articleList li:has(a[href*="/article/854-map-enchanted-hollow"]),
ul.articleList li:has(a[href*="/article/883-map-caterpillar-court"]),
ul.articleList li:has(a[href*="/article/886-map-greenhouse"]),
ul.articleList li:has(a[href*="/article/821-nola-s-neighborhood-quest-1-grandma-nola"]),
ul.articleList li:has(a[href*="/article/822-nola-s-neighborhood-quest-2-harvey"]),
ul.articleList li:has(a[href*="/article/823-nola-s-neighborhood-quest-3-rosie"]),
ul.articleList li:has(a[href*="/article/824-party-park-quest-1-slip-and-slide"]),
ul.articleList li:has(a[href*="/article/825-party-park-quest-2-mud-pit"]),
ul.articleList li:has(a[href*="/article/826-party-park-quest-3-dance-floor"]),
ul.articleList li:has(a[href*="/article/827-party-park-quest-4-bouncy-castle"]),
ul.articleList li:has(a[href*="/article/828-downtown-quest-1-astrid"]),
ul.articleList li:has(a[href*="/article/829-downtown-quest-2-robin"]),
ul.articleList li:has(a[href*="/article/830-downtown-quest-3-jack"]),
ul.articleList li:has(a[href*="/article/848-harbor-quest-1-item-cannon"]),
ul.articleList li:has(a[href*="/article/849-harbor-quest-2-seaplane"]),
ul.articleList li:has(a[href*="/article/850-harbor-quest-3-long-slide-and-cannon-shortcut"]),
ul.articleList li:has(a[href*="/article/855-enchanted-hollow-quest-1-singing-stones"]),
ul.articleList li:has(a[href*="/article/856-enchanted-hollow-quest-2-minecart"]),
ul.articleList li:has(a[href*="/article/857-enchanted-hollow-quest-3-bridge-and-gem-shop"]),
ul.articleList li:has(a[href*="/article/884-caterpillar-court-quest-1-open-the-greenhouse"]),
ul.articleList li:has(a[href*="/article/885-greenhouse-quest-1-unlock-the-living-yield-machine"]),
ul.articleList li:has(a[href*="/article/887-greenhouse-quest-2-unlock-the-big-yield-machine"]),
ul.articleList li:has(a[href*="/article/831-jinja-s-garden-keyboard-navigation"]),
ul.articleList li:has(a[href*="/article/833-jinja-s-garden-controller-navigation"]),
ul.articleList li:has(a[href*="/article/834-jinja-s-garden-mfi-controller-navigation"]) {
    display: none !important; /* Forcibly hides the entire list item for these specific links */
}

/* Hide page 2 pagination link in Jinjas Garden category */
.pagination ul li a[href="/category/792-jinjas-garden/2?sort=custom"] {
    display: none !important; 
}

/* Hide page 3 pagination link in Jinjas Garden category */
.pagination ul li a[href="/category/792-jinjas-garden/3?sort=custom"] {
    display: none !important; 
}

/* ==========================================================================
   CUSTOM PROMO BANNER STYLES
   ========================================================================== */
/* Controls the look and functionality of our temporary promotional banners (e.g. sale alerts) at the top of the screen. */

#promo-banner {
    position: relative;
    width: 100vw; /* Forces the banner to span the exact full width of the screen */
    left: 50%; /* These left/right/margin properties break the banner out of standard container widths */
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    z-index: 9999; /* Keeps the banner layered on top of other standard page content */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Centers the banner text */
    align-items: center; /* Centers the text vertically */
    font-family: var(--font-regular);
    color: white;
    overflow: hidden; /* Hides content before the banner slides into view */
    max-height: 0; /* Keeps the banner hidden by default */
    opacity: 0;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, background-color 0.8s ease; /* Smoothly slides the banner open */
}

#promo-banner.visible { 
    max-height: 120px; /* Expands the banner when the 'visible' class is applied via javascript */
    opacity: 1; 
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Adds space between the text and the button */
    width: 100%;
    max-width: 1100px; /* Prevents the content from stretching too wide on massive screens */
    padding: 15px 50px; 
    box-sizing: border-box;
    text-align: center;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.promo-content.fading-out { 
    opacity: 0; /* Fades text out smoothly if we swap messages dynamically */
}

.promo-text { 
    font-size: 16px; 
    line-height: 1.4; 
}

/* The call to action button inside the promo banner. */
.promo-btn {
    background-color: white;
    border-radius: 4px;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap; /* Prevents the button text from breaking into two lines */
    transition: opacity 0.2s;
    color: inherit; 
    display: inline-block;
}

.promo-btn:hover { 
    opacity: 0.9; /* Slightly dims the button on hover */
    text-decoration: none; 
}

/* The 'X' icon to dismiss the banner. */
.promo-close {
    position: absolute;
    right: 20px; /* Pins the close button to the far right */
    top: 50%;
    transform: translateY(-50%); /* Perfectly centers the X vertically */
    font-size: 24px;
    cursor: pointer; /* Shows a pointing hand when hovered */
    line-height: 1;
    opacity: 0.8;
    z-index: 10;
    color: white !important; 
}

.promo-close:hover { 
    opacity: 1; /* Brightens the close button on hover */
}

/* Stacks the banner elements neatly on mobile screens. */
@media only screen and (max-width: 768px) {
    #promo-banner.visible { max-height: 250px; }
    .promo-content { flex-direction: column; gap: 15px; padding: 20px 40px; }
    .promo-text { font-size: 15px; }
    .promo-close { top: 15px; right: 15px; transform: none; }
}

/* ==========================================================================
   CUSTOM CENTER MODAL STYLES
   ========================================================================== */
/* The styles for the big pop-up modal box that overlays the entire screen. */

.sago-modal-overlay {
    position: fixed; /* Locks the overlay over everything else on the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 43, 69, 0.6); /* Creates the dark, semi-transparent backdrop */
    z-index: 99999; /* Ensures the modal is the absolute topmost element */
    display: flex;
    align-items: flex-start; /* Aligns the modal to the top so it can be safely scrolled on short screens */
    justify-content: center; /* Keeps the modal centered horizontally */
    overflow-y: auto; /* Allows the user to scroll vertically if the modal is taller than their screen */
    padding: 20px 0; /* Creates breathing room so the modal doesn't touch the top/bottom edges */
    box-sizing: border-box;
    opacity: 0; /* Hidden initially */
    visibility: hidden; /* Removes from screen flow entirely until needed */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Fades the backdrop in smoothly */
}

/* Applied by javascript when the modal is triggered */
.sago-modal-overlay.show { 
    opacity: 1; 
    visibility: visible; 
}

/* The actual white modal box itself. */
.sago-modal {
    background: #ffffff;
    border-radius: 12px; /* Smooth rounded corners on the box */
    width: 90%; /* Allows it to shrink nicely on mobile devices */
    max-width: 540px; /* Caps the size so it doesn't get ridiculously wide on desktop monitors */
    margin: auto; /* Automatically centers the modal horizontally and vertically if space allows */
    flex-shrink: 0; /* Prevents the box from getting squished weirdly inside the flexbox container */
    position: relative;
    overflow: hidden; /* Ensures the header image doesn't bleed outside the rounded corners */
    box-shadow: 0 15px 40px rgba(0,0,0,0.2); /* Casts a large, soft shadow to lift it off the background */
    transform: translateY(20px); /* Starts the modal slightly low so it can slide up into place */
    transition: transform 0.3s ease;
    text-align: center;
    font-family: var(--font-regular);
}

.sago-modal-overlay.show .sago-modal { 
    transform: translateY(0); /* Slides the modal into its final centered position */
}

/* The 'X' button specific to the modal box. */
.sago-modal-close {
    position: absolute;
    top: 15px; /* Floats over the top right corner of the header image */
    right: 15px;
    background: #ffffff;
    border: none;
    border-radius: 50%; /* Makes the button perfectly round */
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #555555;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Gives the button a tiny shadow so it's visible over the artwork */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px; /* Fine-tunes the X position so it sits visually perfectly centered */
    transition: background 0.2s ease;
}

.sago-modal-close:hover { 
    background: #f0f0f0; /* Darkens the button slightly on hover */
}

/* The banner artwork at the top of the modal. */
.sago-modal-image {
    width: 100%;
    height: auto; /* Allows the image to scale naturally based on the modal width */
    display: block;
    background-color: #ffffff; 
    border-radius: 12px 12px 0 0; /* Rounds only the top corners to match the parent modal container perfectly */
}

.sago-modal-content {
    padding: 20px 30px 35px; /* Creates spacing inside the white box below the image */
    min-height: 260px; /* Ensures the box doesn't look collapsed if content is loading slowly */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sago-modal-content h2 {
    font-family: var(--font-bold);
    font-size: 24px;
    color: var(--color-modal-heading);
    margin: 0 0 12px;
}

.sago-modal-content p {
    font-size: 16px;
    color: var(--color-modal-text);
    margin: 0; 
    line-height: 1.5; /* Makes multi-line text much easier to read */
}

/* The primary interactive buttons inside the modal. */
.sago-modal-btn {
    display: inline-block;
    background: var(--color-btn-blue);
    color: #ffffff !important; /* Forces the text to stay white */
    text-decoration: none;
    padding: 14px 28px; /* Makes the button chunky and easy to tap */
    border-radius: 6px;
    font-family: var(--font-bold);
    font-size: 16px;
    transition: background 0.2s ease;
    width: 100%; /* Stretches the button to fill the width of the modal */
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

.sago-modal-btn:hover {
    background: var(--color-btn-blue-hover);
    color: #ffffff;
    text-decoration: none;
}

/* A container to stack multiple modal buttons together neatly. */
.sago-modal-button-group {
    display: flex;
    flex-direction: column; /* Stacks the buttons vertically */
    gap: 12px; /* Adds space between each button */
    margin-top: 24px;
}

#sago-modal-dynamic-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#sago-modal-dynamic-content.fading-out { 
    opacity: 0; 
}

/* ==========================================================================
   ARTICLE MAP GRID & BANNERS
   ========================================================================== */
/* Handles the styling for image grids used in map articles. */

.map-grid-item {
    position: relative; /* Acts as an anchor so the floating text banners stick inside this item */
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0; /* Prevents tiny gaps below images */
    border-radius: 8px; /* Softens the corners of the grid images */
    overflow: hidden; /* Stops elements inside from breaking out past the rounded corners */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Gives the image block a subtle lift effect when a user hovers over it. */
.map-grid-item:hover {
    transform: scale(1.03); /* Zooms the entire block in slightly */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Intensifies the drop shadow */
}

/* The text banner that floats over the map images. */
.map-banner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%); /* Centers the banner perfectly in the middle of the image */
    background-color: rgba(255, 255, 255, 0.8); /* Creates a semi-transparent white ribbon effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    color: var(--color-text-dark); 
    font-family: var(--font-bold);
    font-size: 24px;
    padding: 15px 0; /* Determines how thick the white banner is */
    line-height: 1.2;
    text-align: center;
    pointer-events: none; /* Allows the user's click to pass through the text to the link underneath */
}

/* ==========================================================================
   MODAL MOBILE & RESPONSIVE OPTIMIZATIONS
   ========================================================================== */
/* These rules kick in automatically on smaller screens to ensure the modal stays usable and proportionate. */

/* Tweaks for standard mobile phones held vertically (portrait). */
@media screen and (max-width: 480px) {
    .sago-modal-content {
        padding: 20px 20px 25px; /* Narrows the padding slightly to give content more room */
    }
    
    .sago-modal-content h2 {
        font-size: 21px; /* Drops the heading size slightly */
    }
    
    .sago-modal-content p {
        font-size: 15px; /* Scales down body text */
    }
    
    .sago-modal-btn {
        padding: 12px 20px; /* Makes the buttons slightly thinner */
        font-size: 15px; /* Shrinks the text inside the buttons */
    }
    
    .sago-modal-button-group {
        gap: 10px; /* Pulls the buttons closer together */
    }
}

/* Heavy optimizations for when a device is turned horizontally (landscape), where vertical space is incredibly tight. */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .sago-modal {
        max-width: 420px; /* Restricts the modal width, which also proportionately scales down the height of the top artwork */
    }
    
    .sago-modal-content {
        padding: 15px 20px 20px; /* Aggressively reduces internal spacing */
        min-height: auto; /* Removes the minimum height restriction so it can shrink */
    }
    
    .sago-modal-content h2 {
        font-size: 20px; 
        margin-bottom: 8px; /* Tightens the gap below the title */
    }
    
    .sago-modal-content p {
        font-size: 14px; 
    }
    
    .sago-modal-btn {
        padding: 10px 16px; /* Squats the buttons down significantly */
        font-size: 14px; 
    }
    
    .sago-modal-button-group {
        margin-top: 15px; /* Tightens the gap above the button stack */
        gap: 8px; /* Squishes the buttons close to each other */
    }
}