/* site.css — public-facing default styles
   Loaded before client-styles.css so every rule here can be overridden.

   Order:
     0. CSS custom property defaults (overridden by theme_settings at runtime)
     1. Typography
     2. Layout  (nav, hero, footer)
     3. Components  (pagination, lightbox)
     4. Utilities
*/

/* ── 0. CSS custom property defaults ────────────────────────────────── */
:root {
  /* Brand palette */
  --brand-dark: #230e00;
  --brand-primary: #532605;
  --brand-primary-hover: #6d360d;
  --brand-accent: #e9ca77;
  --brand-text-light: #fff9d5;
  --brand-bg-light: #fffdf1;
  --brand-outline: #492607;
  --brand-heading: #7b380c;
  /* Hero */
  --hero-bg: #230e00;
  --hero-overlay: rgba(59, 27, 0, 0.45);
  --hero-headline-color: #e9ca77;
  --hero-subtext-color: #fff9d5;
  /* Typography — overridden at runtime from theme_settings */
  --font-body: 'Nunito', sans-serif;
  --font-display: 'Satisfy', cursive;
  --font-accent: 'Caveat', cursive;
}

/* ── 1. Typography ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
}
/* Font utility classes — semantic names so templates are font-agnostic */
.font-decorative {
  font-family: 'Praise', cursive;
}
.font-display {
  font-family: var(--font-display);
}
.font-accent {
  font-family: var(--font-accent);
}
.font-body {
  font-family: var(--font-body);
}
.sub-scale-font-75 {
  font-size: 0.75rem;
}

/* ── 2. Layout ───────────────────────────────────────────────────────── */

/* Nav — high stacking context so dropdowns render above hero overlay
   (z-1), sticky bars (z-100), etc. */
.public-nav {
  position: relative;
  z-index: 1025;
}
.navbar-logo {
  max-height: 170px;
  max-width: 286px;
  object-fit: contain;
}

/* Nav dropdown */
@keyframes nav-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.public-nav .dropdown-menu {
  background-color: #1a1a1a;
  border: none;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 0 0.2rem 0.2rem;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  min-width: 14rem;
  animation: nav-dropdown-in 0.18s ease both;
}
.public-nav .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.55rem 1.4rem;
  box-shadow: inset 3px 0 0 transparent;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
  line-height: 1.2;
}
.public-nav .dropdown-item:hover,
.public-nav .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5);
}
.public-nav .dropdown-item:active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.public-nav .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0.25rem 0.75rem;
  opacity: 1;
}
.public-nav .dropdown-item-text {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1.4rem;
}

/* Hero */
.hero-section {
  background-color: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}
.hero-has-image .navbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
}

/* ── 3. Components ───────────────────────────────────────────────────── */

/* Pagination */
.site-pagination {
  gap: 0.35rem;
}
.site-pagination .page-item .site-page-link {
  border: none;
  border-radius: 0.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #333;
  background: transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.site-pagination .page-item .site-page-link:hover {
  background-color: #f0f0f0;
  color: #111;
}
.site-pagination .page-item .site-page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
}
.site-pagination .page-item.active .site-page-link {
  background-color: #222;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.site-pagination .page-item.disabled .site-page-link {
  color: #ccc;
  background: transparent;
  pointer-events: none;
}

/* Pill pagination */
.pill-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.pp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.7rem;
  padding: 0px 1.8rem;
  border-radius: 2rem;
  background-color: #222;
  color: #fff;
  border: 1px solid #222;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.pp-pill:hover {
  background-color: #3a3a3a;
  border-color: #3a3a3a;
  color: #fff;
}
.pp-pill--active {
  padding: 0.8rem 2.5rem;
  background-color: #505050;
  border-color: #505050;
  color: #fff;
  cursor: default;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.pp-pill--active:hover {
  background-color: #505050;
  border-color: #505050;
}
.pp-pill--disabled {
  background-color: transparent;
  border-color: #222;
  color: #222;
  pointer-events: none;
}

/* Lightbox */
.img-lightbox {
  max-height: 80vh;
}

/* ── 4. Utilities ────────────────────────────────────────────────────── */
.cursor-pointer {
  cursor: pointer;
}
.ls-wide {
  letter-spacing: 0.06em;
}
.min-vh-50 {
  min-height: 50vh;
}
.py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.text-shadow-strong {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.75),
    0 4px 10px rgba(0, 0, 0, 0.65);
}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.25s ease,
    color 0.3s ease,
    text-shadow 0.3s ease,
    filter 0.3s ease;
}
.footer-link {
  color: rgba(255, 255, 255, 0.55);
}
.footer-social-icon:hover {
  transform: translateY(-3px) scale(1.15);
}
.footer-social-icon {
  color: rgba(255, 255, 255, 0.55);
}
.footer-social-icon[data-social='facebook']:hover {
  color: #1877f2 !important;
  text-shadow:
    0 0 10px rgba(24, 119, 242, 0.6),
    0 0 20px rgba(24, 119, 242, 0.3);
}

.footer-social-icon[data-social='instagram']:hover {
  color: #e1306c !important;
  text-shadow:
    0 0 10px rgba(225, 48, 108, 0.6),
    0 0 20px rgba(225, 48, 108, 0.3);
}

.footer-social-icon[data-social='twitter']:hover {
  color: #eff3f4 !important;
  text-shadow:
    0 0 10px rgba(239, 243, 244, 0.6),
    0 0 20px rgba(239, 243, 244, 0.25);
}

.footer-social-icon[data-social='tiktok']:hover {
  color: #fe2c55 !important;
  text-shadow:
    0 0 10px rgba(254, 44, 85, 0.6),
    0 0 20px rgba(254, 44, 85, 0.3);
}

.footer-social-icon[data-social='youtube']:hover {
  color: #ff0000 !important;
  text-shadow:
    0 0 10px rgba(255, 0, 0, 0.6),
    0 0 20px rgba(255, 0, 0, 0.3);
}

.footer-social-icon[data-social='linkedin']:hover {
  color: #0a66c2 !important;
  text-shadow:
    0 0 10px rgba(10, 102, 194, 0.6),
    0 0 20px rgba(10, 102, 194, 0.3);
}

.footer-social-icon[data-social='pinterest']:hover {
  color: #e60023 !important;
  text-shadow:
    0 0 10px rgba(230, 0, 35, 0.6),
    0 0 20px rgba(230, 0, 35, 0.3);
}

.footer-social-icon[data-social='yelp']:hover {
  color: #d32323 !important;
  text-shadow:
    0 0 10px rgba(211, 35, 35, 0.6),
    0 0 20px rgba(211, 35, 35, 0.3);
}

.footer-social-icon[data-social='snapchat']:hover {
  color: #fffc00 !important;
  text-shadow:
    0 0 10px rgba(255, 252, 0, 0.6),
    0 0 20px rgba(255, 252, 0, 0.3);
}

.footer-social-icon[data-social='threads']:hover {
  color: #eff3f4 !important;
  text-shadow:
    0 0 10px rgba(239, 243, 244, 0.6),
    0 0 20px rgba(239, 243, 244, 0.25);
}