/* =====================================================================
RCPW.com — America's 250th (Semiquincentennial) Theme Overlay
=====================================================================
HOW TO USE
----------
This file does NOT modify any existing theme file. It only OVERRIDES
the site's existing CSS custom properties (the --color-* variables
already defined in /Shared/Themes/Foundation2ZGLLQ/css/variables.css)
plus a handful of new, additive rules for the graphics injected by
america250-theme.js.

TO INSTALL:
1. Upload this file anywhere on the site, e.g.
/Shared/Themes/Foundation2ZGLLQ/css/america250-theme.css
2. Add ONE line to the site's header include (or the AmeriCommerce
"Custom Header HTML/Scripts" box — no template editing required):
<link rel="stylesheet" href="/Shared/Themes/Foundation2ZGLLQ/css/america250-theme.css?v=1">

TO REMOVE (fully reverts the site to normal):
1. Delete the <link> line added above.
2. Delete this file from the server.
No original CSS/JS is ever touched, so removal is instant and clean.
===================================================================== */

:root {
  /* ---- Patriotic palette (Old Glory Red / Blue + Gold star accent) ---- */
  --color-prime:               #B31942 !important; /* Old Glory Red   */
  --color-dkprime:             #0A3161 !important; /* Old Glory Blue  */
  /*--color-accent:              #FFC72C !important; */ /* Star Gold       */
  --color-accent:							 #61001A !important;
  --color-light:               #FFFFFF !important;
  --color-white:               #FFFFFF !important;
  --color-dark:                #0A3161 !important;
  --color-neutral:             #F5F2E9 !important; /* Parchment cream */
  --gradient:                  #E8737F !important; /* Solid light red — site uses --color-dkprime (dark navy) text on top of this variable, so it must stay LIGHT for readability. No more red-to-blue gradient. */
  --color-prime-lucent:        rgba(179, 25, 66, 0.82) !important;
  --color-prime-more-lucent:   rgba(179, 25, 66, 0.55) !important;
  --color-card-hover:          rgba(255, 199, 44, 0.15) !important;

  /* Extra tokens used only by our own injected graphics/markup below */
  --a250-red:    #B31942;
  --a250-blue:   #0A3161;
  --a250-gold:   #FFC72C;
  --a250-cream:  #F5F2E9;
  --a250-banner-bg: #9C1030; /* solid, deep enough for white text contrast */
}

/* ---------------------------------------------------------------------
Subtle bunting stripe under the sticky header
--------------------------------------------------------------------- */
.head-wrap::after {
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--a250-red) 0, var(--a250-red) 24px,
    #FFFFFF 24px, #FFFFFF 48px,
    var(--a250-blue) 48px, var(--a250-blue) 72px
  );
}

/* ---------------------------------------------------------------------
America 250 ribbon banner (markup injected by america250-theme.js
as #a250-banner, styled here so JS stays free of inline styling)
--------------------------------------------------------------------- */
#a250-banner {
  position: relative;
  z-index: 999999;
  width: 100%;
  background: var(--a250-banner-bg);
  color: #fff;
  font-family: inherit;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#a250-banner .a250-star {
  color: var(--a250-gold);
}
#a250-banner .a250-countdown {
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 2px 10px;
}
#a250-banner .a250-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  opacity: .8;
  line-height: 1;
  padding: 4px;
}
#a250-banner .a250-close:hover { opacity: 1; color: var(--a250-gold); }

/* ---------------------------------------------------------------------
Fireworks / stars canvas — full-viewport, fixed, click-through
--------------------------------------------------------------------- */
#a250-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999998; /* below modals/minicart (10000000) above content */
}

/* ---------------------------------------------------------------------
Star-spangled corner badge (top of hero area)
--------------------------------------------------------------------- */
.a250-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,49,97,.85);
  border: 2px solid var(--a250-gold);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.a250-badge svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
Confetti pieces spawned by JS (position/size set inline via JS,
look/animation defined here)
--------------------------------------------------------------------- */
.a250-confetti-piece {
  position: fixed;
  top: -20px;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 999999;
  border-radius: 1px;
}

@keyframes a250-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--a250-drift, 0px), 110vh, 0) rotate(720deg); opacity: .9; }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  #a250-canvas { display: none; }
  .a250-confetti-piece { animation: none !important; display: none !important; }
}

@media (max-width: 767px) {
  #a250-banner { font-size: 12px; padding: 8px 34px; }
  .a250-badge { font-size: 10px; padding: 6px 12px 6px 8px; }
}


/* ---------------------------------------------------------------------
Page-transition "firework explosion" — plays briefly on any outbound
link click, then the browser navigates to the new page. Purely
additive/overlay based; never blocks clicks (pointer-events: none)
and respects prefers-reduced-motion (skipped entirely by the JS).
--------------------------------------------------------------------- */
.a250-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* max int32 — always on top of everything */
  pointer-events: none;
  overflow: hidden;
}
.a250-transition-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.a250-transition-overlay.a250-flash::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    circle at var(--a250-x, 50%) var(--a250-y, 50%),
    rgba(255,255,255,.95) 0%,
    rgba(232,115,127,.6) 30%,
    rgba(179,25,66,.25) 50%,
    rgba(10,49,97,0) 72%
  );
  animation: a250-flash-fade .65s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes a250-flash-fade {
  0%   { opacity: 0;   transform: scale(.15); }
  25%  { opacity: 1; }
  100% { opacity: 0;   transform: scale(2.4); }
}

/* Gentle "boom" shake applied to the page while the burst plays */
html.a250-shake {
  animation: a250-shake .5s ease-in-out;
}
@keyframes a250-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-1px, 1px); }
  30%  { transform: translate(2px, -1px); }
  45%  { transform: translate(-2px, 0); }
  60%  { transform: translate(1px, 1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .a250-transition-overlay { display: none !important; }
  html.a250-shake { animation: none !important; }
}