/*
Theme Name:   CaspianWatch v2
Theme URI:    https://caspianwatch.com
Description:  Child theme for CaspianWatch – built on Hello Elementor. No template overrides; Elementor handles all page building.
Author:       CaspianWatch
Author URI:   https://caspianwatch.com
Template:     hello-elementor
Version:      2.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  caspianwatch
*/

/* =========================================================
   CSS Custom Properties – Light Mode
   ========================================================= */
:root {
    /* Brand colours */
    --cw-navy:          #1a2e5a;
    --cw-navy-dark:     #111f3e;
    --cw-navy-light:    #253f7a;
    --cw-gold:          #c8942e;
    --cw-gold-dark:     #a87525;
    --cw-gold-light:    #dba94a;

    /* Neutral palette */
    --cw-white:         #ffffff;
    --cw-off-white:     #f5f5f0;
    --cw-light-gray:    #e8e8e0;
    --cw-mid-gray:      #9a9a8e;
    --cw-dark-gray:     #3a3a35;
    --cw-black:         #111111;

    /* Semantic tokens */
    --cw-bg:            var(--cw-white);
    --cw-bg-secondary:  var(--cw-off-white);
    --cw-text:          var(--cw-dark-gray);
    --cw-text-muted:    var(--cw-mid-gray);
    --cw-heading:       var(--cw-navy);
    --cw-link:          var(--cw-navy);
    --cw-link-hover:    var(--cw-gold);
    --cw-border:        var(--cw-light-gray);
    --cw-accent:        var(--cw-gold);

    /* Typography */
    --cw-font-sans:     'Inter', 'Segoe UI', Arial, sans-serif;
    --cw-font-serif:    'Playfair Display', Georgia, serif;
    --cw-font-mono:     'JetBrains Mono', 'Courier New', monospace;
    --cw-font-base:     1rem;
    --cw-line-height:   1.7;

    /* Spacing scale */
    --cw-space-xs:      0.25rem;
    --cw-space-sm:      0.5rem;
    --cw-space-md:      1rem;
    --cw-space-lg:      1.5rem;
    --cw-space-xl:      2rem;
    --cw-space-2xl:     3rem;
    --cw-space-3xl:     4rem;

    /* Layout */
    --cw-max-width:     1200px;
    --cw-content-width: 780px;
    --cw-sidebar-width: 320px;
    --cw-gutter:        1.5rem;

    /* Border radius */
    --cw-radius-sm:     4px;
    --cw-radius-md:     8px;
    --cw-radius-lg:     16px;
    --cw-radius-full:   9999px;

    /* Shadows */
    --cw-shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --cw-shadow-md:     0 4px 12px rgba(0,0,0,0.10);
    --cw-shadow-lg:     0 10px 30px rgba(0,0,0,0.12);

    /* Transitions */
    --cw-transition:    150ms ease-in-out;
}

/* =========================================================
   CSS Custom Properties – Dark Mode
   ========================================================= */
body.dark-mode,
[data-theme="dark"] {
    --cw-bg:            #0d1220;
    --cw-bg-secondary:  #151e30;
    --cw-text:          #d4d8e2;
    --cw-text-muted:    #7a8199;
    --cw-heading:       #e8ecf4;
    --cw-link:          #7da3e0;
    --cw-link-hover:    var(--cw-gold-light);
    --cw-border:        #252d42;
    --cw-shadow-sm:     0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --cw-shadow-md:     0 4px 12px rgba(0,0,0,0.5);
    --cw-shadow-lg:     0 10px 30px rgba(0,0,0,0.6);
}

/* =========================================================
   Base Resets & Typography
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--cw-bg);
    color: var(--cw-text);
    font-family: var(--cw-font-sans);
    font-size: var(--cw-font-base);
    line-height: var(--cw-line-height);
    transition: background-color var(--cw-transition), color var(--cw-transition);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cw-font-serif);
    color: var(--cw-heading);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--cw-space-md);
}

a {
    color: var(--cw-link);
    text-decoration: none;
    transition: color var(--cw-transition);
}

a:hover {
    color: var(--cw-link-hover);
}

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

/* =========================================================
   Utility Classes
   ========================================================= */

/* Container */
.cw-container {
    max-width: var(--cw-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cw-gutter);
    padding-right: var(--cw-gutter);
}

/* Visually hidden (a11y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Text utilities */
.cw-text-navy    { color: var(--cw-navy); }
.cw-text-gold    { color: var(--cw-gold); }
.cw-text-muted   { color: var(--cw-text-muted); }
.cw-text-center  { text-align: center; }
.cw-text-left    { text-align: left; }
.cw-text-right   { text-align: right; }

/* Background utilities */
.cw-bg-navy      { background-color: var(--cw-navy); color: var(--cw-white); }
.cw-bg-gold      { background-color: var(--cw-gold); color: var(--cw-white); }
.cw-bg-secondary { background-color: var(--cw-bg-secondary); }

/* Display */
.cw-flex         { display: flex; }
.cw-flex-center  { display: flex; align-items: center; justify-content: center; }
.cw-grid         { display: grid; }
.cw-hidden       { display: none !important; }

/* Spacing helpers */
.cw-mt-0  { margin-top: 0; }
.cw-mb-0  { margin-bottom: 0; }
.cw-mb-md { margin-bottom: var(--cw-space-md); }
.cw-mb-lg { margin-bottom: var(--cw-space-lg); }
.cw-pt-xl { padding-top: var(--cw-space-xl); }
.cw-pb-xl { padding-bottom: var(--cw-space-xl); }

/* Button base */
.cw-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-space-sm);
    padding: 0.6em 1.4em;
    border-radius: var(--cw-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color var(--cw-transition), color var(--cw-transition), border-color var(--cw-transition);
    text-decoration: none;
    line-height: 1.4;
}

.cw-btn-primary {
    background-color: var(--cw-navy);
    color: var(--cw-white);
    border-color: var(--cw-navy);
}
.cw-btn-primary:hover {
    background-color: var(--cw-navy-light);
    border-color: var(--cw-navy-light);
    color: var(--cw-white);
}

.cw-btn-secondary {
    background-color: transparent;
    color: var(--cw-navy);
    border-color: var(--cw-navy);
}
.cw-btn-secondary:hover {
    background-color: var(--cw-navy);
    color: var(--cw-white);
}

.cw-btn-gold {
    background-color: var(--cw-gold);
    color: var(--cw-white);
    border-color: var(--cw-gold);
}
.cw-btn-gold:hover {
    background-color: var(--cw-gold-dark);
    border-color: var(--cw-gold-dark);
    color: var(--cw-white);
}

/* Badge */
.cw-badge {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: var(--cw-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cw-badge-navy { background-color: var(--cw-navy); color: var(--cw-white); }
.cw-badge-gold { background-color: var(--cw-gold); color: var(--cw-white); }

/* Card */
.cw-card {
    background-color: var(--cw-bg);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius-md);
    box-shadow: var(--cw-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--cw-transition), border-color var(--cw-transition);
}
.cw-card:hover {
    box-shadow: var(--cw-shadow-md);
    border-color: var(--cw-gold);
}

/* Divider */
.cw-divider {
    border: none;
    border-top: 1px solid var(--cw-border);
    margin: var(--cw-space-xl) 0;
}

/* Gold accent line */
.cw-accent-line::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background-color: var(--cw-gold);
    margin-bottom: var(--cw-space-md);
}