/*
Theme Name: Jammy Theme
Theme URI: https://jammy.co.uk
Author: Jammy Competitions
Author URI: https://jammy.co.uk
Description: Bare custom theme for Jammy Competitions. No page builder, no framework, no opinions — just a clean frame for Jammy's own plugins and shortcodes. Built to replace Astra + Elementor.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: jammy
Tags: custom, woocommerce
*/

/* ============================================================
   JAMMY DESIGN TOKENS
   Single source of truth. Nothing below should hardcode a
   colour, a font or a radius — always reference a var.
   ============================================================ */

:root {
  /* ---- Brand red ---- */
  --jam-red: #E3243B;
  --jam-red-dark: #C41E30;
  --jam-red-deep: #8E1322;          /* 3D drop under red type/buttons */
  --jam-grad: linear-gradient(135deg, #E3243B, #C41E30);

  /* ---- Gold ---- */
  --gold: #FFD96B;
  --gold-mid: #F5A623;
  --gold-deep: #C98A0E;             /* 3D drop under gold */
  --gold-ink: #6B3F00;              /* text colour on gold */
  --gold-glow: rgba(245, 197, 66, .35);
  --gold-grad: linear-gradient(135deg, #FFD96B, #F5A623);

  /* ---- Neutrals ---- */
  --cream: #FFF6E9;                 /* display text on red — not pure white */
  --ink: #1a1a1a;
  --muted: #777;
  --bg: #f4f4f4;
  --white: #fff;
  --hairline: #e6e6e6;

  /* ---- Type ---- */
  --font-display: 'Luckiest Guy', cursive;
  --font-body: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Shape ---- */
  --card-r: 14px;
  --pill: 999px;

  /* ---- Depth (the "physics") ---- */
  --lip: 4px;                       /* how far buttons press down */
  --shadow-card: 0 2px 10px rgba(0, 0, 0, .06);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, .18);

  /* ---- Layout ---- */
  --wrap: 1340px;
  --gutter: 22px;
  --header-h: 76px;
  --header-h-shrunk: 58px;

  /* ---- Logo ----
     Bottom-anchored: --logo-drop is the offset from the BOTTOM edge of
     .jam-header, so a negative value bleeds that many px onto the page.
     Anchoring to the bottom rather than the top means the topbar collapsing
     on scroll doesn't shift the logo — one reference point, both states.
     Tuned on staging: 131px wide bleeding 16px, shrinking to 86px / 5px. */
  --logo-w: 131px;
  --logo-drop: -16px;
  --logo-w-shrunk: 86px;
  --logo-drop-shrunk: -5px;
  /* Mobile (layout A): centred and contained in an 80px bar, 64px shrunk.
     Sizes must satisfy width * 0.712 + ~12px clearance <= bar height, or
     the logo crowds the bar edges. */
  --logo-w-mobile: 94px;
  --logo-w-mobile-shrunk: 74px;

  /* ---- Motion ---- */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.65, 0, .35, 1);
}

/* ============================================================
   3D DISPLAY TREATMENT
   Rule: 3D above 28px, flat below. These classes encode that —
   don't sprinkle text-shadow ad hoc.
   ============================================================ */

.jam-d            { font-family: var(--font-display); font-weight: 400; letter-spacing: .5px; line-height: 1.05; }
.jam-d-3d-red     { color: var(--jam-red); text-shadow: 0 3px 0 var(--jam-red-deep), 0 0 22px rgba(227, 36, 59, .28); }
.jam-d-3d-cream   { color: var(--cream);   text-shadow: 0 3px 0 var(--jam-red-deep), 0 0 22px var(--gold-glow); }
.jam-d-3d-gold    { color: var(--gold);    text-shadow: 0 3px 0 var(--gold-deep),    0 0 22px var(--gold-glow); }
.jam-d-flat       { text-shadow: none; }
.jam-skew         { display: inline-block; transform: skewX(-6deg); }

/* ============================================================
   MINIMAL RESET
   Deliberately small. We are not a framework.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

a { color: var(--jam-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: .5px; line-height: 1.1; }

/* Visible keyboard focus. Note: we set our own so we never have to
   fight a theme's injected focus colour again. */
:focus-visible {
  outline: 3px solid var(--gold-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader-only, used by the skip link */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.jam-skip-link {
  position: absolute; top: -100px; left: 10px; z-index: 9999;
  background: var(--jam-red); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 var(--card-r) var(--card-r);
  font-family: var(--font-display); text-decoration: none;
  transition: top .2s;
}
.jam-skip-link:focus { top: 0; }

/* ============================================================
   PAGE FRAME
   ============================================================ */

.jam-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.jam-site { display: flex; flex-direction: column; min-height: 100vh; }
.jam-main { flex: 1; padding: 30px 0 60px; }

/* ============================================================
   FOOTER — placeholder. Rebuilt properly in a later pass.
   ============================================================ */

.jam-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .7);
  padding: 40px var(--gutter);
  text-align: center;
  font-size: 14px;
}
.jam-footer a { color: var(--gold); }
.jam-footer .jam-footer-mark {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--jam-red-deep);
  margin-bottom: 8px;
}
.jam-footer-todo {
  margin-top: 14px;
  font-size: 12px;
  opacity: .45;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}