/*
Theme Name:   Storefront Child
Theme URI:    https://woocommerce.com/products/storefront/
Description:  Storefront Child Theme - Custom modifications for header layout
Author:       Custom
Author URI:   
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  storefront-child
*/

/* Font Face Declarations */
@font-face {
    font-family: 'Lato';
    src: url('fonts/lato/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Praho';
    src: url('fonts/praho/Praho-Black.woff') format('woff'),
         url('fonts/praho/Praho-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Apply Lato as default font - override Storefront's Source Sans Pro */
body,
html,
p,
div,
span,
a,
button,
input,
textarea,
select,
li,
td,
th {
    font-family: 'Lato', sans-serif !important;
}

/* Apply Praho for headers - override Lato for headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.woocommerce-products-header__title,
.woocommerce-loop-product__title,
.product_title,
.widget-title,
.comment-reply-title,
.alpha, .beta, .gamma, .delta, .epsilon, .zeta {
    font-family: 'Praho', sans-serif !important;
}

/* Links inside headers should also use header font (Praho) */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.entry-title a,
.site-title a,
.woocommerce-products-header__title a,
.woocommerce-loop-product__title a,
.product_title a,
.widget-title a,
.comment-reply-title a,
.alpha a, .beta a, .gamma a, .delta a, .epsilon a, .zeta a {
    font-family: 'Praho', sans-serif !important;
}

/* Remove home margin */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
    margin-bottom: 0;
}

/* Hide page title on homepage */
.page-template-template-homepage .entry-header .entry-title,
.home.page .entry-header .entry-title {
    display: none;
}

/* Reduce site header top padding */
.site-header,
#masthead {
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Sticky header styles - always fixed position */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.site-header.header-scrolled-down {
    transform: translateY(-100%);
}

.site-header.header-visible {
    transform: translateY(0);
}

/*
 * Reserve exactly the space occupied by the fixed header.  The value is
 * updated by sticky-header.js because the header can span multiple rows on
 * desktop (navigation + search) and has a different height on mobile.
 */
body {
    padding-top: var(--storefront-header-height, 80px);
}

/* Fallback while JavaScript is loading on mobile. */
@media (max-width: 767px) {
    body {
        padding-top: var(--storefront-header-height, 60px);
    }
    
    /* Make navbar smaller on mobile */
    .site-header,
    #masthead {
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }
}

/* Hide primary navigation menu on desktop, but keep mobile menu toggle visible */
.site-header .site-primary-navigation .primary-navigation {
    display: none;
}

/* Layout adjustments for secondary navigation and cart side by side */
.site-header .col-full {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Mobile layout: logo and menu button inline, spread apart */
@media (max-width: 767px) {
    /* Header is always fixed on mobile too */
    
    /* First col-full with logo */
    .site-header > .col-full:first-of-type {
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        position: relative;
    }
    
    /* Logo on left */
    .site-header .site-branding {
        flex: 0 0 auto;
        margin-right: 0;
    }
    
    /* Hide secondary nav on mobile */
    .site-header .secondary-navigation {
        display: none !important;
    }
    
    /* Hide cart and search in header on mobile - will show in menu */
    .site-header > .col-full:first-of-type .site-header-cart,
    .site-header > .col-full:first-of-type .site-search {
        display: none !important;
    }
    
    /* Show cart and search in mobile menu when toggled - clone them */
    .site-header .main-navigation.toggled .handheld-navigation::before {
        content: '';
        display: block;
        margin-bottom: 1em;
    }
    
    /* Mobile menu wrapper - position absolutely on the right */
    .site-header .storefront-primary-navigation {
        position: absolute !important;
        top: 1em;
        right: 1em;
        width: auto !important;
        z-index: 10;
    }
    
    .site-header .storefront-primary-navigation > .col-full {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Main navigation - remove flex to allow natural inline flow */
    .site-header .storefront-primary-navigation .main-navigation {
        display: block;
        width: auto;
    }
    
    /* Show menu toggle button */
    .site-header .main-navigation .menu-toggle {
        display: block !important;
        margin: 0;
    }
    
    /* Hide primary nav menu, show handheld */
    .site-header .main-navigation .primary-navigation {
        display: none;
    }
    
    .site-header .main-navigation .handheld-navigation {
        display: block;
    }
    
    /* When menu is toggled/open, make handheld navigation full width */
    .site-header .main-navigation.toggled .handheld-navigation {
        position: fixed;
        top: 60px; /* Will be updated dynamically by JavaScript to match header height */
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        background-color: #fff;
        z-index: 9999;
        padding: 1em;
        padding-top: 0; /* Remove top padding so it touches header */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        max-width: 100vw;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        animation: none !important;
        transition: none !important;
    }
    
    
    /* Remove animations from mobile menu elements */
    .site-header .main-navigation,
    .site-header .main-navigation *,
    .site-header .handheld-navigation,
    .site-header .handheld-navigation * {
        animation: none !important;
        transition: none !important;
    }
    
    /* Ensure the main navigation container allows overflow */
    .site-header .storefront-primary-navigation {
        overflow: visible;
    }
    
    .site-header .storefront-primary-navigation > .col-full {
        overflow: visible;
    }
    
    .site-header .main-navigation {
        position: relative;
    }
    
    /* Search below on mobile - show it separately */
    .site-header .site-search {
        width: 100%;
        margin-top: 1em;
        padding: 0 1em;
    }
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 768px) {
    .site-header .site-primary-navigation {
        display: none;
    }
}

.site-header .secondary-navigation {
    flex: 1;
    order: 1;
    margin-bottom: 0;
}

.site-header .site-branding {
    margin-bottom: 0;
}

/* Make logo smaller */
.site-header .site-branding img,
.site-header .site-branding .logo img,
.site-header .site-branding .custom-logo {
    max-width: 120px;
    height: auto;
}

/* Make logo even smaller on mobile */
@media (max-width: 767px) {
    .site-header .site-branding img,
    .site-header .site-branding .logo img,
    .site-header .site-branding .custom-logo {
        max-width: 90px;
    }
}

.site-header .site-header-cart {
    margin-left: 1.5em;
    order: 2;
}

/* Move search below navigation and cart */
.site-header .site-search {
    flex-basis: 100%;
    margin-top: 1em;
    order: 3;
}

/* Style search input - fully rounded with white background and grey border */
.site-search .widget_product_search input[type="text"],
.site-search .widget_product_search input[type="search"] {
    border-radius: 9999px !important;
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: none !important;
    /* Border color matches typical WordPress UI grey */
}

/* Style all inputs - 12px rounded with white background and grey border (like search) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
}

/* Make select elements more spacious */
select {
    padding: 0.75em 1em !important;
    padding-right: 2.5em !important; /* Extra space for dropdown arrow */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1em center !important;
    background-size: 12px 12px !important;
}

/* Buttons fully rounded (pill-shaped) - comprehensive selectors */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
a.button.alt,
/* Secondary navigation links styled as buttons */
.secondary-navigation a,
.secondary-navigation button,
/* WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page #content input.button,
/* Cart and checkout buttons */
.add_to_cart_button,
.added_to_cart,
.added_to_cart.alt,
.widget a.button.checkout,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
/* Payment buttons */
#payment .place-order .button,
#payment input[type="submit"],
.woocommerce-checkout #payment #place_order,
/* Mini cart buttons */
.widget_shopping_cart .buttons .button,
.site-header-cart .widget_shopping_cart .button,
.widget_shopping_cart a.button,
/* Product buttons */
.woocommerce .single-product .cart .button,
.woocommerce .products .button,
/* General WooCommerce button classes */
.wc-forward,
.alt.button,
.button.alt,
/* WooCommerce block buttons - more specific selectors with !important */
.wp-block-button__link,
.wp-element-button,
.wc-block-components-product-button__button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__place-order-button,
.wp-block-button__link.wp-element-button,
.wp-block-button__link.wc-block-components-product-button__button,
button.wp-block-button__link,
button.wp-element-button,
button.wc-block-components-product-button__button,
button.add_to_cart_button.wc-block-components-product-button__button,
button.wp-block-button__link.wp-element-button.wc-block-components-product-button__button {
    border-radius: 9999px !important;
    text-decoration: none !important;
}

/* Cart count badge/button fully rounded */
.cart-contents .count,
.site-header-cart .count,
.footer-cart-contents .count,
.widget_shopping_cart .count,
.woocommerce-cart .count,
span.count {
    border-radius: 9999px;
}

/* Replace specific WooCommerce blue (#3d9cd2) and green (#0f834d) colors with #FF9900 */
/* Use CSS to override these colors where they appear */
[style*="#0f834d"],
[style*="#0F834D"],
[style*="rgb(15, 131, 77)"],
[style*="rgb(15,131,77)"] {
    background-color: #FF9900 !important;
    border-color: #FF9900 !important;
    color: #FF9900 !important;
}

[style*="#3d9cd2"],
[style*="#3D9CD2"],
[style*="rgb(61, 156, 210)"],
[style*="rgb(61,156,210)"] {
    background-color: #FF9900 !important;
    border-color: #FF9900 !important;
    color: #FF9900 !important;
}

/* Target specific WooCommerce elements that use blue/green colors */
.woocommerce-noreviews,
.woocommerce .woocommerce-noreviews,
#reviews .woocommerce-noreviews,
.woocommerce #reviews .woocommerce-noreviews,
.woocommerce-page #reviews .woocommerce-noreviews,
#comments .woocommerce-noreviews,
.woocommerce #comments .woocommerce-noreviews {
    background-color: #FF9900 !important;
}

/* WooCommerce messages and notifications - yellow background */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments,
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
    background-color: #FF9900 !important;
}

/* WooCommerce block notice banner - yellow background, border, and white text */
.wc-block-components-notice-banner {
    background-color: #FF9900 !important;
    border: 1px solid #FF9900 !important;
    color: #ffffff !important;
    outline: none !important;
}

/* SVG inside info notice banner - yellow background */
.wc-block-components-notice-banner.is-info > svg {
    background-color: #FF9900 !important;
}

/* WooCommerce My Account navigation - black text color */
.woocommerce-MyAccount-navigation a,
.woocommerce .woocommerce-MyAccount-navigation a,
.woocommerce-page .woocommerce-MyAccount-navigation a {
    color: #000000 !important;
}

.show-password-input {
    right: 0.55em;
    top: 0.55em;
    padding: .418em;
    line-height: 0.618;
}

.woocommerce-message .button.wc-forward {
    border: none;
}

.storefront-sorting {
    display: flex;
    align-items: center;
}

.site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link {
    display: inline-block;
    vertical-align: middle;
}

/* Sitewide contact section in the Storefront footer. */
.site-footer .cimesmak-footer-contact {
    border: 0;
    border-top: 4px solid #e68a00;
    background: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.site-footer .cimesmak-footer-contact__inner {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.site-footer .cimesmak-footer-contact h2 {
    color: #e68a00;
    font-size: clamp(2.2rem, 3.5vw, 3.25rem);
    margin: 0 0 0.75rem;
}

.site-footer .cimesmak-footer-contact h3 {
    color: #43454b;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.site-footer .cimesmak-footer-contact__details {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start;
    justify-content: normal;
}

.site-footer .cimesmak-footer-contact__brand p,
.site-footer .cimesmak-footer-contact p,
.site-footer .cimesmak-footer-contact address {
    color: #43454b;
    font-size: 0.98rem;
    font-style: normal;
    line-height: 1.7;
    margin: 0;
}

.site-footer .cimesmak-footer-contact p strong {
    color: #252525;
}

.site-footer .cimesmak-footer-contact__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .cimesmak-footer-contact__links li + li {
    margin-top: 0.4rem;
}

.site-footer .cimesmak-footer-contact a:not(.button):not(.components-button) {
    color: #c87900;
    text-decoration: none;
}

.site-footer .cimesmak-footer-contact a:not(.button):not(.components-button):hover {
    color: #252525;
    text-decoration: underline;
}

.site-footer .cimesmak-footer-contact__address {
    font-size: 0.82rem;
    margin: 64px 0 0 !important;
    padding-top: 0;
}

/* Keep the original Storefront footer calm beneath the contact panel. */
.site-footer {
    background: #fff;
}

.site-footer .site-info {
    box-sizing: border-box;
    color: #777;
    font-size: 0.78rem;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 0.5rem 0;
    text-align: left;
    width: 100vw;
}

.site-footer .site-info > .col-full {
    box-sizing: border-box;
    width: 1100px;
    max-width: calc(100vw - 3rem);
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 767px) {
    .site-footer .cimesmak-footer-contact__inner,
    .site-footer .site-info > .col-full {
        box-sizing: border-box;
        max-width: none;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        width: 100%;
    }

    .site-footer .cimesmak-footer-contact__details {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Homepage editorial sections - styled through Gutenberg block classes. */
.cimesmak-home__hero {
    display: block;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    width: 100%;
}

.cimesmak-home__hero img {
    display: block;
    height: auto;
    width: 100%;
}

.cimesmak-home__section {
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: max(1.5rem, calc((100vw - 1100px) / 2));
    padding-left: max(1.5rem, calc((100vw - 1100px) / 2));
}

.cimesmak-home__section > * {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
}

.cimesmak-home__section h2 {
    color: #FF9900;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
    margin-bottom: 1.25rem;
}

.cimesmak-home__section h3 {
    color: #FF9900;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.15;
}

.cimesmak-home__section p {
    font-size: 1.05rem;
    line-height: 1.65;
}

.cimesmak-home__region {
    background-color: #e68a00 !important;
}

/* Gutenberg color preset: Ciemniejszy pomarańcz Cimesmak. */
.has-cimesmak-dark-orange-color {
    color: #e68a00;
}

.has-cimesmak-dark-orange-background-color {
    background-color: #e68a00;
}

.has-cimesmak-dark-orange-border-color {
    border-color: #e68a00;
}

.cimesmak-home__offer {
    background-color: #f1f1f1 !important;
}

.cimesmak-home__region h2,
.cimesmak-home__region h3,
.cimesmak-home__region p {
    color: #e6e6e6;
}

.cimesmak-home__region h2 {
    border-bottom: 0;
}

.cimesmak-home__section .wp-block-columns {
    gap: clamp(2rem, 6vw, 6rem);
}

.cimesmak-home__recipes .wp-block-column.is-vertically-aligned-center {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cimesmak-home__offer-grid {
    gap: clamp(1rem, 2vw, 2rem) !important;
}

.cimesmak-home__section .wp-block-image img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: cover;
}

.cimesmak-home__section .wp-block-column > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .cimesmak-home__section {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .cimesmak-home__section p {
        font-size: 1rem;
    }
}

/* Homepage hero cover block - maintain aspect ratio on mobile */
.homepage-hero.wp-block-cover {
    aspect-ratio: 1024 / 537;
}

@media (max-width: 768px) {
    .homepage-hero.wp-block-cover {
        min-height: auto !important;
        max-height: 60vh;
    }
    
    .homepage-hero.wp-block-cover .wp-block-cover__image-background {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    
    /* Center product list on homepage mobile */
    .home ul.products,
    .home .woocommerce ul.products,
    .home .wc-block-product-template,
    .home .wc-block-product-template__responsive {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .home ul.products li.product,
    .home .woocommerce ul.products li.product,
    .home .wc-block-product-template li,
    .home .wc-block-product-template__responsive li {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
        list-style: none;
    }
    
    /* Target WooCommerce block product collection specifically */
    .home .wp-block-woocommerce-product-collection .wc-block-product-template,
    .home .wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}