/* layout/header-tn.css — public header: ONE maroon nav bar (no logo, no top strip).
   Menu centred, gold hover line with ❖, zari border underneath, shrinks a little on scroll.
   Colours follow the home theme (--m-1 …) when set, else maroon + gold. */

.hd {
  --hd-1: var(--m-1, #7a1428);
  --hd-1d: var(--m-1d, #5c0d1d);
  --hd-gold: var(--m-gold, #c9962e);
  --hd-gold-l: var(--m-gold-l, #f4d58a);
  --hd-zari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 10 L6 1 L12 10 L18 1 L24 10' fill='none' stroke='%23c9962e' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='7.5' r='1.4' fill='%23c9962e'/%3E%3Ccircle cx='18' cy='7.5' r='1.4' fill='%23c9962e'/%3E%3C/svg%3E");
  position: sticky; top: 0; z-index: 100;
  background: none !important; box-shadow: none !important; border: 0 !important;
}
.hd-main {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, var(--hd-1d), var(--hd-1) 50%, var(--hd-1d));
  box-shadow: 0 10px 28px -16px rgba(92, 13, 29, .7);
}
.hd-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--hd-zari) repeat-x center / auto 10px; pointer-events: none; }
.hd-main-inner { display: flex; justify-content: center; align-items: center; min-height: 66px; transition: min-height .3s ease; }
.hd-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; }
.hd-nav a {
  position: relative; padding: 10px 16px; text-decoration: none; white-space: nowrap;
  font-family: "Cormorant Garamond", "Cinzel", Georgia, serif; font-size: 19px; font-weight: 700; letter-spacing: .02em;
  color: #fff3d6; transition: color .25s ease;
}
.hd-nav a::before {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hd-gold-l), transparent);
  transform: scaleX(0); transition: transform .35s ease;
}
.hd-nav a::after {
  content: "❖"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) scale(0);
  font-size: 10px; color: var(--hd-gold-l); transition: transform .3s ease;
}
.hd-nav a:hover, .hd-nav a.is-on { color: var(--hd-gold-l); }
.hd-nav a:hover::before, .hd-nav a.is-on::before { transform: scaleX(1); }
.hd-nav a:hover::after, .hd-nav a.is-on::after { transform: translateX(-50%) scale(1); }
.hd.is-small .hd-main-inner { min-height: 54px; }

.hd-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hd-burger { display: none; }

@media (max-width: 980px) { .hd-nav a { font-size: 17px; padding: 10px 10px; } }
@media (max-width: 860px) {
  .hd-main-inner { flex-direction: column; align-items: stretch; min-height: 0; }
  .hd-burger { display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; padding: 12px 0; cursor: pointer; }
  .hd-burger span { display: block; width: 24px; height: 2px; background: var(--hd-gold-l); transition: transform .3s ease, opacity .3s ease; }
  .hd-burger em { font-style: normal; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--hd-gold-l); }
  .hd-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .hd-toggle:checked ~ .hd-nav { display: flex; }
  .hd-nav a { text-align: center; border-top: 1px dashed rgba(244, 213, 138, .3); }
  .hd-nav a::after { display: none; }
  .hd-toggle:checked + .hd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd-toggle:checked + .hd-burger span:nth-child(2) { opacity: 0; }
  .hd-toggle:checked + .hd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media print { .hd { display: none !important; } }

/* ---- SSS name on the left ---- */
.hd-main-inner { justify-content: space-between; gap: 20px; }
.hd-brand { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; line-height: 1; flex: none; }
.hd-brand strong {
  font-family: "Cormorant Garamond", "Cinzel", Georgia, serif; font-size: 34px; font-weight: 700; letter-spacing: .14em;
  background: linear-gradient(180deg, #fff3c4, var(--hd-gold-l) 45%, var(--hd-gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.hd-brand small { margin-top: 2px; font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: #fff3d6; opacity: .85; }
.hd.is-small .hd-brand strong { font-size: 28px; }
@media (max-width: 860px) {
  .hd-main-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .hd-brand { padding: 10px 0; }
  .hd-burger { grid-column: 2; grid-row: 1; padding: 10px 6px; }
  .hd-nav { grid-column: 1 / -1; }
}

/* ---- same bar on the admin / member desks ---- */
.hd-desk { position: relative; z-index: 60; }      /* scrolls away so the desk's own sticky bar and side menu work as before */
/* keep the bar on one line, same height on every page */
@media (min-width: 861px) {
  .hd-nav { flex-wrap: nowrap; gap: 0; }
  .hd-nav a { padding: 10px 13px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .hd-nav a { padding: 10px 8px; font-size: 16px; }
  .hd-brand strong { font-size: 28px; }
}