/* ═══════════════════════════════════════════════════════════════
   Picklr shared chrome — brand fonts, design tokens, footer.

   Loaded on EVERY page so the nav and footer in partials/nav.php and
   partials/footer.php render correctly outside the location templates.
   Before this existed, the fonts and :root tokens lived only inside those
   templates, so css/nav.css resolved var(--navy) to nothing anywhere else.

   Nav rules are NOT here — css/nav.css is the single source for those and
   is enqueued alongside this file. Don't copy them in; they drift.

   Deliberately additive only. No reset, no `body` typography, no bare element
   selectors beyond @font-face: this sits on top of Elementor-built pages and
   must not touch their layout. Footer rules are scoped to `.picklr-footer`,
   never bare `footer`, because page content may contain its own.

   The three location templates still carry inline copies of the footer rules.
   Those come after this file in the document and win where they overlap —
   identical values, so no visual difference. De-duplicating is a separate job.
   ═══════════════════════════════════════════════════════════════ */

/* ─── BRAND FONTS ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Pickler Social';
  src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Regular-1.woff2') format('woff2'),
       url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Regular-1.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pickler Social';
  src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Medium-1.woff2') format('woff2'),
       url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Medium-1.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pickler Social';
  src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Bold-1.woff2') format('woff2'),
       url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocial-Bold-1.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pickler Social Condensed';
  src: url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocialCondensed-Black.woff2') format('woff2'),
       url('https://thepicklr.com/wp-content/uploads/2025/01/PicklrSocialCondensed-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  --navy:      #000000;
  --navy-dark: #111f25;
  --cyan:      #0075E7;
  --cyan-dark: #0063c7;
  --cream:     #F8F0E0;
  --cream-dark:#e8d8c0;
  --gold:      #D9C696;
  --brand-blue:#0075E7;
  --brand-blue-dark:#0063c7;
  --white:     #ffffff;
  --offwhite:  #F4F6F8;
  --muted:     #667085;
  --border:    #e2e8f0;
  --radius:    10px;
  --radius-lg: 18px;
}

/* ─── FOOTER ───────────────────────────────────────────────────── */
.picklr-footer {
  background: var(--navy);
  padding: 48px 0 32px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: 'Pickler Social', 'Montserrat', sans-serif;
}
.picklr-footer .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.picklr-footer .footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; margin-bottom: 40px;
  flex-wrap: wrap;
}
.picklr-footer .footer-brand p {
  font-size: 13px; color: rgba(255,255,255,.4);
  max-width: 240px; line-height: 1.6;
}
.picklr-footer .footer-brand img { display: block; }
.picklr-footer .footer-links { display: flex; gap: 64px; flex-wrap: wrap; }
.picklr-footer .footer-col h5 {
  font-family: 'Pickler Social', 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.picklr-footer .footer-col a {
  display: block;
  font-size: 14px; color: rgba(255,255,255,.65);
  margin-bottom: 10px;
  text-decoration: none;
  transition: color .2s;
}
.picklr-footer .footer-col a:hover { color: var(--white); }

/* A column heading is a linked menu item when its top-level item has a real URL.
   It must keep the heading's own styling, not the link styling above — and this
   has to out-specify the `.footer-col a` rules the location templates still
   inline, which come later in the document. */
.picklr-footer .footer-col h5 a {
  display: inline;
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
.picklr-footer .footer-col h5 a:hover { color: var(--white); }
.picklr-footer .footer-social { display: flex; gap: 12px; margin-top: 16px; }
.picklr-footer .footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.picklr-footer .footer-social a:hover { background: var(--cyan); }
.picklr-footer .footer-social svg { width: 16px; height: 16px; color: var(--white); }
.picklr-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.picklr-footer .footer-bottom p { font-size: 12px; color: rgba(255,255,255,.3); }
.picklr-footer .footer-bottom a { color: rgba(255,255,255,.5); text-decoration: none; }

/* ─── RESPONSIVE ───────────────────────────────────────────────── */
/* Nav responsive rules live in css/nav.css. */
@media (max-width: 768px) {
  .picklr-footer .footer-top { flex-direction: column; }
  .picklr-footer .footer-links { flex-direction: column; gap: 32px; }
  .picklr-footer .footer-bottom { flex-direction: column; text-align: center; }
}