/*
Theme Name: Number Three One - Child
Theme URI: https://standoutmedia.dk/
Author: Standoutmedia A/S
Author URI: https://standoutmedia.dk/
Description: Et helt specielt Standoutmedia Tema
Template: number-three-one
Text Domain: number-three-child
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== CSS Variables ===== */

:root {
    /* Font sizes */
    --h1: 88px;
    --h2: 48px;
    --h3: 25px;
    --h4: 22px;
    --h5: 16px;
    --h6: 14px;
    --p: 18px;

    /* Gaps */
    --gap-l: 90px;
    --gap-m: 40px;
    --gap-s: 20px;

    /* font families */
    --h-fam: "Gelasio", sans-serif;
    --p-fam: "roboto", sans-serif;
    --btn-fam: var(--p-fam);

    /* colors */
    --color-1: #fca036;
    --color-2: #f5af60;
    --color-bg: #022b3a;
    --color-text: #fff;
    --color-dark: #222;
    --color-blue: #022b3a;
    --color-orange: #fca036;
    --color-overlay: rgba(2, 43, 58, 0.8);
    /* Mørkere blå nuance */

    /* transitions */
    --transition: 0.175s ease-out;

    /* Margin on the right and left of the main content sections (change 0 to 1 to match template distances)*/
    --content-margin: calc(0 * var(--gap-m));
    --slider-text-width: 712px;

    /* Theme defined variables from PHP */
    --content-width: initial;
    --sidebar-width: initial;
    /* END Theme defined variables from PHP */

    --border-radius: 19px;
}

/* ===== FIXES ===== */
.section-wrap.has-background .section {
    padding-block: 0;
}

main#main-content.site-main {
    background-color: var(--color-bg, #022b3a);
}

.post-password-required {
    padding: calc(var(--gap-l) - 10px) 0;
}

