/*
Theme Name: AllOutPlay
Theme URI: https://alloutplay.co.uk/
Author: AllOutPlay Ltd
Description: Standalone theme for the AllOutPlay product, quote and playground design website.
Version: 0.1.0
Text Domain: aop
Requires at least: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/open-sans.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/open-sans.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Bree Serif';
    src: url('assets/fonts/bree-serif-400.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('assets/fonts/websymbols-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Navigation and sidebar state */
#navigation .widget-header, 
#navigation .product-categories a, 
#sidebar .widget-header { 
    text-shadow: none !important; 
}
#sidebar .widget_product_categories ul.product-categories li.current-cat > a { 
    color: #333333 !important; 
    font-weight: bold !important; 
}

@media only screen and (max-width: 767px) {
    #navigation.is-open {
        display: block;
    }
}

/* ==========================================================================
   1. GLOBAL HIDES & RESET
   ========================================================================== */

#sidebar dl.variation,
.variation-description {
    display: none !important; 
}

/* Keep assistive text available without allowing it to affect page layout. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    word-wrap: normal !important;
}

/* The homepage lead is the visible H1 but keeps its compact introductory style. */
body.home .aop-home-intro h1.aop-home-lead {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}

/* Prevent automatic hyphenation in body copy. */
p {
    hyphens: none !important;
    word-wrap: normal !important;
}

/* ==========================================================================
   2. SITE STRUCTURE (Boxed Layout)
   ========================================================================== */

html.boxed {
    background: #94ba62 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGAwBuKzQAwGjDAGNgGwSgwVAFCGAgUGpiTrAAAAAElFTkSuQmCC');
}

html.boxed body {
    font-size: 160.5% !important;
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
    background: linear-gradient(105deg, #FFFFFF 40%, #DBF4BE 60%) !important;
}

#top {
    background: transparent !important;
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
}

@media only screen and (min-width: 768px) {
    /* Adjusts the sidebar to align with the single product title height */
    #sidebar {
        margin-top: 10px !important;
		padding-top: 25px !important;    /* Pushes the title down within the box */
    }
}

.footer-wrap {
    background: #DBF4BE !important;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

#header {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 4px double #94BA62 !important;
}

#header #logo, #header hgroup, #header .header-widget-content, #header hr, #header p {
    margin: 0 !important;
    padding: 0 !important;
}

#header hgroup {
    margin-top: 0.9em !important;
    margin-bottom: 0.018em !important;
}

#navigation {
    margin-bottom: 0.618em !important;
}

#header #navigation ul.nav a,
#header #navigation ul.nav > li:hover a {
    background: #FFF !important;
    margin: 1em 0 1.2em 0 !important;
    font-size: 90%;
    padding-top: 0.5em;
    border-color: #E8E8E8 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.aop-header-contact {
    font-size: 24px;
    line-height: 1.25;
    text-align: right;
}

.aop-header-contact p {
    line-height: 1.25;
}

.aop-header-social-links {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 3px 0 0;
    padding: 0;
    list-style: none;
}

.aop-header-social-links img {
    display: block;
    width: 24px;
    height: 24px;
}

@media only screen and (min-width: 769px) {
    #header {
        padding-top: 0 !important;
    }

    #header hgroup {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    #header #logo img {
        display: block;
    }

    #header #navigation {
        margin-bottom: 0.2em !important;
    }

    .aop-header-contact {
        padding-top: 1.25em;
    }

    .aop-header-contact p {
        position: relative;
        top: -4px;
    }

    body #breadcrumbs,
    body .yoast-breadcrumbs {
        margin-top: 2px !important;
    }
}

@media only screen and (max-width: 767px) {
    .aop-header-contact {
        font-size: 18px;
    }
}

/* Search field */
#top .wc-nav li.search input {
    padding: 0 12px !important;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 42px;
}

input[type=search]#s {
    box-shadow: inset 0 1px 2px #d6d6d6 !important;
    border: 1px solid #c2c2c2 !important;
}

@media only screen and (min-width: 768px) {
    #top .nav.wc-nav li.search {
        margin-top: 2px !important;
    }
	
    /* Tighten the quote, cart and search bar. */
    #top {
        padding-top: 5px !important;
        padding-bottom: 0px !important;
    }
}

@media only screen and (max-width: 767px) {
    #top .nav.wc-nav {
        margin-right: 14px !important;
        display: flex !important;
        justify-content: flex-end;
    }

    #top .nav.wc-nav li.quote-link, 
    #top .nav.wc-nav li.cart-link {
        margin-left: 0px !important;  /* Reduced spacing between them */
        margin-right: 0px !important;
    }
}

/* Keep search text clear of the field edge. */
#header .search_main input#s,
input[type=search]#s {
    padding-left: 10px !important; /* Increases the indent of the text */
}

input[type=search]#s::placeholder {
    padding-left: 8px;
}

/* ==========================================================================
   4. WOOCOMMERCE PRODUCT PAGES
   ========================================================================== */

