/*
Theme Name: Fredskov
Author: the FREDSKOV MEDIER
Author URI: http://fredskov.com/
Description: Custom theme for FREDSKOV-related pages.
Template: storefront
Version: 3.3.1
Text Domain: fredskov

/* 
OVERVIEW
1. HTML Defaults
	1.1 Block elements
		1.1.1 Spacing and alignment
		1.1.2 Styling
	1.2 Text elements
		1.2.1 Spacing and alignment
		1.2.2 Styling
	1.3 Form elements
		1.3.1 Spacing and alignment
		1.3.2 Styling
2. Animations
    2.1 Animation keyframes
    2.2 Animation classes
*/

/* --- 1. HTML DEFAULTS --- */

/* 1.1.1 Block spacing and alignment */
.wp-block-social-links {
    gap: 0.5rem;
}
.wp-block-image {
    width: 100%;
}
.site {
    overflow-x: initial;
}
.page-wrapper,
.edit-link,
.hentry .entry-header,
.hentry .entry-taxonomy,
.hentry #post-navigation,
.woocommerce .woocommerce-message,
.archive main,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
    max-width: 66.5em;
    float: none;
    margin: auto;
    padding: 0.5rem;
}
.site-header {
    padding: 0 0.5rem;
}
.site-content {
    min-height: 50vh;
    margin-bottom: 6rem;
}
.example-before {
    position: relative;
}
.example-before:after {
    content: '';
    display: block;
    height: 2rem;
    width: 2rem;
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    margin: auto;
}
#content .col-full {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding: 0;
}
.storefront-breadcrumb {
    margin: 0;
    padding: 0.5rem;
}
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li,
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    margin-right: 1rem;
}
.hentry #post-navigation {
    margin-bottom: 6rem;
}
.archive .hentry .entry-header,
.archive .hentry .entry-content,
.archive .hentry .entry-taxonomy {
    text-align: left;
}
.archive .hentry .wp-post-image {
    aspect-ratio: 1;
    float: left;
    margin: 0 0.5rem 0 0;
    max-width: 150px;
    object-fit: cover;
}
.archive .hentry .entry-content .excerpt {
    float: left;
    max-width: 26rem;
}
.single-product .back-to-product-wrapper {
    text-align: center;
}
.single-product div.product {
    margin-bottom: 6.5rem;
}
.woocommerce-customer-details > section {
    padding: 0 1rem;
}
.woocommerce-Tabs-panel--description figure {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.woocommerce-Tabs-panel--description figure img {
    width: calc((100% - 1rem) / 3);
    max-width: 33%;
    height: auto;
    object-fit: cover;
    margin: 0;
    float: none;
}
.woocommerce-Tabs-panel--description figure figcaption {
    width: 100%;
    margin-top: 0.5rem;
}
#footer-contact .wp-block-social-links {
    margin-top: 0;
}
@media (max-width: 768px) {
    body .is-layout-flex:not(.keep-layout,
    .wp-block-buttons) {
        display: block;
    }
    table.variations, table.variations tbody {
        display: flex;
        gap: 20px;
        width: 100%;
    }
    table.variations tr {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    table.variations th, table.variations td {
        display: block;
        width: 100%;
        padding: 0;
        text-align: left;
    }
    table.variations td select {
        width: 100%;
    }
}

/* 1.1.2 Block styling */
:where(.wp-block-social-links:not(.is-style-logos-only)) li {
    background-color: #c270a0 !important;
}
main section#intro {
    background: #fff url('img/skybox.png') no-repeat bottom / cover fixed;
}
.site-header {
    background-color: #20b2aa;
    background-image: radial-gradient(circle at bottom left, #0ea3a2 40%, #20b2aa 40%, #20b2aa 42%, #0ea3a2 42%, #0ea3a2 43%, #20b2aa 43%, #0ea3a2 43%, #0ea3a2 45%, #20b2aa 45%, #20b2aa 50%, #0ea3a2 50%, #0ea3a2 51%, #20b2aa 51%);
}
.storefront-handheld-footer-bar {
    background-color: #20b2aa;
    background-image: radial-gradient(circle at top left, #0ea3a2 40%, #20b2aa 40%, #20b2aa 42%, #0ea3a2 42%, #0ea3a2 43%, #20b2aa 43%, #0ea3a2 43%, #0ea3a2 45%, #20b2aa 45%, #20b2aa 50%, #0ea3a2 50%, #0ea3a2 51%, #20b2aa 51%);
}
#comments {
    background-color: #fff;
}
.framed img,
.example-before img,
.example-after img {
    border-radius: 2rem;
    overflow: hidden;
}
.example-before:after {
    background-image: url(img/arrow-down.png);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 1.2.1 Text spacing and alignment */
h1, h2, h3, h4, h5, h6, p {
    display: block;
    width: 100%;
}
h1 em { font-size: 1.4rem; }
h2:after {
    content: '';
    display: block;
    height: 1px;
    max-width: 12rem;
    border-bottom: 0.1rem solid;
    margin: 0.3rem auto 0.6rem 0;
}
h2.has-text-align-center:after,
h2.woocommerce-loop-product__title:after,
.hentry .entry-title:after {
    margin-left: auto;
    margin-right: auto;
}
.hentry .entry-header,
.hentry .excerpt,
.hentry .cat-links {
    text-align: center;
}
.single-product div.product p.price {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}
.single-product div.product .single_variation .price {
    font-size: 2rem;
}
@media (max-width: 768px) {
    .archive .hentry .entry-content .excerpt p {
        height: 5rem;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

/* 1.2.2 Text styling */
body, input, textarea {
    color: rgba(0, 0, 0, 0.8);
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    color: #008080;
}
h1 em {
    color: #d49dc3;
    font-style: normal;
}
h2, h3, h4, h5, h6 {
    color: #000;
}
h2:after {
    border-bottom-color: #8fc4dd;
}
.site-footer h2:after {
    border-bottom-color: #008080;
}
.woocommerce-custom-category-notice {
    color: #555;
    font-style: italic;
}

/* 1.3.1 Form spacing and alignment */
label span input {
	display: block;
}
input[type="text"], input[type="number"], input[type="email"], 
input[type="tel"], input[type="url"], input[type="password"], 
input[type="search"], textarea, .input-text {
    margin-bottom: 0.5rem;
    max-width: 100%;
}
.hentry .entry-content .wp-block-button .wp-block-button__link,
input[type="submit"],
.added_to_cart,
.wp-block-button__link:not(.has-background) {
    margin-top: 1rem;
}

/* 1.3.2 Form styling */
.hentry .entry-content .wp-block-button .wp-block-button__link,
button, .button, input[type="submit"],
.added_to_cart, .wp-block-button__link:not(.has-background) {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #544c70;
    color: #fff;
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}
.hentry .entry-content .wp-block-button .wp-block-button__link:hover,
button:hover, .button:hover, input[type="submit"]:hover {
    background-color: #3a314d;
}

/* --- 2. Animations --- */

/* 2.1 Animation Keyframes */
@keyframes enterDown {
    0% { top: -150vw; scale: 0.75; }
    80% { top: 0; scale: 0.8; }
    95% { scale: 1.05; }
    100% { scale: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    75% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes float {
    0%, 100% { left: 0; scale: 1; }
    50% { left: 0.3rem; scale: 1.1 1; }
}

/* 2.2 Animation classes */
.animate-enterDown { position: relative; animation: enterDown 1s forwards; }
.animate-fadeIn { animation: fadeIn 1.2s forwards; }
.animate-float { position: relative; animation: float 8s infinite ease-in-out; }



/* OLD MESS, unsorted */

/* 1.2 Visuals */
a:focus, input:focus, textarea:focus, button:focus { outline: 2px solid #d39dc1; }
.demo_store { background-color: #3a314d; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { background-color: #8cc63f; }
.woocommerce-result-count { color: #d49dc3; }


/* --- 2. SECTION SPECIFIC STYLING --- */

/* 2.1 Masthead & Navigation */
.site-header .site-branding { max-height: 2rem; }
.site-header .site-branding img { width: auto; max-height: 4rem; }
.storefront-primary-navigation a { color: #fff; }

.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    background-color: #20b2aa;
    background-image: radial-gradient(circle at bottom left, #0ea3a2 40%, #20b2aa 40%, #20b2aa 42%, #0ea3a2 42%, #0ea3a2 43%, #20b2aa 43%, #0ea3a2 43%, #0ea3a2 45%, #20b2aa 45%, #20b2aa 50%, #0ea3a2 50%, #0ea3a2 51%, #20b2aa 51%);
}

button.menu-toggle { padding: 1rem 1.25rem; }

/* Desktop Header Navigation */
@media screen and (min-width: 768px) {
    .site-header { background: #fff; background-image: none; padding-bottom: 1rem; }
    .main-navigation ul li:not(:last-child) { margin-right: 0.5rem; }
    .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { color: #3d7fa6; padding: 0.5rem; }
    .main-navigation ul.menu > li:hover > a { color: #20b2aa; }
    ul.menu li.current-menu-item > a { color: rgba(0, 0, 0, 0.8); }
    
    /* Bigger logo + menu (readability) */
    .site-header .site-branding { max-height: none; margin-bottom: 0.5rem; }
    .site-header .site-branding img { max-height: 6rem; }
    .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 0.6rem 1rem;
        border-radius: 2rem;
        transition: background-color 0.2s, color 0.2s;
    }
    .main-navigation ul.menu > li:hover > a { background-color: #e6f6f5; }
    .main-navigation ul.menu > li.current-menu-item > a { color: #fff; background-color: #20b2aa; }
    .main-navigation ul.menu ul li a { font-size: 1.05rem; font-weight: 600; }

    .site-header-cart .cart-contents,
    .site-header-cart .widget_shopping_cart,
    .site-header-cart .widget_shopping_cart .buttons,
    .site-header-cart .widget_shopping_cart .total { background-color: #8cc63f; }
    .site-header-cart .cart-contents { border-radius: 0.5rem; padding: 0.5rem; }
    .site-header-cart:hover .cart-contents { border-radius: 0.5rem 0.5rem 0 0; }
    a.cart-contents, .site-header-cart .widget_shopping_cart a, .site-header-cart > li > a,
    a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a { color: #000000cc }
    .added_to_cart, .site-header-cart .widget_shopping_cart a.button, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
        background-color: transparent;
        color: #000;
        border: 0.1rem solid #000;
    }
    .added_to_cart:hover, .site-header-cart .widget_shopping_cart a.button:hover, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
        background-color: transparent;
        color: #fff;
        border: 0.1rem solid #fff;
    }
    .site-header-cart .widget_shopping_cart .button.checkout.wc-forward {
        color: #fff;
        background-color: #544c70;
    }
    .site-header-cart .widget_shopping_cart .button.checkout.wc-forward:hover {
        color: #fff;
        background-color: #000;
    }
    a.remove::before {
        color: #544c70;
    }
}

/* 2.1.1 Contact email (header, contact page, footer) */
.fredskov-header-email { display: none; }
.fredskov-topbar-email {
    display: block;
    padding: 0.65rem 1rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background-color: #c270a0;
    text-decoration: none;
}
.fredskov-topbar-email:hover, .fredskov-topbar-email:focus { color: #fff; background-color: #a3558a; }
.fredskov-header-email::before, .fredskov-topbar-email::before, .fredskov-email-box a::before, .fredskov-footer-email a::before { content: '\2709\00a0\00a0'; }
.handheld-navigation ul.menu li a { font-size: 1.2rem; font-weight: 700; padding: 0.9rem 1rem; }

@media screen and (min-width: 768px) {
    .fredskov-topbar-email { display: none; }
    /* Top header row: logo left, search + email right, vertically centred */
    .site-header > .col-full { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
    .site-header > .col-full::before, .site-header > .col-full::after { display: none; }
    .site-header > .col-full .site-branding { float: none; width: auto; margin: 0 auto 0 0; }
    .site-header > .col-full .site-search { float: none; width: 16rem; margin: 0; order: 2; }
    .fredskov-header-email {
        display: block;
        order: 3;
        float: none;
        margin: 0;
        text-align: center;
        font-weight: 700;
        color: #fff;
        border-radius: 2rem;
        text-decoration: none;
        padding: 0.7rem 1.4rem;
        font-size: 1.1rem;
        background-color: #20b2aa;
        box-shadow: 0 0.25rem 0.75rem rgba(32, 178, 170, 0.35);
        word-break: normal;
    }
    .fredskov-header-email:hover, .fredskov-header-email:focus { background-color: #c270a0; }
}

.fredskov-email-box {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem;
    text-align: center;
    background-color: #fff9da;
    border: 0.2rem solid #20b2aa;
    border-radius: 1.5rem;
    color: #333;
}
.fredskov-email-box p { margin-bottom: 0.75rem; font-size: 1.15rem; }
.fredskov-email-box a {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background-color: #20b2aa;
    border-radius: 2rem;
    text-decoration: none;
}
.fredskov-email-box a:hover, .fredskov-email-box a:focus { color: #fff; background-color: #c270a0; }
.fredskov-email-box a, .fredskov-footer-email a, .fredskov-header-email, .fredskov-topbar-email { text-decoration: none !important; }
.fredskov-footer-email a { font-size: 1.05rem; font-weight: 700; color: #3a314d; text-decoration: none; }
.fredskov-footer-email a:hover, .fredskov-footer-email a:focus { color: #fff; }

/* 2.2 Content Area */
.content-area, .site-main { margin-bottom: -3rem; }
main section { background-color: #fff; padding: 2rem 0; }
main section:nth-child(even):not(.woocommerce-customer-details) { background-color: #5b95b1; color: rgba(255, 255, 255, 0.8); }
main section:nth-child(even):not(.woocommerce-customer-details) h1 { color: #fff9da; }
main section:nth-child(even):not(.woocommerce-customer-details) h2, 
main section:nth-child(even):not(.woocommerce-customer-details) h3, 
main section:nth-child(even):not(.woocommerce-customer-details) h4, 
main section:nth-child(even):not(.woocommerce-customer-details) h5, 
main section:nth-child(even):not(.woocommerce-customer-details) h6, 
main section:nth-child(even):not(.woocommerce-customer-details) b, 
main section:nth-child(even):not(.woocommerce-customer-details) strong { color: #fff; }
main section:nth-child(even):not(.woocommerce-customer-details) p > a { color: #fff9da; }
main section:nth-child(even):not(.woocommerce-customer-details) p > a:hover { color: #f2d4e9; }
section:nth-child(even):not(.woocommerce-customer-details) .woocommerce-tabs ul.tabs li.active a,
section:nth-child(even):not(.woocommerce-customer-details) ul.products li.product .price,
section:nth-child(even):not(.woocommerce-customer-details) onsale, .wc-block-grid__product-onsale,
section:nth-child(even):not(.woocommerce-customer-details) .widget_search form:before,
section:nth-child(even):not(.woocommerce-customer-details) .widget_product_search form:before {
    color: rgba(255, 255, 255, 0.8);
}
section:last-child {
    padding-bottom: 6rem;
}
.storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content .woocommerce-products-header {
    padding-bottom: 0;
}

.wc-tabs-wrapper {
    margin-bottom: 6.5rem;
}

/* Wide Alignment Rules */
@media (min-width: 66.5em) {
    .storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
    .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
        margin-left: initial; margin-right: initial; padding-left: 0; padding-right: 0;
    }
}

/* 2.3 Colophon (Footer) */
.site-footer {
    background-color: #8cc63f;
    color: rgba(0, 0, 0, 0.8);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;
}

.site-footer:before {
    content: '';
    display: block;
    position: absolute;
    top: -3.5rem; left: 0; right: 0;
    height: 6rem;
    background: url('img/flowers-and-butterflies.png') no-repeat center / contain;
    overflow: hidden;
}

.storefront-handheld-footer-bar { background-color: #fff; }

@media (max-width: 768px) {
    .storefront-handheld-footer-bar ul li.search .site-search { bottom: -4rem; }
}