/*
Theme Name:   Storefront Svelte Child
Theme URI:    https://grabgoose.com/
Description:  A high-performance WooCommerce child theme using Svelte 5 and Web Components.
Author:       GrabGoose
Template:     storefront
Version:      1.0.0
*/

/* Remove default header spacing to allow Svelte navigation to sit flush */
#masthead.site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Global color tokens for theme consistency and accessibility */
:root {
    /* Primary brand color for GrabGoose */
    --brand-primary: #2b6166;
    --brand-secondary: #3d8086;

    /* Typography colors ensuring high contrast on dark backgrounds */
    --text-main: #e2e8f0;      /* Soft white for body copy */
    --text-bright: #ffffff;    /* Pure white for headings and emphasis */
    --text-muted: #bababa;     /* Gray-blue for secondary information */
    --text-invert: #0a0a0c;    /* Darkest shade for text on bright interaction elements */

    /* Background surfaces for depth and layering */
    --bg-dark: #0a0a0c;        /* Main application background */
    --bg-surface: #111114;     /* Raised surface color for cards and form fields */
    --bg-card: #1a1a1e;        /* Darker card surface */
}

/* Dynamic brand override based on body attribute */
[data-brand="stayneat"] {
    --brand-primary: #9900cc;
    --brand-secondary: #b300f0;
}

.content-area {
    width: 100% !important;
}

/* Base element color reset */
body, button, input, textarea {
    color: var(--text-main) !important;
    background-color: var(--bg-dark);
}

/* WooCommerce Germanized summary fix */
.wc-gzd-checkout .wc-block-components-order-summary,
.wc-gzd-checkout .wc-block-components-order-summary.is-large {
    background-color: var(--bg-surface) !important;
}

/* Gallery trigger background */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    background-color: var(--brand-primary) !important;
}

/* Address card text contrast */
.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
    color: var(--text-muted) !important;
}

/* Order summary quantity badge */
.wc-block-components-order-summary-item__quantity {
    color: var(--text-bright) !important;
    border-color: transparent !important;
    background-color: var(--brand-primary) !important;
}

/* DHL Preferred Day selection styling */
.wc-stc-checkout-dhl .wc-stc-dhl-preferred-day-select .wc-stc-dhl-preferred-day {
    background-color: var(--brand-primary) !important;
}

.wc-stc-checkout-dhl .wc-stc-dhl-preferred-day-select .wc-stc-dhl-preferred-day .inner {
    background-color: var(--bg-surface) !important;
    transition: all 0.2s ease-in-out;
}

.wc-stc-checkout-dhl .wc-stc-dhl-preferred-day-select .wc-stc-dhl-preferred-day.active .inner {
    background-color: var(--brand-primary) !important;
    transition: all 0.2s ease-in-out;
}

/* Express payment margin fix */
.wc-block-components-express-payment--checkout {
    margin-bottom: 48px !important;
}

/* Heading color application */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-bright) !important;
}

/* Global link styles and transition effects */
a {
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

.wc-block-components-product-name {
    font-weight: bold !important;
}

/* Link hover state */
a:hover {
    color: var(--text-bright);
}

/* Legibility fixes for WC details */
.wc-block-components-product-details [class*="wc-block-components-product-details__gzd-"] .wc-block-components-product-details__value,
.product-details,
.price,
.amount {
    color: var(--text-muted) !important;
}

/* Breadcrumb color scheme */
.woocommerce-breadcrumb, .woocommerce-breadcrumb a {
    color: var(--text-muted) !important;
}

/* Form element styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    background-color: var(--bg-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-bright) !important;
    padding: 0.6em 1em;
    border-radius: 4px;
}

/* Global focus states using brand identity */
a:focus,
input:focus,
textarea:focus,
button:focus {
    border-color: var(--brand-primary) !important;
    outline: none !important;
}

/* Button color logic */
.button,
button.alt,
input[type="submit"] {
    background-color: var(--brand-primary) !important;
    color: var(--text-bright) !important;
    border: none;
}

/* Button hover state */
.button:hover {
    background-color: var(--text-bright) !important;
    color: var(--text-invert) !important;
}

/* Footer layout and styling */
.site-footer {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    padding: 4em 0 2em;
    border-top: 2px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
}

/* Brand accent for footer */
.site-footer::before {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--brand-primary, #2b6166);
    margin: 0 auto 2em auto;
    border-radius: 2px;
}

/* Footer typography */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
    color: var(--text-bright) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

.site-footer a {
    color: var(--text-main) !important;
    transition: all 0.2s ease-in-out;
}

.site-footer a:hover {
    color: var(--text-bright, #2b6166) !important;
    text-decoration: underline;
}

/* Site info highlight bar */
.site-info {
    border-top: 1px solid var(--brand-primary, #2b6166);
    text-align: center;
    color: #ffffff !important;
}

/* Hide specific PayPal messaging blocks */
.wc-block-checkout__payment-method .ppcp-messages,
.ppcp-messages {
    display: none !important;
}

/**
 * Skeleton Placeholder for app-nav
 * Targets the element before Svelte initializes it.
 */
app-nav:not(:defined) {
    display: block;
    width: 100%;
    height: 80px;
    background-color: #0a0a0c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    content: "";
}