/* ============================================================
   GALLERY PAGE
   COMMON HEADER / NAVBAR / FOOTER PROTECTION
   ============================================================ */

/*
   Bootstrap 5.3.3 is loaded by the Gallery page (gallery.php /
   gallery_details.php) and can override the site's older Header /
   Navbar / Footer CSS, because its <link> tag sits later in the
   document than header.php's and navbar.php's own <style> blocks,
   so it wins ties on selectors of equal specificity (bare `a`,
   bare `.container-fluid`, bare heading tags, etc).

   FIX NOTE: these rules used to be scoped with
   "body.gallery-page" / "body.gallery-details-page" prefixes.
   Those classes are never actually present on <body> -- header.php
   opens <body class=""> before this file's page content ever runs,
   and header.php is intentionally not modified -- so every rule in
   this file was previously being silently ignored by the browser.

   This file is ONLY <link>-ed from gallery.php and
   gallery_details.php, so plain #header / .site-footer selectors
   below are already correctly scoped to just those two pages
   without needing any body class at all.

   These rules do NOT modify Gallery content, and only restore
   properties the shared Header/Navbar/Footer already define
   themselves.
*/


/* ============================================================
   BODY BASELINE
   ============================================================ */

/*
   FIX: navbar.php's own CSS restores headings to line-height
   1.42857143 -- the exact Bootstrap 3 default (20px / 14px) --
   which is a strong fingerprint that the whole site's original
   CSS was built against Bootstrap 3's body baseline:

       body { font-size:14px; line-height:1.42857143; color:#333; }

   Bootstrap 5.3.3 (loaded only on Gallery pages) sets its own
   bare "body" rule instead:

       body { font-size:1rem; line-height:1.5; color:#212529; }

   Both are bare "body" selectors of equal specificity, so it
   comes down to load order. Bootstrap 5.3.3's <link> sits after
   the site's own base stylesheet, so on Gallery pages it wins --
   stretching line-height/spacing for every element (header,
   navbar, footer text) that doesn't set its own explicit
   line-height. This restores the original baseline. Since this
   file is only ever loaded on the two Gallery pages, and loads
   after Bootstrap 5.3.3's <link>, a plain "body" selector here
   is safely scoped to Gallery pages and reliably wins the tie.
*/
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
}


/* ============================================================
   BOOTSTRAP UTILITY CLASS COLLISIONS
   ============================================================ */

/*
   FIX: header.php's markup contains several class names that are
   Bootstrap 4/5 utility classes (mt-5, me-1, p-0, p-2, mx-auto,
   m-0) -- e.g. <ul class="list-inline font-13 sm-text-center
   mt-5">. The site's own Bootstrap (Bootstrap 3) has no spacing
   utility classes at all, so on every normal page these class
   names have always been inert / done nothing.

   Bootstrap 5.3.3 (loaded only on Gallery pages) DOES define
   them, e.g. ".mt-5{margin-top:3rem!important}" -- 48px of
   margin, forced with !important, suddenly switching on for the
   very first time, only on Gallery pages, on elements that were
   never designed to have it. This is what was pushing the header
   top-bar down/taller than the other pages.

   These restore each one back to the "does nothing" behavior it
   has always had everywhere else. Matching !important is
   required to beat Bootstrap's own !important utility rules;
   the #header prefix gives higher specificity so it wins
   regardless of link order.
*/
#header .mt-5 { margin-top: 0 !important; }
#header .me-1 { margin-right: 0 !important; }
#header .m-0 { margin: 0 !important; }
#header .p-0 { padding: 0 !important; }
#header .p-2 { padding: 6px 8px !important; }
#header .mx-auto { margin-left: auto !important; margin-right: auto !important; }


/* ============================================================
   HEADER
   ============================================================ */

#header a {
    color: #ffffff;
    text-decoration: none;
}


/* Keep the original header container behaviour */
#header .header-nav-wrapper .container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}


/* Restore original row spacing */
#header .row {
    margin-left: -15px;
    margin-right: -15px;
}


/* Restore heading behaviour used by the common header */
#header h3,
#header h4,
#header h5,
#header h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.42857143;
}


/* ============================================================
   NAVBAR
   ============================================================ */

/* Prevent Bootstrap from changing menu link appearance */
#header .menuzord-menu > li > a {
    text-decoration: none;
}


/* Preserve menu list behaviour */
#header .menuzord-menu {
    list-style: none;
}


/* Preserve menu item behaviour */
#header .menuzord-menu > li {
    list-style: none;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    font-family: Arial, Helvetica, sans-serif;
}

.site-footer a {
    text-decoration: none;
}


/* Footer container */
.site-footer .sf-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* Footer grid */
.site-footer .sf-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr;
    column-gap: 55px;
    align-items: start;
}


/* Footer headings */
.site-footer .sf-title {
    color: #ffffff;
    text-align: left;
}


