/* =====================================================================
   Open House FKG UI 2026 — "Meet Me at The Smile Street"
   Shared decoration for the order flow.

   Loaded LAST in the <head> of index.php, form.php, summary.php,
   payment.php and order-success.php, after style2.css and after each
   page's own inline <style> block.

   The palette itself lives in style2.css (:root) and is re-declared per
   page as --brand-*; this file only adds what the 2026 design needs and
   the 2025 theme had no concept of: the shopfront awning, the bulb strip,
   the display typeface, and the cream card treatment.

   Fonts and imagery are shared with the landing page rather than copied,
   so there is one source of truth per asset.
   ===================================================================== */

@font-face {
  font-family: "GothamBold";
  src: url("../landing/assets/fonts/Gotham-Bold.woff2") format("woff2"),
    url("../landing/assets/fonts/Gotham-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   Typography — display face for headings, Montserrat for everything else.
   font-weight stays 400 on GothamBold because the face is already bold;
   asking for 700 makes the browser synthesise a second bolding pass.
   --------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
.section-title,
.price-title,
.card-title-custom {
  font-family: "GothamBold", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px;
}

.price-value,
.total-amount {
  font-family: "GothamBold", "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  color: var(--primary-color) !important;
}

/* ---------------------------------------------------------------------
   The shopfront awning. Every "shop" along Smile Street has one, so it is
   the motif that ties the checkout to the landing page. Applied as a
   ::before strip on cards rather than an image — no request, no 404.
   --------------------------------------------------------------------- */
.card-custom,
.price-card {
  position: relative;
  overflow: hidden;
  background: var(--accent-color) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 18px !important;
  padding-top: 26px !important; /* room so the awning never sits on text */
}

.card-custom::before,
.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--secondary-color) 0 20px,
    var(--primary-color) 20px 40px
  );
}

/* ---------------------------------------------------------------------
   Card header = the shopfront sign under the awning.

   style2.css:713 paints this with linear-gradient(45deg, primary, dark),
   which in the 2026 palette runs red into green and reads as mud. Worse, the
   page-level blocks in form.php and summary.php set .card-title-custom to a
   dark green TEXT colour, which on that gradient is nearly unreadable.
   Solid green with warm cream text fixes both, and it is declared here (loaded
   last, with !important) so it beats both the stylesheet and the inline blocks.
   --------------------------------------------------------------------- */
.card-title-custom {
  background: var(--dark-color) !important;
  color: #fff8e0 !important;
  padding: 18px 24px !important;
  border-radius: 14px 14px 0 0 !important;
  font-size: 1.35rem !important;
}

/* ---------------------------------------------------------------------
   Marquee bulb strip under the navbar — the landing page's lit-bulb row.
   Decorative only, so it is a pseudo-element with no content of its own
   and is invisible to assistive tech.
   --------------------------------------------------------------------- */
.navbar {
  border-bottom: 3px solid var(--secondary-color) !important;
  box-shadow: 0 6px 22px rgba(31, 109, 58, 0.28) !important;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 6px;
  background-image: radial-gradient(
    circle,
    var(--light-color) 0 2.5px,
    transparent 3px
  );
  background-size: 26px 6px;
  background-repeat: repeat-x;
  opacity: 0.95;
  pointer-events: none;
}

.navbar-brand img {
  height: 42px;
  width: auto;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fffaf0 !important;
  border-radius: 12px !important;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-outline-primary,
.btn-light {
  border-radius: 12px !important;
  border: 2px solid var(--dark-color) !important;
  background: #eef8e6 !important;
  color: var(--dark-color) !important;
  font-weight: 800;
}

/* Visible keyboard focus. The 2025 theme relied on the browser default,
   which is invisible against a cream card. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Text that sits DIRECTLY on the street artwork, with no card behind it.

   style2.css was written for white text over a dark photo and still carries
   those rules:
     :280-283  .hero-title      color:white + text-shadow 0 2px 10px rgba(0,0,0,.3)
     :348-351  .section-title h2 color:white + text-shadow 0 2px 5px  rgba(0,0,0,.3)
     :356      .section-title p  color:rgba(255,255,255,.9)

   Recolouring the text to dark green left those black glows in place, which is
   what made the headings look smudged and hard to read — dark letters wearing a
   dark halo. And .section-title p was still white, so all five section
   descriptions in index.php were rendering white-on-cream, i.e. invisible.

   Fixed here rather than per page so all five pages agree: dark ink, and the
   glow inverted to a cream halo, which lifts the letters off the busy street
   art far better than removing the shadow altogether.
   --------------------------------------------------------------------- */
.hero-title,
.section-title h2 {
  color: var(--ink-strong) !important;
  text-shadow: 0 0 10px rgba(253, 243, 223, 0.95), 0 0 22px rgba(253, 243, 223, 0.85),
    0 1px 1px rgba(253, 243, 223, 0.9) !important;
}

.section-title p {
  color: #3c4f43 !important;
  text-shadow: 0 0 10px rgba(253, 243, 223, 0.95), 0 0 18px rgba(253, 243, 223, 0.8) !important;
}

/* The hero copy already sits on its own opaque cream panel, so it needs the
   dark glow removed but no halo of its own. */
.hero-subtitle {
  text-shadow: none !important;
}

/* ---------------------------------------------------------------------
   Section heading with the "street sign" underline
   --------------------------------------------------------------------- */
.section-title {
  color: var(--ink-strong) !important;
}

.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--primary-color);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer {
  background: var(--dark-color) !important;
  color: #fff8e0 !important;
  border-top: 4px solid var(--secondary-color);
}

