/*
Theme Name: Manchester Laser Cuts
Theme URI: https://manchesterlasercuts.co.uk
Author: W Web Design
Author URI: https://wwebdesign.co.uk
Description: Bespoke, lightweight WooCommerce theme for Manchester Laser Cuts. ACF-block driven front end, native WooCommerce templates, no page builder. Built to replace the Elementor/Jet stack.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: mlc
*/

/* ==========================================================================
   Design tokens — the ONLY place for cross-block values.
   Brand palette extracted from the live site (sage green + dark ink).
   ========================================================================== */
:root {
    /* Brand */
    --mlc-green:        #76AD9E;   /* primary brand */
    --mlc-green-dark:   #5f9485;   /* hover/active */
    --mlc-green-deep:   #284a42;   /* deep brand green — dark surfaces (footer) */
    --mlc-green-tint:   #eaf3f0;   /* pale fills */
    --mlc-ink:          #212121;   /* primary text */
    --mlc-ink-soft:     #4e4b66;   /* secondary text */

    /* Surfaces */
    --mlc-bg:           #f7f7f7;   /* page background */
    --mlc-card-bg:      #ffffff;   /* discrete card surfaces ONLY */
    --mlc-line:         #e6e6e6;   /* hairline borders */

    /* Accents */
    --mlc-sale:         #c0392b;   /* sale price / clearance */
    --mlc-star:         #f5a623;   /* rating stars */

    /* Type */
    --mlc-font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mlc-font-head:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout */
    --mlc-content-max:  1280px;
    --mlc-gutter:       clamp(16px, 4vw, 40px);
    --mlc-header-height: 84px;
    --mlc-radius:       14px;
    --mlc-radius-sm:    8px;
    --mlc-shadow:       0 6px 24px rgba(33, 33, 33, .08);
    --mlc-shadow-lg:    0 14px 40px rgba(33, 33, 33, .12);
    --mlc-transition:   .25s cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--mlc-bg);
    color: var(--mlc-ink);
    font-family: var(--mlc-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mlc-font-head);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--mlc-ink);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

a { color: var(--mlc-green-dark); text-decoration: none; transition: color var(--mlc-transition); }
a:hover { color: var(--mlc-ink); }

img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.mlc-container {
    width: 100%;
    max-width: var(--mlc-content-max);
    margin-inline: auto;
    padding-inline: var(--mlc-gutter);
}

.mlc-section { padding-block: clamp(40px, 6vw, 80px); }

/* Vertical breathing room for every WooCommerce surface (shop, archives, single
   product, cart, checkout, my-account). The .mlc-shop wrapper is emitted by the
   WC content hooks for archive/single and by page.php for the shortcode pages,
   so one rule keeps the spacing identical across all of them. */
.mlc-shop { padding-block: clamp(28px, 5vw, 56px); }

.mlc-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .8em 1.6em;
    border-radius: 999px;
    background: var(--mlc-green);
    color: #fff;
    font-weight: 600;
    border: 2px solid var(--mlc-green);
    cursor: pointer;
    transition: background var(--mlc-transition), transform var(--mlc-transition);
}
.mlc-btn:hover { background: var(--mlc-green-dark); border-color: var(--mlc-green-dark); color: #fff; transform: translateY(-2px); }
.mlc-btn--ghost { background: transparent; color: var(--mlc-ink); }
.mlc-btn--ghost:hover { background: var(--mlc-ink); color: #fff; border-color: var(--mlc-ink); }

.mlc-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mlc-green-dark);
    margin-bottom: .6em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}