/* Footer links list */
.site-footer .sf-links {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Footer link items */
.site-footer .sf-links li {
    text-align: left;
}


/* Footer contact list */
.site-footer .sf-contact-list {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
}


/* Footer social icons */
.site-footer .sf-social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 12px 0 0;
}

/*
   FIX: Gallery's own Font Awesome 6 <link> defines a bare ".fa"
   rule (font-family: "Font Awesome 6 Free"; font-weight:900) that
   matches the <i class="fa fa-facebook"> icons DIRECTLY. A rule
   that matches an element directly always beats a font-family the
   element only *inherits* from its parent <a> (which is how
   footer.php normally sets the Brands font) -- regardless of
   specificity. That silently swaps the icons to the Solid font on
   Gallery pages only, and the brand glyphs don't exist there, so
   they render blank. Setting the font-family directly on the <i>
   itself (not just the parent) restores it.
*/
.site-footer .sf-social .fa-facebook,
.site-footer .sf-social .fa-instagram,
.site-footer .sf-social .fa-youtube {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}


/* Footer logo */
.site-footer .sf-logo {
    max-width: none;
}


/* Footer bottom */
.sf-footer-bottom .sf-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}


.sf-footer-bottom .sf-copy,
.sf-footer-bottom .sf-dev {
    margin-top: 0;
    margin-bottom: 0;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1199px) {

    .site-footer .sf-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
        column-gap: 28px;
    }

    .site-footer .sf-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* ============================================================
   TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 991px) {

    .site-footer .sf-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
        column-gap: 45px;
    }

    .site-footer .sf-col:first-child {
        grid-column: span 2;
    }

    .sf-footer-bottom .sf-container {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   MOBILE/* ============================================================
   GALLERY PAGE
   COMMON HEADER / NAVBAR / FOOTER PROTECTION
   ============================================================ */

/*
   Bootstrap 5.3.3 is loaded by the Gallery page (gallery.php /
   gallery_details.php) and can override the site's older Header /
   Navbar / Footer CSS, because its <link> tag sits later in the
   document than header.php's and navbar.php's own <style> blocks,
   so it wins ties on selectors of equal specificity (bare `a`,
   bare `.container-fluid`, bare heading tags, etc).

   FIX NOTE: these rules used to be scoped with
   "body.gallery-page" / "body.gallery-details-page" prefixes.
   Those classes are never actually present on <body> -- header.php
   opens <body class=""> before this file's page content ever runs,
   and header.php is intentionally not modified -- so every rule in
   this file was previously being silently ignored by the browser.

   This file is ONLY <link>-ed from gallery.php and
   gallery_details.php, so plain #header / .site-footer selectors
   below are already correctly scoped to just those two pages
   without needing any body class at all.

   These rules do NOT modify Gallery content, and only restore
   properties the shared Header/Navbar/Footer already define
   themselves.
*/


/* ============================================================
   BODY BASELINE
   ============================================================ */

/*
   FIX: navbar.php's own CSS restores headings to line-height
   1.42857143 -- the exact Bootstrap 3 default (20px / 14px) --
   which is a strong fingerprint that the whole site's original
   CSS was built against Bootstrap 3's body baseline:

       body { font-size:14px; line-height:1.42857143; color:#333; }

   Bootstrap 5.3.3 (loaded only on Gallery pages) sets its own
   bare "body" rule instead:

       body { font-size:1rem; line-height:1.5; color:#212529; }

   Both are bare "body" selectors of equal specificity, so it
   comes down to load order. Bootstrap 5.3.3's <link> sits after
   the site's own base stylesheet, so on Gallery pages it wins --
   stretching line-height/spacing for every element (header,
   navbar, footer text) that doesn't set its own explicit
   line-height. This restores the original baseline. Since this
   file is only ever loaded on the two Gallery pages, and loads
   after Bootstrap 5.3.3's <link>, a plain "body" selector here
   is safely scoped to Gallery pages and reliably wins the tie.
*/
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
}


/* ============================================================
   BOOTSTRAP UTILITY CLASS COLLISIONS
   ============================================================ */

/*
   FIX: header.php's markup contains several class names that are
   Bootstrap 4/5 utility classes (mt-5, me-1, p-0, p-2, mx-auto,
   m-0) -- e.g. <ul class="list-inline font-13 sm-text-center
   mt-5">. The site's own Bootstrap (Bootstrap 3) has no spacing
   utility classes at all, so on every normal page these class
   names have always been inert / done nothing.

   Bootstrap 5.3.3 (loaded only on Gallery pages) DOES define
   them, e.g. ".mt-5{margin-top:3rem!important}" -- 48px of
   margin, forced with !important, suddenly switching on for the
   very first time, only on Gallery pages, on elements that were
   never designed to have it. This is what was pushing the header
   top-bar down/taller than the other pages.

   These restore each one back to the "does nothing" behavior it
   has always had everywhere else. Matching !important is
   required to beat Bootstrap's own !important utility rules;
   the #header prefix gives higher specificity so it wins
   regardless of link order.
*/
#header .mt-5 { margin-top: 0 !important; }
#header .me-1 { margin-right: 0 !important; }
#header .m-0 { margin: 0 !important; }
#header .p-0 { padding: 0 !important; }
#header .p-2 { padding: 6px 8px !important; }
#header .mx-auto { margin-left: auto !important; margin-right: auto !important; }