a.button,
a.comment-reply-link,
#commentform #submit,
.submit,
input[type=submit],
input.button,
button.button {
    text-shadow: 0 1px 0 #4d4d4d !important;
    background-color: #919191 !important;
    background-image: linear-gradient(to bottom, #919191, #5e5e5e) !important;
    border-color: #3c3c3c !important;
    box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #b3b3b3, inset 0 -1px #4d4d4d !important;
}

a.button:hover,
a.comment-reply-link:hover,
#commentform #submit:hover,
.submit:hover,
input[type=submit]:hover,
input.button:hover,
button.button:hover {
    background-color: #919191 !important;
    background-image: linear-gradient(to bottom, #919191, #6f6f6f) !important;
}

a.button:active,
a.comment-reply-link:active,
#commentform #submit:active,
.submit:active,
input[type=submit]:active,
input.button:active,
button.button:active {
    background-color: #6f6f6f !important;
    background-image: linear-gradient(to bottom, #6f6f6f, #919191) !important;
    box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Remove Price and VAT Status from Recently Viewed Widget */
.widget_recently_viewed_products .amount, 
.widget_recently_viewed_products ins, 
.widget_recently_viewed_products del,
.widget_recently_viewed_products .vat-suffix {
    display: none !important;
}

/* ==========================================================================
   5. SIDEBAR & BREADCRUMBS
   ========================================================================== */

#sidebar {
    padding: 8px 20px 10px;
    border: 1px solid #94BA62 !important;
    background: linear-gradient(to bottom, #DBF4BE 0%, #ffffff 30%, #ffffff 98%, #DBF4BE 100%);
    border-radius: 10px;
    margin-bottom: 4em !important;
}

.widget-header {
    text-shadow: 1px 1px #94BA62;
    font-size: 100% !important;
}

.widget-header h3,
.widget-header .widget-title {
    font-size: 200% !important;
}

#navigation .product-categories {
    font-size: 100% !important;
}

.widget h3 { border: 0 !important; }

/* Breadcrumbs */
body #breadcrumbs, body .yoast-breadcrumbs {
    display: block !important; 
    margin: 4px 0 !important;
    padding: 0 0 0.2em 0 !important; 
}


/* ==========================================================================
   6. DESKTOP ONLY
   ========================================================================== */
@media only screen and (min-width: 769px) {
    /* Hide Mobile Categories in Nav */
    #navigation .widget_product_categories, 
    #navigation .product-categories {
        display: none !important;
    }

    /* Search Bar Positioning */
    #top .wc-nav li.search { float: right; margin-left: 20px; }
    #top .wc-nav li.search input { width: 250px !important; box-sizing: border-box; }

    /* Sidebar Active States */
    #sidebar .widget_product_categories ul.product-categories li {
        margin-bottom: 4px;
    }

    #sidebar .widget_product_categories ul.product-categories ul.children {
        margin-top: 6px;
    }

    #sidebar .widget_product_categories ul.product-categories ul.children li {
        margin-bottom: 4px;
    }

    #sidebar .product-categories li.current-cat > a,
    #sidebar .product-categories li.current-cat:before {
        color: #333333 !important;
    }
}

/* ==========================================================================
   7. MOBILE ONLY
   ========================================================================== */
@media only screen and (max-width: 767px) {
    
    html,
    body {
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    /* Keep breadcrumbs and form controls within the viewport. */
    #breadcrumbs, .yoast-breadcrumbs, input, textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
    }

    /* Boxed Breakout */
    html.boxed, html.boxed body, html.boxed #wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #content, .col-full, #main {
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .footer-wrap, #footer { width: 100% !important; margin: 0 !important; }
    #footer .col-full { padding: 0 20px !important; }

    /* Hide sidebar on mobile */
    #sidebar { display: none !important; }

    /* Mobile Navigation (Burger Menu Content) */
    #navigation .widget_product_categories,
    #navigation .product-categories {
        display: block !important;
        background: #ffffff;
        margin: 0;
        padding: 0;
    }

    #navigation .product-categories li a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
        font-size: 16px !important;
        line-height: 1.3;
        font-weight: bold;
    }

    /* Mobile Active State */
    #navigation .product-categories li.current-cat > a {
        background-color: #f7f7f7 !important;
        color: #333333 !important;
        border-left: 5px solid #333333 !important;
        padding-left: 15px !important;
    }

    /* Compact quote, cart and search bar. */
    div#top {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
		
		padding-top: 8px !important;
    }
	
    /* Position the menu toggle below the utility bar. */
    .nav-toggle {
        top: 68px !important;
        right: 6px !important;
    }

    #header .nav-toggle {
        background-color: #808080 !important;
        background-image: linear-gradient(to bottom, #808080, #6f6f6f) !important;
        border-color: #3c3c3c !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 #4d4d4d !important;
    }

    /* Keep quote, cart and search on one line. */
    #top .col-full {
        padding: 5px !important;
    }

    ul.nav.wc-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
		margin-right: 4px !important;
    }

    ul.nav.wc-nav li.search {
        margin-left: auto !important;
        width: 45% !important;
    }

    ul.nav.wc-nav li.quote-link, 
    ul.nav.wc-nav li.cart-link {
        width: auto !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

    #searchform input#s {
        width: 100% !important;
        padding: 4px !important;
    }
	
}

/* Footer and cookie controls need readable contrast against category backgrounds. */
#footer,
#footer p,
#copyright,
#credit {
    color: #333333 !important;
}

a.cn-revoke-cookie.cn-button-inline.cn-revoke-inline {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333333 !important;
    font-size: 14px !important;  /* Standard footer text size */
    font-weight: normal !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Subtle hover state */
a.cn-revoke-cookie.cn-button-inline.cn-revoke-inline:hover {
    color: #111111 !important;
    text-decoration: underline !important;
}

#cookie-notice .cn-button,
#cookie-notice .cn-button.cn-set-cookie,
#cookie-notice .cn-button.cn-more-info {
    background-color: #006f66 !important;
    color: #ffffff !important;
}

#cookie-notice .cn-button:hover,
#cookie-notice .cn-button:focus {
    background-color: #00564f !important;
    color: #ffffff !important;
}

/* Let message fields use the full form width instead of the HTML cols value. */
.wpcf7-form .wpcf7-form-control-wrap[data-name$="message"] {
    display: block;
    width: 100%;
}

.wpcf7-form textarea.wpcf7-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}