/* ============================================================
   Pride Pak — website styles
   Multi-page static site. Base look is mostly inline in each
   HTML file; this file holds the reset, typography, focus and
   hover states, the responsive nav, and active-page styling.

   Accessibility notes (WCAG 2.1 AA / AODA / ADA):
     - Visible focus indicator on every interactive element.
     - Colour choices meet AA contrast (see gold token below).
     - Reduced-motion preference respected.
     - Active nav conveyed by aria-current + underline (not
       colour alone).
   ============================================================ */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#20241a;
  background:#ffffff;
  line-height:1.6;
  font-size:18px;
}
h1,h2,h3,h4{ font-family:'Archivo','Public Sans',system-ui,sans-serif; line-height:1.15; margin:0; font-weight:800; }
p{ margin:0; }
a{ color:#4c6528; transition:color .15s ease, background-color .15s ease, opacity .15s ease, text-decoration-color .15s ease; }
a:hover{ color:#33481c; text-decoration:underline; }
button{ font:inherit; transition:background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .12s ease; cursor:pointer; }
button:hover{ opacity:0.92; }
img{ max-width:100%; display:block; }
ul{ margin:0; }

/* Visible keyboard focus — high-contrast dark green (>=10:1 on white).
   Applies to links, buttons, inputs, and the focusable <main>. */
*:focus-visible{ outline:3px solid #33481c; outline-offset:3px; border-radius:3px; }

/* Keep focused targets clear of the sticky header when jumped to. */
h1,h2,h3, #main, input, textarea, select, fieldset, [tabindex]{ scroll-margin-top:96px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- page shell ---- */
.pp-shell{ min-height:100vh; display:flex; flex-direction:column; background:#ffffff; }
main#main{ flex:1; outline:none; }

/* ---- skip link ---- */
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:#33481c; color:#fff; padding:12px 18px; border-radius:8px;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:8px; }

/* ---- header / nav hover + active states ---- */
.pp-nav-link{ position:relative; text-decoration:none; padding:12px 13px; font-weight:600; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; color:#20241a; border-radius:6px; background:transparent; border:0; cursor:pointer; }
.pp-nav-link:hover{ color:#4c6528; background:#f2f5ec; text-decoration:none; }

/* Active page (or active parent for the Products dropdown): green text
   plus a gold underline so it does not rely on colour alone. */
.pp-nav-link[aria-current="page"], .pp-nav-link.is-parent-active{ color:#4c6528; }
.pp-nav-link[aria-current="page"]::after, .pp-nav-link.is-parent-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:3px; background:#8a6410; border-radius:2px;
}
/* Nav buttons with a dropdown caret: pull the underline in from the caret. */
.pp-nav-link.pp-has-caret[aria-current="page"]::after, .pp-nav-link.pp-has-caret.is-parent-active::after{ right:26px; }

.pp-cta{ text-decoration:none; }
.pp-cta:hover{ background:#33481c !important; color:#fff; text-decoration:none; }
.pp-cta-outline:hover{ background:#eef3ea !important; text-decoration:none; }

/* ---- products dropdown ---- */
.pp-drop-item{ display:block; text-decoration:none; padding:11px 14px; border-radius:8px; color:#20241a; font-weight:600; font-size:15px; }
.pp-drop-item:hover{ background:#eef3ea; color:#4c6528; text-decoration:none; }
.pp-drop-item[aria-current="page"]{ background:#eef3ea; color:#4c6528; }

/* ---- mobile nav active state ---- */
.pp-mobile-panel a[aria-current="page"]{ background:#f2f5ec; color:#4c6528; }

/* ---- home "what we do" cards ---- */
.pp-card{ display:flex; flex-direction:column; height:100%; text-decoration:none; border-radius:18px; overflow:hidden; border:1px solid #dfe3d7; background:#fff; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pp-card:hover{ border-color:#4c6528; box-shadow:0 14px 30px rgba(20,40,20,0.13); transform:translateY(-4px); text-decoration:none; }

/* ---- document download links (Accessibility page) ---- */
.pp-doc-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:12px 20px; border:2px solid #4c6528; border-radius:10px; color:#33481c; font-weight:700; background:#ffffff; line-height:1.3; }
.pp-doc-link:hover{ background:#4c6528; color:#ffffff; text-decoration:none; }
.pp-doc-icon{ font-size:18px; line-height:1; }

/* ---- footer links ---- */
footer a{ color:#e7eee0; text-decoration:none; }
footer a:hover{ color:#e6bb4d !important; text-decoration:underline; }

/* ---- responsive nav: desktop vs mobile ---- */
.pp-desktop-nav{ display:flex; align-items:center; gap:2px; }

/* FIXED: display:none on desktop — no inline style on the button can override this
   because we removed display:flex from the inline style in index.html */
.pp-menu-btn{ display:none; }

/* FIXED: mobile panel hidden by default */
.pp-mobile-panel{ display:none; }

@media (max-width:1024px){
  .pp-desktop-nav{ display:none; }

  /* FIXED: use display:flex (not inline-flex) so flex-direction:column in the
     button's inline style works correctly on mobile */
  .pp-menu-btn{ display:flex; }

  /* FIXED: .open class shows the panel — toggled by JS */
  .pp-mobile-panel.open{ display:block; }
}