/* ============================================================
   HEADER
   ============================================================ */

#header a {
    color: #ffffff;
    text-decoration: none;
}


/* Keep the original header container behaviour */
#header .header-nav-wrapper .container-fluid {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}


/* Restore original row spacing */
#header .row {
    margin-left: -15px;
    margin-right: -15px;
}


/* Restore heading behaviour used by the common header */
#header h3,
#header h4,
#header h5,
#header h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.42857143;
}


/* ============================================================
   NAVBAR
   ============================================================ */

/* Prevent Bootstrap from changing menu link appearance */
#header .menuzord-menu > li > a {
    text-decoration: none;
}


/* Preserve menu list behaviour */
#header .menuzord-menu {
    list-style: none;
}


/* Preserve menu item behaviour */
#header .menuzord-menu > li {
    list-style: none;
}


/*
   FIX: On hover/active, the menu item's background switches to
   white (this already worked correctly), but the anchor text
   stays at the header's default white (#header a { color:#fff })
   inherited from the rule above. That makes the label invisible
   -- white text on a white hover background -- even though the
   icon still shows. Force a dark, readable color on hover/active
   so the label matches the rest of the site's nav hover state.
*/
#header .menuzord-menu > li:hover > a,
#header .menuzord-menu > li > a:hover,
#header .menuzord-menu > li.active > a {
    color: #333333 !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    font-family: Arial, Helvetica, sans-serif;
}

.site-footer a {
    text-decoration: none;
}


/* Footer container */
.site-footer .sf-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}


/* Footer grid */
.site-footer .sf-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr;
    column-gap: 55px;
    align-items: start;
}


/* Footer headings */
.site-footer .sf-title {
    color: #ffffff;
    text-align: left;
}


/* Footer links list */
.site-footer .sf-links {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Footer link items */
.site-footer .sf-links li {
    text-align: left;
}


/* Footer contact list */
.site-footer .sf-contact-list {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
}


/* Footer social icons */
.site-footer .sf-social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 12px 0 0;
}

/*
   FIX: Gallery's own Font Awesome 6 <link> defines a bare ".fa"
   rule (font-family: "Font Awesome 6 Free"; font-weight:900) that
   matches the <i class="fa fa-facebook"> icons DIRECTLY. A rule
   that matches an element directly always beats a font-family the
   element only *inherits* from its parent <a> (which is how
   footer.php normally sets the Brands font) -- regardless of
   specificity. That silently swaps the icons to the Solid font on
   Gallery pages only, and the brand glyphs don't exist there, so
   they render blank. Setting the font-family directly on the <i>
   itself (not just the parent) restores it.
*/
.site-footer .sf-social .fa-facebook,
.site-footer .sf-social .fa-instagram,
.site-footer .sf-social .fa-youtube {
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}


/* Footer logo */
.site-footer .sf-logo {
    max-width: none;
}


/* Footer bottom */
.sf-footer-bottom .sf-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}


.sf-footer-bottom .sf-copy,
.sf-footer-bottom .sf-dev {
    margin-top: 0;
    margin-bottom: 0;
}


/*
   FIX: the "Designed & Developed by Sunraise Solutions" credit is
   an <a> link. .site-footer a above only strips the underline --
   it never sets a color -- so on Gallery pages the browser's
   default link blue shows through instead of the site's white
   footer text. Force it to white to match the rest of the footer.
*/
.sf-footer-bottom .sf-dev a {
    color: #ffffff !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1199px) {

    .site-footer .sf-grid {
        grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
        column-gap: 28px;
    }

    .site-footer .sf-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* ============================================================
   TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 991px) {

    .site-footer .sf-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
        column-gap: 45px;
    }

    .site-footer .sf-col:first-child {
        grid-column: span 2;
    }

    .sf-footer-bottom .sf-container {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 575px) {

    .site-footer .sf-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer .sf-grid {
        grid-template-columns: 1fr;
        row-gap: 35px;
    }

    .site-footer .sf-col:first-child {
        grid-column: span 1;
    }

    .sf-footer-bottom .sf-copy,
    .sf-footer-bottom .sf-dev {
        font-size: 12px;
    }
}
   ============================================================ */

@media (max-width: 575px) {

    .site-footer .sf-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer .sf-grid {
        grid-template-columns: 1fr;
        row-gap: 35px;
    }

    .site-footer .sf-col:first-child {
        grid-column: span 1;
    }

    .sf-footer-bottom .sf-copy,
    .sf-footer-bottom .sf-dev {
        font-size: 12px;
    }
}