/*
Theme Name: Tukaan OK Waaye
Theme URI: https://suuqabakaaro.com/
Author: Tukaan OK Waaye
Description: Lightweight, mobile-first WooCommerce supermarket theme designed for customers in Somalia.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tukaan-ok-waaye
Tags: e-commerce, custom-logo, custom-menu, featured-images, accessibility-ready
*/

/* =========================================
   1. BRAND DESIGN SYSTEM
========================================= */

:root {
    color-scheme: light;

    /* Brand colours */
    --tow-green: #126b3b;
    --tow-green-dark: #0b4d2a;
    --tow-green-light: #eaf5ee;

    --tow-orange: #f47721;
    --tow-orange-light: #fff1e7;

    /* General colours */
    --tow-ink: #202820;
    --tow-muted: #68736b;
    --tow-border: #e7ece8;
    --tow-white: #ffffff;
    --tow-background: #f7f9f7;
    --tow-danger: #c43d32;
    --tow-success: #168747;

    /* Layout */
    --tow-container: 1200px;
    --tow-gutter: 14px;

    /* Components */
    --tow-radius: 14px;
    --tow-radius-small: 9px;
    --tow-shadow: 0 3px 14px rgba(20, 55, 34, 0.07);

    /* Typography */
    --tow-font: system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================================
   2. RESET AND BASE
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--tow-background);
    color: var(--tow-ink);
    font-family: var(--tow-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
    max-width: 100%;
}

img {
    height: auto;
    vertical-align: middle;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button,
[type="button"],
[type="submit"] {
    cursor: pointer;
}

a {
    color: var(--tow-green);
    text-decoration: none;
}

a:hover {
    color: var(--tow-green-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.55em;
    color: var(--tow-ink);
    font-weight: 750;
    line-height: 1.2;
}

p {
    margin: 0 0 1em;
}

/* =========================================
   3. ACCESSIBILITY
========================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(244, 119, 33, 0.55);
    outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

.skip-link:focus {
    z-index: 100000;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px 16px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: var(--tow-white);
    color: var(--tow-green-dark);
}

/* =========================================
   4. GLOBAL LAYOUT
========================================= */

.container,
.site-container {
    width: min(
        100% - (var(--tow-gutter) * 2),
        var(--tow-container)
    );
    margin-inline: auto;
}

.section {
    margin-block: 20px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-heading h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.section-heading a {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.alignwide {
    max-width: min(100% - 28px, 1100px);
    margin-inline: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* =========================================
   5. BUTTON SYSTEM
========================================= */

.button,
button.button,
input.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--tow-green);
    color: var(--tow-white);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.15s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--tow-green-dark);
    color: var(--tow-white);
}

.button--orange {
    background: var(--tow-orange);
    color: var(--tow-white);
}

.button--orange:hover {
    background: #d96012;
    color: var(--tow-white);
}

.button--full {
    width: 100%;
}

/* =========================================
   6. CARDS AND NOTIFICATIONS
========================================= */

.card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tow-border);
    border-radius: var(--tow-radius);
    background: var(--tow-white);
    box-shadow: var(--tow-shadow);
}

.notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--tow-border);
    border-radius: 10px;
    background: var(--tow-white);
    list-style: none;
}

.woocommerce-error {
    border-color: #f0c9c5;
    color: var(--tow-danger);
}

/* =========================================
   7. WOOCOMMERCE FOUNDATION
========================================= */

.woocommerce span.onsale {
    min-height: 0;
    min-width: 0;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--tow-orange);
    color: var(--tow-white);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--tow-green-dark);
    font-weight: 800;
}

.woocommerce .star-rating {
    color: #e99a20;
}

.woocommerce form .form-row {
    margin-bottom: 13px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #dce4de;
    border-radius: 9px;
    background: var(--tow-white);
    box-shadow: none;
}

.woocommerce form .form-row label {
    margin-bottom: 5px;
    color: var(--tow-ink);
    font-size: 0.9rem;
    font-weight: 650;
}

.woocommerce table.shop_table {
    border-color: var(--tow-border);
    border-radius: 10px;
    background: var(--tow-white);
}

/* =========================================
   8. RESPONSIVE DESIGN
========================================= */

@media (min-width: 700px) {

    :root {
        --tow-gutter: 22px;
    }

    body {
        font-size: 16px;
    }

    .section {
        margin-block: 28px;
    }

    .section-heading h2 {
        font-size: 1.35rem;
    }
}

/* =========================================
   9. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}