/*
 Theme Name:  Compos
 Theme URI:   https://compos.co.uk
 Description: Compos is a complete competition and prize platform for WooCommerce. Run ticket draws, spot-the-ball competitions, skill games, virtual currency, merchant centres, affiliate systems and subscriptions — all in one powerful theme. Built for operators who want a fully-featured, white-label competition platform they can launch and manage without coding.
 Version:     1.0.2
 Author:      Compos
 Author URI:  https://compos.co.uk
 License:     Proprietary
 License URI: https://compos.co.uk/license
 Text Domain: compos
 Tags:        competition, lottery, prize, woocommerce, gaming, virtual-currency, spot-the-ball, elementor, dark, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options
*/

/*
 * Compos CSS Variable System
 * All colours, shadows, gradients defined in:
 * compos/core/compos-brand.php -> compos_output_brand_css()
 * Output as inline <style> in <head> via wp_head hook.
 * This file contains structural resets only.
 * No colour values. No !important on colour properties.
 */

/* ── Box model reset ── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Body base ── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--cp-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
    font-size: var(--cp-font-size-base, 16px);
    line-height: var(--cp-line-height-body, 1.6);
    background-color: var(--cp-bg);
    color: var(--cp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-family: var(--cp-font-heading, inherit);
    font-weight: var(--cp-font-weight-heading, 700);
    line-height: var(--cp-line-height-heading, 1.2);
    color: var(--cp-text);
}
p { margin-top: 0; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
a {
    color: var(--cp-accent);
    text-decoration: none;
    transition: color 200ms ease;
}
a:hover { opacity: 0.85; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img {
    max-width: 100%;
    height: auto;
    display: block;
}
button { cursor: pointer; }
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

/* ── WordPress alignment ── */
.alignwide {
    margin-left: -2rem;
    margin-right: -2rem;
}
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}
.wp-block-image img { height: auto; }
.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;
    word-wrap: normal !important; /* browser reset */
}

/* ── Form resets ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 1px solid var(--cp-border);
    background: var(--cp-input-bg);
    color: var(--cp-text);
    border-radius: var(--cp-input-radius, 4px);
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 200ms ease;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--cp-accent);
}
::placeholder {
    color: var(--cp-text-faint);
    opacity: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cp-bg); }
::-webkit-scrollbar-thumb {
    background: var(--cp-border-strong);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cp-accent); }

/* ── Selection ── */
::selection {
    background: var(--cp-accent-30);
    color: var(--cp-text);
}

/* ── Focus visible (accessibility) ── */
:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

/* ── Admin bar offset ── */
.admin-bar .compos-mega-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .compos-mega-header {
        top: 46px;
    }
}

/* ── Page wrapper structure (legacy compat) ── */
#page, .site {
    overflow-x: hidden;
}
.main-contain {
    min-height: 50vh;
}

/* ── WooCommerce base structure ── */
.woocommerce img { height: auto; }
.woocommerce table { border-collapse: collapse; width: 100%; }
.woocommerce table th,
.woocommerce table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-text);
}
.woocommerce .quantity .qty {
    width: 60px;
    text-align: center;
}

/* ── WordPress gallery ── */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-item { margin: 0; }
.gallery-caption { font-size: 0.85em; color: var(--cp-text-muted); }

/* ── WordPress captions ── */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85em; color: var(--cp-text-muted); margin-top: 0.5em; }

/* ── Utility: hide ── */
.hidden, [hidden] { display: none; }

/* ── Print ── */
@media print {
    body { background: #fff; color: #000; }
    .compos-mega-header, .compos-footer, .compos-header-spacer { display: none; }
}
