/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   TABLE OF CONTENTS                                                           +
+                                                                               +
+   1. PRELOADS AND ROOT                                                        +
+   2. LAYOUT MATTERS                                                           +
+     2.1 PAGE-SPECIFIC LAYOUT AND OTHER MATTERS                                +
+   3. NAVIGATION MENU(S)                                                       +
+   4. GENERAL TEXT MATTERS                                                     +
+   5. OTHER LISTS THAN NAV MENUS                                               +
+   6. FORMS                                                                    +
+   7. TABLES                                                                   +
+   8. MISCELLANEOUS                                                            +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   1. PRELOADS AND ROOT                                                        +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
*, *:before, *:after {
    box-sizing: border-box;
    border: 0px solid black; /* For testing purposes. */
}
html {
    scroll-behavior: smooth;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   2. LAYOUT MATTERS                                                           +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*  The padding of the h1 element (see later) forms the layout as well.  */

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #EAEBE6; /* Fallback for older browsers. */
    background-image: linear-gradient(to right, #EAEBE6, #EFEBE8);
    position: relative; /* For the sticky footer. */
}
header {
    background-color: white; /* Because the logo has a white background. */
}
main {
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 280px;
    padding-bottom: 150px;
}
@media screen and (max-width: 1023px) {
    main {
        background-size: 100% 70px;
    }
}
footer, #makersLink {
    position: absolute;
    width: 100%;
    bottom: 0;
}
footer {
    background-color: #212A31;
}
#headerInnerWrap,
#mainInnerWrap,
#footerInnerWrap {
    max-width: 1000px; /* Creates a L/R padding of 12px on 1024 screens. */
    margin: 0 auto;
    position: relative;
}
#headerInnerWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 5px;
}
#mainInnerWrap {
    margin-bottom: 40px;
}
#mainInnerWrap img {
    max-width: 100%;
    height: auto;
}
#footerInnerWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   2.1 PAGE-SPECIFIC LAYOUT AND OTHER MATTERS                                  +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#homeBody {
    main {
        background: none;
    }
    #mainInnerWrap {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .smallImage {
        padding: 10px;
    }
    #homeViewer {
        padding-top: 1.5em;
    }
    h1 {
        padding-top: 2.5em;
    }
    @media screen and (min-width: 650px) {
        #mainInnerWrap {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, auto);
            gap: 0px 0px;
        }
        #homeViewer { grid-area: 1 / 1 / 2 / 5; padding-top:2.5em;}
        h1 { grid-area: 2 / 1 / 3 / 5; border-bottom:1px solid #ccc; padding-bottom:40px; margin-bottom:25px;}
        .smallImage1 { grid-area: 3 / 1 / 4 / 2; }
        .smallImage2 { grid-area: 3 / 2 / 4 / 3; }
        .textBlock1 { grid-area: 3 / 3 / 4 / 5; }
        .smallImage3 { grid-area: 4 / 3 / 5 / 4; }
        .smallImage4 { grid-area: 4 / 4 / 5 / 5; }
        .textBlock2 { grid-area: 4 / 1 / 5 / 3; }
    }
    .textBlock {
        padding: 20px 10px;
        text-align: justify;
    }
}
/* The homeViewer declarations are under Miscellaneous because a key declaration may not be nested. */



#condominiumBody, #apartmentsBody {
    #mainInnerWrap {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    @media screen and (min-width: 650px) {
        #mainInnerWrap {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 25px 15px;

            h1 { grid-area: 1 / 1 / 2 / 5; } /* Explanation on https://claude.ai/share/fe6badbc-3c64-495e-997f-a4e03ada2df4. */
            .mediumImage { grid-area: 2 / 1 / 3 / 3; }
            .textBlock { grid-area: 2 / 3 / 3 / 5; padding: 15px;}
            .smallImage1 { grid-area: 3 / 1 / 4 / 2; }
            .smallImage2 { grid-area: 3 / 2 / 4 / 3; }
            .smallImage3 { grid-area: 3 / 3 / 4 / 4; }
            .smallImage4 { grid-area: 3 / 4 / 4 / 5; }
        }
    }
    #mainInnerWrap div {
        padding: 15px; /* The smallImage divs need padding. */
    }
}


