﻿:root {
    --ams-page-bg: #f8f9fa; /* Bootstrap bg-light / gray-100 */
}

body {
    background-color: var(--ams-page-bg);
}

#name {
    top: 20px;
}

/* Prevent iOS from auto-scaling text on small screens */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/*
  Narrow content width (replaces inline style="width: 90%" on .container).

  Markup — both class names on the SAME div (no extra wrapper):
    <div class="container container-narrow-mbs">

  Selector — .container.container-narrow-mbs
    • No space between .container and .container-narrow-mbs
    • Means: one element that has BOTH classes
    • Wrong: .container .container-narrow-mbs  (would mean a child inside .container)

  Behaviour:
    • Up to 900px viewport: full width of the content area
    • Above 900px: centred, capped at 900px (same readable width as at 900px — not a % of the screen)
*/
.container.container-narrow-mbs {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 901px) {
    .container.container-narrow-mbs {
        max-width: 900px;
    }
}

/* PIB jump-to-section dropdown: in the content column; sticks to top while scrolling */
.pib-jump-menu {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.125rem 0;
    margin: 0 0 0.35rem;
    background-color: var(--ams-page-bg);
    color: inherit;
}

    .pib-jump-menu p {
        margin: 0;
    }

    .pib-jump-menu select.index {
        max-width: 100%;
    }

/* Pre-Arrival booklet pages: section wrappers + responsive images */
.property-info-section {
    margin-bottom: 1.5rem;
}

    /* PIB resort guide (e.g. Mottaret): extra space before centered h3s after body copy or a table */
    .pai-section p + h3.text-center,
    .pai-section table + h3.text-center,
    .property-info-section p + h3.text-center,
    .property-info-section table + h3.text-center {
        margin-top: 2.5rem;
    }

    /* Useful numbers table — centred, wider gap between label and number */
    .pai-section table.tellnos,
    .property-info-section table.tellnos {
        margin-left: auto;
        margin-right: auto;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
    }

        .pai-section table.tellnos td.phonetag,
        .property-info-section table.tellnos td.phonetag {
            padding-right: 2.75rem;
        }

.pai-img-block {
    width: 100%;
    max-width: 991px;
    height: auto;
}

/* Always hidden: every viewport + print */
.hide {
    display: none !important;
}

/* Temporary marker for adjustments still to be made (by MBS) */
.todo_mbs, .TODO_MBS {
    background-color: lawngreen !important;
}

.bold {
    font-weight: bold;
}

.redbold {
    color: red;
    font-weight: bold;
}

/* mainly used in search, but might be elsewhere*/
.text-muted {
    text-transform: uppercase;
}

@media (min-width: 768px) {
    a.phone[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        color: inherit;
        text-decoration: none;
    }
}

/* Header bar: match page canvas when scrolled (amsrentals-styles sets white) */
.site-navbar-wrap.scrolled {
    background-color: var(--ams-page-bg) !important;
}

/* Back-to-back sections: avoid double top padding (pairs with .site-section in amsrentals-styles) */
.site-section + .site-section {
    padding-top: 0.5em;
}

/* In-page / cross-page hash targets sit below the fixed search bar + nav */
.site-section[id],
.property-info-section[id],
h2[id],
h5[id] {
    scroll-margin-top: var(--sticky-total-header-height, 96px);
}