/* ===== TEXT ===== */
.h1,
h1 {
    color: var(--color-white, #fff);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 105.6px */
}

.h2,
h2 {
    color: var(--color-white, #fff);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 57.6px */
}

p {
    color: var(--color-white, #fff);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    /* 27px */
}

.subtitle {
    color: var(--color-orange, #fca036);
    font-family: var(--p-fam);
    font-size: calc(var(--p) + 2px);
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    /* 24px */
    letter-spacing: 1.92px;
    margin-bottom: calc(var(--gap-s) - 4px);
}

/* ===== BUTTONS ===== */
button,
.stom-button a,
input[type="button"],
input[type="reset"],
input[type="submit"],
.gform_wrapper .gform_footer input[type="submit"] {
    background-color: transparent;
    border: 1px solid var(--color-white, #fff);
    border-radius: var(--border-radius);
    padding: calc(var(--gap-s) - 8px) calc(var(--gap-l) - 16px);
    font-size: calc(var(--p) - 2px);
}

button:focus,
.stom-button a:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
.gform_wrapper .gform_footer input[type="submit"]:focus,
button:hover,
.stom-button a:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
    background-color: var(--color-white, #fff);
    color: var(--color-blue, #022b3a);
    border: 1px solid var(--color-white, #fff);
}

.small-button a {
    padding: calc(var(--gap-s) - 8px) calc(var(--gap-s) + 4px);
}

.stom-button.header-button a {
    background-color: var(--color-bg, #022b3a);
}

/* ===== HERO ===== */
.page-slider-section .slider-text {
    background: linear-gradient(0deg,
            rgba(2, 43, 58, 0.14) 0%,
            rgba(2, 43, 58, 0.14) 100%),
        rgba(22, 62, 80, 0.5);
    background-blend-mode: normal, multiply, normal;
    background-size: 150.833% 214.545%;
    background-position: -186.093px -485.322px;
    background-repeat: no-repeat;
}

.page-slider-section .slider-text .stom-button:first-of-type a {
    margin-right: calc(var(--gap-s) - 4px);
    margin-bottom: calc(var(--gap-s) - 4px);
}

/* ===== SEKTIONER ===== */
main .section-wrap~.section-wrap,
main+.section-wrap,
main+#colophon,
.section-wrap~.page-slider-section,
.page-slider-section~.page-slider-section,
.page-slider-section~.section-wrap,
.page-slider-section~main,
#content+.page-slider-section,
#content+.stomFEE-edit-cta+.page-slider-section,
#content+.section-wrap,
#content+.stomFEE-edit-cta+.section-wrap {
    margin-top: 0;
}

.section-wrap:not(footer#colophon .section-wrap,
    header#masthead .section-wrap) {
    padding: var(--gap-l) 0;
}

.stom-max-text,
.stom-small.small-center,
.title-and-text p,
.title-and-text div.subtitle,
.title-and-text h2,
.title-and-text h3,
.title-and-text h4,
.title-and-text h5,
.title-and-text h6,
.title-and-text span,
.title-and-text .h1,
.title-and-text .h2,
.title-and-text .h3,
.title-and-text .h4,
.title-and-text .h5,
.title-and-text .h6 {
    max-width: 850px;
    width: 100%;
}

.section-wrap.background-overlay {
    background: linear-gradient(0deg,
            rgba(2, 43, 58, 0.7) 0%,
            rgba(2, 43, 58, 0.7) 100%),
        var(--color-overlay, lightgray);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* .section-wrap.background-overlay[style*="background-image"] {
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  } */
/* .section-wrap.background-overlay {
  background: linear-gradient(
      0deg,
      rgba(2, 43, 58, 0.7) 0%,
      rgba(2, 43, 58, 0.7) 100%
    ),
    lightgray;
  background-blend-mode: normal;
  background-size: 119.851% 165.154%;
  background-position: -375.173px -602px;
  background-repeat: no-repeat;
} */

/* ===== BILLEDE SEKTION ===== */

/* ===== NYHEDER SEKTION ===== */
.stom-posts {
    display: flex;
    flex-wrap: wrap;
    /* Tillader flere rækker, hvis der ikke er plads */
    gap: var(--gap-m);
    /* Afstand mellem elementerne */
    justify-content: space-between;
    /* Fordeler pladsen jævnt */
}

.stom-post-wrapper {
    flex: 1 1 calc(33.333% - 40px);
    /* Tre kolonner med plads til gap */
    max-width: calc(33.333% - 40px);
    /* Sikrer, at de ikke overstiger bredden */
    box-sizing: border-box;
    /* Inkluder padding og border i bredden */
}

.stom-post-thumb {
    width: 100%;
    /* Fylder hele wrapperens bredde */
    height: 300px;
    /* Ensartet højde for alle billeder */
    overflow: hidden;
    /* Skjuler overskydende billedindhold */
}

.stom-post-thumb img {
    width: 100%;
    /* Billeder fylder hele wrapperens bredde */
    height: 100%;
    /* Fylder hele højden af containeren */
    object-fit: cover;
    /* Sikrer, at billedet fylder containeren uden at forvrænge proportionerne */
}

.stom-post-title h5,
.stom-post-title {
    color: var(--color-white, #fff);
    font-family: var(--h-fam);
    font-size: calc(var(--h4) + 2px);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 33.6px */
    margin-bottom: 0;
}

.stom-post-category a {
    padding: 4px 8px;
    background-color: var(--color-black, #000);
    text-decoration: none;
    color: var(--color-white, #fff);
    font-family: var(--p-fam);
    font-size: var(--h6);
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 21px */
}

.stom-post-content {
    color: var(--color-white, #fff);
    font-family: var(--p-fam);
    font-size: var(--h5);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

/* Updated CSS to target the last character of the 'Læs mere' link directly */
.stom-post-link {
    display: inline-flex;
    /* Enables flexbox for the link */
    align-items: center;
    /* Vertically centers the content */
    gap: 3px;
    color: var(--color-white, #fff);
    font-family: var(--p-fam);
    font-size: var(--h5);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
}

.stom-post-link::after {
    content: "›";
    /* Adds the arrow directly */
    color: var(--color-orange, #fca036);
    /* Sets the arrow color to orange */
    font-size: 32px;
    /* Adjusts the size of the arrow */
    display: inline-block;
    line-height: 0;
    /* Ensures vertical centering with text */
    margin-top: -5px;
    /* Fine-tune the vertical positioning */
}

.stom-post-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}

.section-wrap.nyheder-sektion .section .stom-posts {
    margin: calc(var(--gap-m) + 24px) 0;
}

/* ===== INFORMATION SEKTIONER ===== */
/* IKKE BRUGE .section-wrap.information {
  background: linear-gradient(0deg, rgba(2, 43, 58, 0.70) 0%, rgba(2, 43, 58, 0.70) 100%), url("https://systom.dk/kunder/roskildevinterbadere.dk/wp-content/uploads/2025/04/3b11d791aa37333112e4c682ec6a2f66-scaled.jpg") lightgray 50% / cover no-repeat;
} */
.section-wrap.information .section .grid-elements .grid-element:not(.information-header) {
    border: 1px solid var(--color-white, #fff);
    padding: calc(var(--gap-s) + 4px);
}

.section-wrap.information .section .grid-elements .grid-element:not(.information-header) div:first-of-type {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-s) - 4px);
    justify-content: flex-start;
}

.section-wrap.information .section .grid-elements .grid-element:not(.information-header) .information-title {
    color: var(--color-white, #fff);
    font-family: var(--h-fam);
    font-size: calc(var(--h4) + 2px);
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 31.2px */
}

.section-wrap.information .section .grid-elements .grid-element:not(.information-header) .information-desc {
    color: var(--color-white, #fff);
    font-family: var(--p-fam);
    font-size: var(--h5);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.section-wrap.information .section .grid-elements .grid-element:not(.information-header) div svg {
    width: 39px;
    height: 39px;
    aspect-ratio: 1/1;
    color: var(--color-white, #fff);
}

/* ===== HEADER ===== */
/* ===== HEADER ===== */
header#masthead,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-active #masthead,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-resize #masthead {
    border-bottom: 1px solid var(--color-white, #fff);
    background: rgba(32, 52, 60, 0.05) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    height: auto;
    /* Allow height to be determined by content */
}

/* Ensure the header inner elements have proper spacing */
header#masthead .header-inner,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-active #masthead .header-inner,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-resize #masthead .header-inner {
    display: flex;
    align-items: center;
}

/* Make sure the logo maintains its dimensions */
header#masthead .site-branding img,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-active #masthead .site-branding img,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-resize #masthead .site-branding img {
    max-height: none;
    /* Remove any max height restrictions */
    height: auto;
}

/* Adjust the slider's margin to account for dynamic header height */
.page-slider-section {
    margin-top: -120px !important;
    padding-top: 0;
    position: relative;
    z-index: 0;
}

body {
    padding-top: 0 !important;
}

.page-slider-section .slider-text .slider-text-inner {
    padding-top: calc(var(--gap-l) + 30px);
}

header#masthead a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-active #masthead a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-resize #masthead a {
    color: var(--color-white, #fff) !important;
}

header#masthead.scrolled,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-active #masthead.scrolled,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .header-sticky-resize #masthead.scrolled {
    background: rgba(32, 52, 60, 0.8) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.menu-item.menu-item-has-children svg {
    color: var(--color-orange);
}

header .main-navigation ul.menu ul {
    background: var(--color-bg, #022b3a);
    padding: calc(var(--gap-s) - 4px) calc(var(--gap-s) - 8px);
}

/* ===== FOOTER ===== */

.footer-setting-02 .footer-widget-area .section {
    padding: calc(var(--gap-l) - 10px) 0 var(--gap-m);
}

#colophon.footer-setting-02,
#colophon.footer-setting-03 {
    background: var(--color-bg, #022b3a);
    border-top: 1px solid var(--color-white, #fff);
}

#colophon .footer-widgets.widgets-1 .widget-title {
    color: var(--Color, #fff);
    font-family: var(--h-fam);
    font-size: calc(var(--h4) + 2px);
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 36px */
    text-transform: uppercase;
}

#colophon .footer-widgets.widgets-1 .textwidget strong {
    font-weight: 600;
}


#colophon .footer-widgets.widgets-1 .textwidget .socials-wrapper svg {
    width: 24px;
    height: 24px;
    color: var(--color-white, #fff);
}

#colophon .footer-widgets.widgets-1 .textwidget .socials-wrapper svg:hover {
    width: 24px;
    height: 24px;
    color: var(--color-orange, #fff);
}

#colophon .grid-elements .grid-element:has(.footer-widgets.widgets-3) {
    align-self: flex-end;
}

#colophon .grid-elements .grid-element:has(.footer-widgets.widgets-2) {
    display: flex;
    justify-content: center;
}

#colophon .footer-widgets.widgets-2 {
    text-align: left;
    width: fit-content;
}

#colophon .footer-widgets.widgets-2 .textwidget ul {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
}


#colophon .footer-widgets.widgets-3 .textwidget .stom-button {
    display: block;
    /* Makes each button take full width of container */
    margin-bottom: 16px;
    width: 220px;
    /* Fixed width for the button container */
    margin-left: auto;
    /* Push to right side */
}

#colophon .footer-widgets.widgets-3 .textwidget .stom-button a {
    width: 100%;
    /* Makes the link fill the button container */
    display: inline-block;
    /* Allows width property to take effect */
    text-align: center;
    /* Centers the text inside each button */
    box-sizing: border-box;
    /* Ensures padding doesn't affect overall width */
    min-width: unset;
    /* Remove previous min-width setting */
    padding-left: 0;
    /* Remove horizontal padding */
    padding-right: 0;
    /* Remove horizontal padding */
}



/* Right-align the button container but keep buttons full-width */
#colophon .footer-widgets.widgets-3 .textwidget p {
    text-align: right;
    width: 100%;
    margin: 0;
    /* Remove default paragraph margins */
}

#colophon .footer-widgets.widgets-3 .textwidget p br {
    display: none;
}

#colophon .footer-widgets.widgets-footer_widgets_site_info {
    display: flex;
    justify-content: space-between;
}

#colophon .widget+.widget {
    margin-top: 0;
}

#colophon .copyright {
    font-weight: 400;
    font-family: var(--p-fam);

}

/* ===== GALLERY ===== */
.gallery {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ===== BESTYRELSEN SEKTION ===== */
.stom-medarbejdere {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns on desktop */
    gap: calc(var(--gap-m) - 10px);
    width: 100%;
    margin: 0 auto;
}

.stom-medarbejder-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 100%;
    /* Fill available space */
}

.stom-medarbejder-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stom_medarbejder_overlay_section {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.stom_medarbejder_inner_section {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.stom-medarbejder-thumb {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 120%;
    /* Consistent aspect ratio */
}

.stom-medarbejder-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    /* Focus on faces */
}

.stom_medarbejder-detaljer {
    padding: var(--gap-s);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stom-medarbejder-title {
    font-family: var(--h-fam);
    font-size: var(--h4);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 5px;
}

.stom-medarbejder-stilling {
    font-family: var(--p-fam);
    font-size: calc(var(--p) - 2px);
    color: var(--color-orange);
    margin-bottom: 5px;
}

.stom-medarbejder-email a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition);
    font-size: calc(var(--p) - 3px);
    word-break: break-word;
}

.stom-medarbejder-email a:hover {
    color: var(--color-orange);
}

.stom-medarbejder-customfield {
    color: var(--color-white);
    opacity: 0.8;
    font-size: calc(var(--p) - 3px);
    word-break: break-word;
}

/* Fix for the PHP warning showing in HTML */
.stom-medarbejder-wrapper br,
.stom-medarbejder-wrapper b {
    display: none;
}

.stom-medarbejdere .stom-medarbejder-wrapper {
    width: 100%;
}

/* ===== END CSS Variables ===== */

/*======================================================================//
// style.css                                                            //
//======================================================================*/

/* style goes here */

/*======================================================================//
// END style.css                                                        //
//======================================================================*/

/*======================================================================//
// woocommerce.css                                                      //
//======================================================================*/

/* woocommerce style goes here */

/*======================================================================//
// END woocommerce.css                                                  //
//======================================================================*/

#number-three-sticky-mobile-cta .cta-container .stom-button a {
    border-radius: 0;
}

#number-three-sticky-mobile-cta .cta-container .stom-button:not(:last-child) a {
    border-right: 1px solid white;
}

body:not(.stom-gform-legacy) .gform_wrapper .ginput_container input,
body:not(.stom-gform-legacy) .gform_wrapper .ginput_container select,
body:not(.stom-gform-legacy) .gform_wrapper .ginput_container textarea {
    color: black !important;
}



.page-template-page-blog.page-template-page-blog-php.page-id-1095 .page-slider-section .image-aligner img {
    max-height: 500px;
}

.posts-archive-layout-2.posts-archive #primary article .post-content-wrapper{
    padding: var(--gap-m);
    background-color: #031c26;
}

body.posts-archive-layout-2.posts-archive #primary {
    margin-bottom: 0;
    padding: var(--gap-m);
    margin-top: 0;
}

body.posts-archive .header-divider {
    display: none;
}

body.single.single-post h1 {
    font-size: calc(var(--h1) - 10px);
}
body.single.single-post .page-slider-section .slider-text-inner .slider-text-inner-wrapper {
    max-width: 1200px;
}
body.single.single-post .page-slider-section .image-aligner img {
    max-height: 600px;
}

body.single.single-post header.entry-header {
    padding-top: var(--gap-m);
}