#apartmentsBody { /* Overrules the shared declarations. */
    @media screen and (min-width: 650px) {
        #mainInnerWrap {
            .mediumImage { grid-area: 2 / 3 / 3 / 5; }
            .textBlock { grid-area: 2 / 1 / 3 / 3; padding: 15px;}
        }
    }
}



#ratesBody {
    #mainInnerWrap {
        display: grid; /* So that the textBlock can center itself. */
    }
    .textBlock {
        padding: 10px;
        color: #666;
        max-width: 70ch;
        justify-self: center;
    }
    h2 {
        padding: 10px 0;
    }
    h2:first-child {
        padding-top: ;
    }
    p {
        padding-left: 20px;
    }
    @media screen and (min-width: 650px) {
        .textBlock {
            /*margin-top: 6em;*/
        }
    }
}



#galleryBody {
    h2 {
        text-align: center;
        color: #666;
    }
    #thumbnailsContainer {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    #thumbnailsContainer img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }
    #galleryViewerContainer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        display: none; /* Will get 'grid' from the Javascript. */
        opacity: 0;
        transition: opacity .125s;
        background-color: rgba(0, 0, 0, 0.5); /* ? */
    }
    #galleryViewer {
        width: 100%;
        max-width: 3000px;
        height: 100%;
        max-height: 1200px;
        justify-self: center; /* There are screens wider than 3000px. */
        align-self: center;
        display: grid; /* So the arrowsContainer can vertically center itself. */
    }
    #galleryViewer img {
        width: 100%;
        max-width: 3000px;
        height: auto;
        position: absolute; /* To stack them. */
        z-index: -1;
        opacity: 0;
        transition: opacity 1s;
    }
    #galleryViewer img:first-of-type {
        opacity: 1;
    }
    #closeGalleryViewer {
        position: fixed;
        top: 0;
        right: 0;
        padding: 0 8px 6px 8px;
        font-size: 2em;
        line-height: 1;
        font-weight: bold;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 0 0 0 5px;
        cursor: pointer;
    }
    #arrowsContainer {
        align-self: center;
    }
    .arrow {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-weight: bold;
        font-size: 1.4em;
        cursor: pointer;
        padding: 10px;
    }
    .arrow:hover,
    #closeGalleryViewer:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }
    #arrowPrev {
        float: left;
        border-radius: 0 5px 5px 0;
        padding-left: 11px;
    }
    #arrowNext {
        float: right;
        border-radius: 5px 0 0 5px;
        padding-right: 14px;
    }
    #imageDescription {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 2px 5px;
        justify-self: center;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
    }
}



#weatherBody {
    h2 {
        text-align: center;
        color: #666;
    }
    #mainInnerWrap {
        display: grid;
        justify-items: center;
    }
    #mainInnerWrap * {
        justify-self: center;
    }
    #mainInnerWrap div div {
        text-align: center; /* For the Safari bug that it still won't center those images. */
    }
    main > p {
        text-align: center;
    }
    .textBlock {
        padding: 2em 10px;
    }
    @media screen and (min-width: 650px) {
        #mainInnerWrap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(5, auto);
            gap: 0px 0px;
        }
        h1 {
            grid-area: 1 / 1 / 2 / 4;
        }
        .textBlock {
            grid-area: 2 / 1 / 3 / 4;
            column-count: 2;
            column-gap: 50px;
            height: auto;
        }
        .currentWeather {
            grid-area: 3 / 1 / 4 / 4;
        }
        .sunAndMoon {
            grid-area: 4 / 1 / 6 / 3;
        }
        #mainInnerWrap .weatherForecast {
            grid-area: 4 / 3 / 5 / 4;
            position: relative;
            left: -50px;
        }
        #mainInnerWrap .cloudHeight {
            grid-area: 5 / 3 / 6 / 4;
            position: relative;
            left: -50px;
            align-self: end;
        }
    }
}


