/* ============================================================
 * 1. GLOBAL CSS VARIABLES
 *    Edit these to restyle the entire site from one place.
 * ============================================================ */
:root {
    /* ── Brand Colours ──────────────────────────────────────── */
    --wmc-accent:           #f0c040;       /* Primary gold */
    --wmc-accent-dark:      #d4a832;       /* Darker gold for hover states */
    --wmc-text-light:       #ffffff;
    --wmc-text-dark:        #111111;
    --wmc-text-muted:       #888888;
    --wmc-bg-dark:          #111111;
    --wmc-bg-card:          #1a1a1a;

    /* ── Overlay Colours ────────────────────────────────────── */
    --wmc-overlay-mid:      rgba(0, 0, 0, 0.60);
    --wmc-overlay-dark:     rgba(0, 0, 0, 0.85);
    --wmc-overlay-gradient: linear-gradient(
                                to bottom,
                                rgba(0, 0, 0, 0.08) 0%,
                                rgba(0, 0, 0, 0.88) 100%
                            );

    /* ── Typography ─────────────────────────────────────────── */
    --wmc-hero-font-size:   32px;
    --wmc-hero-font-weight: 700;
    --wmc-text-shadow:      2px 2px 6px rgba(0, 0, 0, 0.90);
    --wmc-card-title-size:  15px;
    --wmc-card-meta-size:   12px;

    /* ── Layout & Spacing ───────────────────────────────────── */
    --wmc-card-gap:         20px;
    --wmc-card-radius:      6px;
    --wmc-section-padding:  48px 24px;
    --wmc-max-width:        1200px;

    /* ── Buttons ────────────────────────────────────────────── */
    --wmc-btn-border:       2px solid #f0c040;
    --wmc-btn-radius:       4px;
    --wmc-btn-padding:      8px 20px;
    --wmc-btn-font-size:    14px;

    /* ── Hero ───────────────────────────────────────────────── */
    --wmc-hero-height:      500px;

    /* ── Collections ────────────────────────────────────────── */
    --wmc-col-card-width:   220px;
    --wmc-col-card-height:  300px;
}


/* ============================================================
 * 2. GLOBAL UTILITY CLASSES
 * ============================================================ */

/* Primary CTA button — gold border, fills solid on hover */

.wmc-btn {
    display:         inline-block;
    padding:         var(--wmc-btn-padding);
    border:          var(--wmc-btn-border);
    border-radius:   var(--wmc-btn-radius);
    background:      transparent;
    color:           var(--wmc-accent);
    font-size:       var(--wmc-btn-font-size);
    font-weight:     600;
    letter-spacing:  0.4px;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.20s ease,
                     color      0.20s ease,
                     transform  0.15s ease;
    line-height:     1;
}
.wmc-btn:hover,
.wmc-btn:focus-visible {
    background: var(--wmc-accent);
    color:      var(--wmc-text-dark);
    outline:    none;
    transform:  translateY(-1px);
}

/* Section heading — uppercase gold */
.wmc-section-title {
    color:          var(--wmc-accent);
    font-size:      22px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin:         0 0 20px;
    padding:        0;
}

/* Fallback "no posts" message */
.wmc-no-posts {
    color:      var(--wmc-text-muted);
    font-style: italic;
    padding:    20px 0;
}

/* ============================================================
 * 3. NEWSLETTER — [custom_newsletter]
 *    Anti-bot email subscription section.
 * ============================================================ */

.wmc-newsletter-section {
    background: var(--wmc-bg-dark);
    text-align: center;
		padding:      40px 0;
	  width:        100vw;
		position:     relative;
    left:         50%;
    margin-left:  -50vw;
}

.wmc-newsletter-inner {
    max-width: 540px;
    margin:    0 auto;
}

.wmc-newsletter-title {
    color:         var(--wmc-accent);
    font-size:     26px;
    font-weight:   700;
    margin:        0 0 10px;
    line-height:   1.2;
}

.wmc-newsletter-subtitle {
    color:         #ccc;
    font-size:     14px;
    line-height:   1.6;
    margin:        0 0 0px;
}

/*
 * HONEYPOT
 * Visually removed from the flow but NOT display:none.
 */
.wmc-hp-field {
    position:       absolute;
    left:           -99999px;
    top:            -99999px;
    width:          0;
    height:         0;
    overflow:       hidden;
    opacity:        0;
    pointer-events: none;
}

/* Email input + button side-by-side */
.wmc-newsletter-fields {
    display:         flex;
    gap:             10px;
    max-width:       440px;
    margin:          0 auto;
    justify-content: center;
}

.wmc-newsletter-input {
    flex:          1;
    min-width:     0;           /* Allows flex shrink past intrinsic width */
    padding:       10px 16px;
    border:        2px solid #2e2e2e;
    border-radius: var(--wmc-btn-radius);
    background:    #1a1a1a;
    color:         var(--wmc-text-light);
    font-size:     14px;
    outline:       none;
    transition:    border-color 0.20s ease;
    -webkit-appearance: none;
}
.wmc-newsletter-input:focus {
    border-color: var(--wmc-accent);
}
.wmc-newsletter-input::placeholder {
    color: #555;
}

.wmc-newsletter-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* AJAX response area */
.wmc-newsletter-response {
    min-height:    26px;
    margin-bottom: 14px;
    font-size:     14px;
    font-weight:   500;
    line-height:   1.4;
}

.wmc-nl-success { color: #4caf50; }
.wmc-nl-error   { color: #e53935; }
.wmc-nl-loading { color: var(--wmc-text-muted); font-style: italic; }


/* ============================================================
 * 4. RESPONSIVE OVERRIDES
 *
 *    Breakpoints:
 *      Tablet :  max-width 1024px  → 2 columns
 *      Mobile :  max-width  640px  → 1 column
 *      Compact:  max-width  480px  → minor sizing tweaks
 * ============================================================ */
    /* Newsletter stacks vertically */
@media screen and (max-width: 640px) {
    .wmc-newsletter-fields { flex-direction: column; align-items: stretch; padding:        0 24px;}
    .wmc-newsletter-input,
    .wmc-newsletter-btn    { width: 100%; text-align: center; }
}
@media screen and (max-width: 480px) {
    :root { --wmc-section-padding: 32px 14px; }
    .wmc-newsletter-title    { font-size: 20px; }
    .wmc-newsletter-subtitle { font-size: 13px; }
	.wmc-newsletter-fields   { padding: 0 20px; }
}


/*==========Custom CSS ==========*/
.wmc-star--full  { color: var(--wmc-accent);                font-size: 18px; }
.wmc-star--half  { color: var(--wmc-accent); opacity: 0.65; font-size: 18px; }
.wmc-star--empty { color: rgba(255,255,255,0.35);            font-size: 18px; }
.wmc-stars       { display: flex; gap: 3px; align-items: center; }

.wmc-single-stars .wmc-star--full,
.wmc-single-stars .wmc-star--half,
.wmc-single-stars .wmc-star--empty {
    font-size: 28px;
}

.wmc-single-stars {
    margin:        20px 0 20px;
    padding:       16px;
    border-left:   4px solid var(--wmc-accent);
    background:    #fafafa;
}
.wmc-single-stars .wmc-rating-text {
    font-size: 15px;
}
.wmc-single-stars .wmc-star--empty {
    color: #ddd;
}