.footer a {
  color: var(--light-color) !important;
}

/* ---------------------------------------------------------------------
   Elmo and Abby.
   Decorative, so alt="" in the markup and pointer-events:none here.
   Hidden below 1500px for the same reason as the landing page: on a narrow
   viewport they cover the content instead of framing it.
   --------------------------------------------------------------------- */
/*
  Hidden by default and painted as background-images only above 1500px.

  They were <img> tags with display:none below the breakpoint, which still
  downloads the files — measured at 395 KB of Elmo and Abby fetched and thrown
  away on every phone. Declaring the URLs inside the media query means a narrow
  viewport never requests them at all. This is why the markup uses empty <div>s
  rather than <img>: an <img src> always loads.

  Sizes are derived from the real crops so nothing is distorted:
  elmo 468x700 (0.669), abby 737x700 (1.053).
*/
.mascot-2026 {
  display: none;
}

@media (min-width: 1501px) {
  .mascot-2026 {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    filter: drop-shadow(0 14px 20px rgba(40, 20, 10, 0.34));
  }

  .mascot-2026.elmo {
    left: 12px;
    width: 167px;
    height: 250px;
    background-image: url("../landing/assets/img/elmo.png");
    animation: mascotFloat 6s ease-in-out infinite;
  }

  .mascot-2026.abby {
    right: 12px;
    width: 226px;
    height: 215px;
    background-image: url("../landing/assets/img/abby-cadabby.png");
    animation: mascotFloat 7s ease-in-out 0.8s infinite;
  }
}

@keyframes mascotFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-2026 {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Readability of body copy over the street background.
   --------------------------------------------------------------------- */
.price-description,
.card-custom p,
.card-custom li {
  color: #4a5a4f !important;
}

.availability-info {
  color: var(--text-light) !important;
  font-weight: 600;
}

/* Text inputs and selects, matched to the cream cards.

   `.quantity-input` is deliberately NOT in this list. Despite the name it is a
   container (style2.css:453 — height:85px, display:flex, max-width:150px) that
   wraps the label and the field, not the field itself. Styling it as an input
   put a 2px frame around an 85px-tall flex box and made the quantity boxes on
   index.php look like oversized empty rectangles. */
.form-control,
.form-select {
  border: 2px solid var(--border-warm) !important;
  border-radius: 10px !important;
  background: #fffdf7 !important;
  color: var(--text-dark) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color) !important;
  box-shadow: 0 0 0 3px rgba(233, 80, 63, 0.2) !important;
}

/* ---------------------------------------------------------------------
   Quantity number boxes: no border.

   These sit inside a cream card that already has its own frame, so a second
   outline around a 150px-wide number box just read as a stray line. The field
   is still obviously a field because it keeps a distinct fill, is centred and
   bold, and the spinner arrows remain.

   Scoped through the .quantity-input wrapper so this only affects the ticket
   and merchandise quantity boxes on index.php — the name/school text inputs on
   form.php keep their border.
   --------------------------------------------------------------------- */
.quantity-input input[type="number"] {
  border: 0 !important;
  box-shadow: none !important;
  background: var(--cream-bg) !important;
  border-radius: 10px !important;
  text-align: center;
  font-weight: 700;
  color: var(--ink-strong) !important;
  max-width: 110px;
  margin: 0 auto;
}

/* Removing a border must not remove the focus affordance — keyboard users still
   need to see where they are. */
.quantity-input input[type="number"]:focus,
.quantity-input input[type="number"]:focus-visible {
  background: #fffdf7 !important;
  box-shadow: 0 0 0 3px rgba(233, 80, 63, 0.3) !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------
   Wide tables (the order recap on summary.php) must scroll inside their
   own box instead of pushing the page sideways on a phone.
   --------------------------------------------------------------------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}