#tidePredictionBody {
    h2 {
        color: #666;
        text-align: center;
        font: normal 20px Arial;
        margin-bottom: 0;
    }
    p {
        color: #666;
        text-align: center;
    }
    p:first-of-type {
        margin-top: 0;
    }
    pre {
        text-align: center;
        margin-top: 50px;
    }
}



#contactBody, #paymentBody {
    /* Responsive form container. */
    #formWrap {
        max-width: 700px;
        margin: 3em auto;
        padding: 5px 20px 20px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        background-color: white;
        color: #333;
    }
    form {
        background-color: white;
        display: flow-root;/* For the floating submit button. */
    }
    fieldset {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-top: 1.5em;
    }
    legend {
        padding: 0 0.5em;
        font-variant-caps: all-small-caps;
        font-size: 1.15em;
    }

    /* Fluid layout elements. */
    .singleField {
        display: flex; /* For the label's margin-top. */
        flex-direction: column;
        gap: 0.375em;
        background-color: white;
        z-index: 2;
    }

    /* Hide the honeypot trap from the human eye. */
    .singleField:has(input[name="New-Password"]) {
        display: none !important;
    }

    /* Core responsiveness: Multi-column rows that wrap on smaller screens. */
    .doubleField {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        column-gap: 1em;
    }

    /* Labels and inputs. */
    label {
        font-size: 0.9em;
        margin-top: .5em; /* Requires a parent with display:flex or display:grid because of the collapsing margin. */
    }
    label.intentOption {
        display: block;
    }
    input:not([type=radio]),
    select,
    textarea {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    textarea {
        resize: vertical;
    }
    input[type="date"] { /* This is for the iOS width oversizing bug. */
        display: inline-block;
        appearance: none;
        height: 2.675em;
    }
    label > span {
        color: #d93025;
    }

    /* Responsive button. */
    button[type="submit"] {
        width: 100%;
        padding: 0.75rem;
        background-color: #0066cc;
        color: white;
        display: inline-block; /* For the margin-top. */
        margin-top: 1em;
        border: none;
    }
    button[type="submit"]:hover {
        background-color: #0052a3;
        cursor: pointer;
    }

    /* Adjustments for medium screens and up. */
    @media (min-width: 480px) {
        .formWrap {
            padding: 2rem;
        }
        .intentGroup {
            flex-direction: row;
            gap: 1.5rem;
        }
        button[type="submit"] {
            width: auto;
            min-width: 150px;
            float: right; /* Keeps button nicely aligned on desktop. */
        }
    }
    /* The Google Map: */
    #mapFrameWrap {
        max-width: 740px;
        height: 400px;
        margin: 4em auto;
        padding: 20px;
    }
    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    /* The creditcard icons: */
    div#ccIcons {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 2em;
    }
}


#termsBody {
    .textBlock {
        max-width: 70ch;
        padding: 20px;
        margin: 0 auto;
    }
    .textBlock p:first-child {
        margin-top: 0;
    }
    .textBlock p:last-child {
        margin-top: 2em;
        text-align: center;
    }
    .textBlock ul {
        position: relative;
        top: -1em; /* To compensate for the margin-bottom of the preceding <p>. */
    }
    .textBlock a {
        color: rgb(0, 0, 238);
        text-decoration: underline;
    }
}



#thanksBody {
    main {
        min-height: 80vh;
    }
    .textBlock {
        margin-top: 4em;
        padding: 10px;
        color: #666;
    }
    h2 {
        text-align: center;
    }
}





/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   3. NAVIGATION MENU(S)                                                       +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* GLOBAL DECLARATIONS */

menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
menu li {
    display: inline-block;
}
menu a {
    text-decoration: none;
    font-weight: bold;
}
menu[aria-label="language selection"] {
    position: absolute;
    right: 5px;
    top: 5px;
    margin: 0;
    line-height: 0; /* Line-height affects the hyperlinked flags (= inline images) positioning as well. */
}
menu[aria-label="page selection"] li {
    margin: 5px;
    padding: 3px;
    text-align: center;
    font: 14px/1 Arial;
}
#hamburgerButton {
    display: none;
}

@media screen and (max-width: 1024px) {
    menu[aria-label="page selection"] {
        d/isplay: none; /* For testing purposes. */
        position: fixed;
        top: 0;
        left: -100vw;
        width: 100%;
        height: 100vh;
        background: #BDD1DC;
        z-index: 9;
        transition: left .3s;
        padding-top: 5em;
    }
    menu[aria-label="page selection"] li {
        display: list-item;
        width: fit-content;
        margin: 25px auto;
    }
    #hamburgerButton {
        display: block;
        position: fixed;
        width: 25px;
        left: 9px;
        top: 11px;
        z-index: 10;
        border-style: solid;
        border-color: black;
        border-width: 4px 0;
    }
    #hamburgerButton:hover {
        cursor: pointer;
    }
    #hamburgerButton hr {
        border: 2px solid black; /* An <hr> has no side walls. */
        margin: 3px 0; /* Space between the three layers of the hamburger. */
    }
    #headerInnerWrap {
        justify-content: center; /* To make way for the hamburger button. */
        padding-left: 0;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+   4. GENERAL TEXT MATTERS                                                     +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


html {
    font: normal 62.5% Verdana; /* 62.5%.x 1.5rem = 15px. */
}
body {
    font-size: clamp(1.5rem, -0.5vw + 1.9rem, 1.8rem);
    /* See https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ for the general idea. */
    /* And https://claude.ai/share/353f374f-be9c-4451-9699-4920d1e8c5df for this case. */
    line-height: 1.2; /* Was 1.4, to help people with dyslexia. */
}
#mainInnerWrap {
    hyphens: auto;
}
h1 {
    text-align: center;
    padding: 10.75em 10px .5em 10px;
    margin: 0; /* To prevent extending margin. */
    color: #666;
    font: normal 24px Arial;
    hyphens: none;
}
h2 {
    font: normal 20px Arial;
    hyphens: none;
    padding: 0 10px;
}
h2.promotion {
    color: red;
    font-weight: bold;
    text-align: center;
}
p:first-child {
    margin-top: 0; /* Prevents extending ('collapsing') margins. */
}
.textBlock {
    color: #666;
    text-align: justify;
}
.textBlock a {
    text-decoration: none;
    color: #666;
}
footer p {
    color: #999;
    text-align: center;
    font-size: .8em;
    margin: 0;
}
footer a {
    text-decoration: none;
    color: #999;
}
@media screen and (max-width: 1023px) {
    h1 {
        padding: 3em 10px .5em 10px; /* Pulls up the header. */
    }
    .textBlock {
        padding: 0 1em;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*\
+  5. MISCELLANEOUS                                                             +
\*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a {
    line-height: 0; /* Affects the positioning of the hyperlinked logo (= inline image) as well. */
}

/* PHOTO VIEWER (@keyframes code may not be nested!) */

#homeViewer {
    position: relative;
    width: 100%;
    aspect-ratio: 926/343; /* // Must match the size of the images! */
}
#homeViewer img {
    position: absolute;
    width: 100%;
    height: auto;
}
#homeViewer img:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 2.5s;
    animation-duration: 1.5s;
    z-index: 1;
}
#homeViewer img:nth-of-type(2) {
    z-index: 0;
}
#homeViewer img:nth-of-type(n+3) {
    display: none;
}
@keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
}