/* /css/site.css
   Clean unified stylesheet:
   - Body text stays white
   - Service nav baseline stays gold; hover glow; active service is plaque + black text
   - Home is a TRUE floating pill (rounded bottom corners) above the divider line
   - Mobile-only page padding override (wins over reset)
*/

/* =========================
   Variables
   ========================= */
:root {
  --bg-color: #050505;

  --gold-base: #C5A059;
  --gold-shine: #fcf6ba;
  --gold-dark: #aa771c;

  --ease-soft: 0.65s ease;

  /* service hover + glow */
  --service-halo-strong: rgba(197, 160, 89, 0.10);
  --service-halo-mid: rgba(197, 160, 89, 0.06);
  --service-glow-1: rgba(197, 160, 89, 0.22);
  --service-glow-2: rgba(197, 160, 89, 0.14);

  /* home pill */
  --home-pill-bg: rgba(5, 5, 5, 0.70);
  --home-pill-border: rgba(197, 160, 89, 0.28);
  --home-pill-text: rgba(197, 160, 89, 0.85);

  /* service page body text override */
  --body-text: rgba(255, 255, 255, 0.92);
}

/* =========================
   Reset / Base
   ========================= */
html, body {
  margin: 0;
  padding: 0 !important; /* note: overridden on mobile below */
}

body {
  background-color: var(--bg-color);
  background-image: radial-gradient(circle at center, #111 0%, #050505 70%);
  color: #f8f8f8;
  font-family: 'Cinzel', serif;
}

/* --- Gold Foil Text Effect --- */
.gold-text {
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.font-lato {
  font-family: 'Lato', sans-serif;
}

/* Divider */
.gold-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-base), transparent);
  opacity: 0.3;
}

/* =========================
   Services Nav Items
   ========================= */
.service-item {
  position: relative;
  display: inline-block;
  z-index: 1;

  font-weight: 400;
  color: var(--gold-base);

  transition: color var(--ease-soft), text-shadow var(--ease-soft);
}

/* hover highlight band */
.service-item::before {
  content: '';
  position: absolute;
  left: -18px;
  right: -18px;
  top: -10px;
  bottom: -10px;

  border-radius: 9999px;
  pointer-events: none;
  z-index: -1;

  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    var(--service-halo-mid) 22%,
    var(--service-halo-strong) 50%,
    var(--service-halo-mid) 78%,
    rgba(0, 0, 0, 0) 100%
  );

  opacity: 0;
  transition: opacity var(--ease-soft), background var(--ease-soft), border-radius var(--ease-soft);
}

/* underline */
.service-item::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-base);
  transition: width 0.3s ease, left 0.3s ease, background 0.3s ease;
}

/* hover state */
.service-item:hover::before { opacity: 1; }
.service-item:hover::after { width: 100%; left: 0; }

.service-item:hover {
  color: rgba(252, 246, 186, 0.95);
  text-shadow:
    0 0 8px var(--service-glow-1),
    0 0 14px var(--service-glow-2);
}

/* keyboard accessibility */
.service-item:focus-visible {
  outline: 2px solid rgba(252, 246, 186, 0.35);
  outline-offset: 6px;
  border-radius: 6px;
}

/* larger hitbox on mobile */
.service-link {
  padding: 10px 12px;
  margin: -10px -12px;
}

@media (min-width: 768px) {
  .service-item::before {
    left: -24px;
    right: -24px;
  }
}

/* =========================
   Active Service (Service Pages)
   Plaque (no layout shift)
   ========================= */
.service-item.is-active {
  font-weight: 400 !important;
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  text-shadow: none !important;
}

.service-item.is-active::before {
  opacity: 1 !important;
  border-radius: 4px !important;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(197,160,89,0.55) 12%,
    rgba(252,246,186,0.92) 50%,
    rgba(197,160,89,0.55) 88%,
    rgba(0,0,0,0) 100%
  ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(197,160,89,0.22),
    0 0 22px rgba(197,160,89,0.10);
}

.service-item.is-active::after {
  width: 100% !important;
  left: 0 !important;
  background: rgba(5,5,5,0.55);
}

.service-item.is-active:hover {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  text-shadow: none !important;
}

/* =========================
   Logo (subtle + smooth)
   ========================= */
.logo-svg {
  filter: drop-shadow(0 0 14px rgba(197, 160, 89, 0.14));
  transition: filter 0.55s ease;
}
.logo-svg:hover {
  filter: drop-shadow(0 0 18px rgba(197, 160, 89, 0.18));
}

.logo-color {
  color: var(--gold-base);
  transition: color 0.55s ease;
}
.logo-color:hover {
  color: rgba(252, 246, 186, 0.92);
}

/* =========================
   Content Sections
   ========================= */
.content-section {
  max-width: 64rem;
  margin: 0 auto;
}

/* Make Tailwind-ish gray body copy readable (white-ish) */
.content-section .font-lato.text-gray-300,
.content-section .font-lato.text-gray-400,
.content-section .font-lato.text-gray-500 {
  color: var(--body-text) !important;
}

/* =========================
   Pills (general)
   ========================= */
.action-pill {
  border: 1px solid rgba(197, 160, 89, 0.22);
  border-radius: 9999px;
  padding: 8px 12px;
  transition: color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.action-pill:hover {
  color: var(--gold-shine);
  border-color: rgba(252, 246, 186, 0.35);
}

/* Contact pills (label | value) */
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.contact-pill__label {
  color: rgba(170, 119, 28, 0.95);
}

.contact-pill__sep {
  color: rgba(197, 160, 89, 0.35);
}

.contact-pill__value {
  letter-spacing: 0.08em;
}

/* Diamond separators */
.diamond-sep {
  display: inline-block;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  margin: 0 12px;
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  opacity: 0.75;
  border-radius: 1px;
}

@media (min-width: 768px) {
  .diamond-sep { width: 7px; height: 7px; }
}

/* =========================
   Home Tab Rail
   ========================= */
.home-tab-rail {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.home-tab-rail .gold-divider {
  margin: 0;
}

/* =========================
   OPTION D: Home TRUE floating pill
   (rounded bottom corners, floats above divider, no border overlap)
   ========================= */
.home-tab {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-135%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 18px;

  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-decoration: none;
  text-transform: uppercase;

  border-radius: 9999px;

  background: var(--home-pill-bg);
  border: 1px solid var(--home-pill-border);
  color: var(--home-pill-text);

  backdrop-filter: blur(3px);

  box-shadow: 0 0 12px rgba(197, 160, 89, 0.10);

  transition:
    color var(--ease-soft),
    border-color var(--ease-soft),
    box-shadow var(--ease-soft),
    transform 0.35s ease;

  z-index: 6;
}

.home-tab:hover {
  color: rgba(252, 246, 186, 0.95);
  border-color: rgba(252, 246, 186, 0.45);
  box-shadow: 0 0 18px rgba(197, 160, 89, 0.18);

  /*transform: translate(-50%, -135%) translateY(-1px);*/
}

/* =========================
   Mobile tweaks
   ========================= */

/* Home pill sizing on very small screens */
@media (max-width: 480px) {
  .home-tab {
    padding: 6px 16px;
    font-size: 0.82rem;
    letter-spacing: 0.09em;
  }
}

/* Mobile-only page padding (must override reset padding:0 !important) */
@media (max-width: 640px) {
  body {
    padding-top: 10px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  html, body {
    overflow-x: hidden;
  }
}