/* ============================================================
   1pp.css  -  the one place colors, fonts and spacing live.
   Built July 25, 2026.  Site version v87.

   HOW IT WORKS
   This file is linked at the END of each page's <head>, after that
   page's own <style> block. That means the tokens here WIN over the
   old per-page :root block, without anything being deleted from the
   page. If a page needs a token this file does not define, the page's
   own old block still supplies it. The patch is purely additive.

   The <html> tag carries data-pp="site" | "admin" | "store".
   Each of those had its own palette before. They are kept separate
   on purpose so nothing changes appearance.

   Later cleanup: once this is proven, the dead :root blocks inside
   each page can be deleted. Not required for anything to work.
   ============================================================ */


/* ---------- 1. PUBLIC MARKETING SITE ----------
   index, about, band/choir/orchestra/color-guard/theater/sports
   pages, stores, feedback, funnel, testimonials.
   These are the real brand colors.                            */
[data-pp="site"] {
  --navy:    #012E57;
  --blue:    #0055A5;
  --orange:  #E87722;
  --azure:   #3FA6E8;
  --gold:    #FFC529;
  --ink:     #0F1722;
  --paper:   #FFFFFF;
  --mist:    #F1F4F8;
  --line:    #E2E8F0;
  --muted:   #5C6B7A;
  --maxw:    1180px;
}


/* ---------- 2. ADMIN ----------
   dashboard, product management, production board, blanks, CRM,
   seasons, orders, store builder, logins.
   NOTE: this palette is not the brand. Kept as-is for now so this
   step changes nothing visually. Changing it is a design decision
   for the Fable pass, and when it happens it happens here, once. */
[data-pp="admin"] {
  --blue:    #1a3a5c;
  --mid:     #1e3a52;
  --gold:    #e8a020;
  --gold-lt: #f5c35a;
  --dark:    #0f1e2e;
  --surface: #f7f8fa;
  --white:   #ffffff;
  --border:  #dde3ea;
  --text:    #1a2633;
  --muted:   #6b7c8d;
  --green:   #1a8a4a;   /* was #1c7c3a on the production board and
                           #1e7e5a on one other page. One value now. */
  --red:     #c0392b;
  --purple:  #9a4bd6;
  --radius:  8px;
  --shadow:  0 2px 12px rgba(0,0,0,.08);
}


/* ---------- 3. STOREFRONT ----------
   storefront, checkout, director portal. What a parent sees.
   The school colors below are only defaults. storefront.html
   overwrites them at runtime from the store record with
   documentElement.style.setProperty, which beats this file.

   The old hardcoded fallback school name "Warrenton Music Boosters"
   is gone. It was never read by anything.                      */
[data-pp="store"] {
  --school-primary:   #003087;
  --school-secondary: #FFD700;
  --school-accent:    #FFFFFF;
  --dark:      #0d1117;
  --surface:   #f7f8fa;
  --white:     #ffffff;
  --border:    #e2e8f0;
  --text:      #1a202c;
  --muted:     #718096;
  --green:     #1a8a4a;
  --red:       #c0392b;
  --radius:    12px;    /* one page was 10px */
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --heading-display: 'Barlow Condensed', sans-serif;
  --serif-display:   'Cormorant Garamond', Georgia, serif;
}


/* ============================================================
   MOBILE ADMIN NAVIGATION

   Before this, every admin page hid its sidebar under 900px and
   put nothing in its place. admin-dashboard.html had no media
   query at all, so on a phone a fixed 220px sidebar sat on top of
   content that was pushed 220px right on a 375px screen.

   Below 900px the sidebar becomes a drawer that slides in from the
   left, opened by a button in the top left corner. 1pp-ui.js adds
   the button and the backdrop.

   Two different sidebars exist. .sidebar is built into
   admin-dashboard.html. .onepp-nav is injected by admin-nav.js on
   every other admin page. Both are handled here.
   ============================================================ */

.pp-navbtn,
.pp-scrim { display: none; }

@media (max-width: 900px) {

  /* the drawer itself */
  .sidebar,
  .onepp-nav {
    display: flex !important;
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 250px !important;
    min-width: 250px !important;
    box-shadow: 0 0 30px rgba(0,0,0,.4);
    z-index: 1200 !important;
  }

  .pp-nav-open .sidebar,
  .pp-nav-open .onepp-nav { transform: translateX(0); }

  /* content takes the full width, nothing hides under the drawer */
  body { margin-left: 0 !important; }
  .main { margin-left: 0 !important; }

  /* room for the button so it never covers a page title */
  body { padding-top: 60px !important; }
  .main > .topbar,
  .topbar { padding-left: 58px !important; }

  /* the open button */
  .pp-navbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    z-index: 1300;
    border: none;
    border-radius: 8px;
    background: #0f1e2e;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    -webkit-tap-highlight-color: transparent;
  }
  .pp-navbtn:active { background: #1a3a5c; }

  /* tap anywhere else to close */
  .pp-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .pp-nav-open .pp-scrim { opacity: 1; pointer-events: auto; }

  /* stop the page scrolling behind an open drawer */
  .pp-nav-open body { overflow: hidden; }

  /* the open button sits in the top left corner, so the drawer's own
     logo needs to start below it or the button covers the wordmark */
  .sidebar .sidebar-logo,
  .onepp-nav .slogo { padding-top: 64px !important; }

  /* bigger tap targets in the drawer */
  .onepp-nav a { padding: 13px 18px !important; font-size: 15px !important; }
  .sidebar a   { padding: 13px 18px !important; }
}

/* Wide tables are the other thing that breaks a phone. Any table
   inside .pp-scroll can be swiped sideways instead of blowing out
   the layout. Opt in by adding the class, nothing changes without it. */
.pp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
