/*
 * nautical.css — the club's fittings: one layer of yacht-club detail over every page.
 * ---------------------------------------------------------------------------------------------
 * 23 Sep 2026. Founder: "sistema tutti i componenti in stile navale Yacht club (esempio nav ect)",
 * and the choice between three directions: KEEP THE BRAND PALETTE (linen, onyx, honey, smoke) and add
 * nautical details. So nothing here repaints the site. It only adds what a club's own rooms carry:
 *
 *   · a laid rope under the nav bar instead of a bare hairline;
 *   · brass rivets on the corners of the buttons, and brass corner fittings on the panels;
 *
 * ⚑ NO SIGNAL FLAGS (founder, 23 Sep 2026: "let's remove the flags at the start of the Name and from
 * everywhere else"). Signal flags before the name, at the page foot and in the marina, and a burgee on the
 * active link, flew for one evening; all gone.
 * Everything here is the brand gold. The brand book's own words: nautical
 * is a REGISTER, not a costume — so no anchors on everything, no pirate type, no new colours.
 *
 * ONE FILE, linked on every page that carries the nav, right before daynight.js. It styles through
 * classes the pages already share (.nav, .links, .cta, the panels) and adds no markup, so
 * removing the link removes all of it. The marina and the public preview load it too, for their own
 * chrome (the rule under the brand, the gate, the floating panels): see the section near the end.
 * Colours come from the page's own tokens, so day and night follow for free.
 */

/* ---- the fittings, as tokens ---------------------------------------------------------------------- */
:root {
  --nyc-rope: repeating-linear-gradient(115deg, var(--gold) 0 2px, transparent 2px 3.2px, var(--gold-dim) 3.2px 5px, transparent 5px 6px);
  --nyc-brass: var(--gold);
}

/* ---- the nav bar ------------------------------------------------------------------------------ */
.nav { position: relative; }
/* A laid rope along the foot of the bar, over the existing hairline. Three pixels, no more: a rope
   that shouts is a costume. */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--nyc-rope); opacity: 0.55; pointer-events: none;
}
/* Links turn brass on hover; the page you are on keeps the pages' own gold underline. */
.nav .links a { transition: color .15s ease, opacity .15s ease; }
.nav .links a:hover { color: var(--gold); opacity: 1; }

/* ---- buttons: brass rivets at the corners ------------------------------------------------------ */
/* Four one-pixel-ish studs, layered UNDER whatever the button already paints, so a filled button keeps
   its fill and an outlined one its outline. Only the club's own call-to-action classes: a rivet on
   every tab and toggle would be a costume again. */
.cta a.primary, .cta a.ghost, .cta a.go, .cta a,
.wrap a.primary, .wrap a.ghost, a.primary, a.ghost, .btn, button.primary, button.go, a.go {
  background-image:
    radial-gradient(circle at 5px 5px, var(--nyc-brass) 1.7px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--nyc-brass) 1.7px, transparent 2.2px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--nyc-brass) 1.7px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--nyc-brass) 1.7px, transparent 2.2px);
  background-repeat: no-repeat;
}
/* On a gold-filled button the studs are the ink, or they vanish into the brass. */
.cta a.primary, .wrap a.primary, a.primary { --nyc-brass: var(--ink); }

/* ---- panels: brass corner fittings ------------------------------------------------------------- */
/* L-shaped brass at the four corners of the club's BORDERED panels, drawn as eight gradients over the
   panel's own background colour; every border and fill stays. Only panels measured to carry a border
   and padding (23 Sep: .box on the front page, .pcard in the Purser, .tool in the Shipyard, .result in
   Islands, .card on Captain, Agent guide and Keeper). The Regatta's .card has neither, and a bracket
   there sat on top of its labels, so a .card holding a .label is left alone. */
:root {
  --nyc-corners:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  --nyc-corner-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  --nyc-corner-pos: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
}
.box, .pcard, .tool, .result {
  background-image: var(--nyc-corners); background-size: var(--nyc-corner-size);
  background-position: var(--nyc-corner-pos); background-repeat: no-repeat;
}
/* its own rule: a browser without :has() drops only this one, never the list above */
.card:not(:has(.label)) {
  background-image: var(--nyc-corners); background-size: var(--nyc-corner-size);
  background-position: var(--nyc-corner-pos); background-repeat: no-repeat;
}

/* ---- rules ---------------------------------------------------------------------------------------- */
hr { border: 0; height: 3px; background: var(--nyc-rope); opacity: 0.45; margin: 28px 0; }

/* ---- the marina's own chrome (marina.html, preview.html) ---------------------------------------- */
/* The same fittings where a member actually spends the evening: a laid rope where the gold rule was,
   brass on the floating panels. Only paint: not one box changes size, so the marina's layout rules
   (who owns which corner) are untouched. */
.brand .rule { width: 64px; height: 3px; background: var(--nyc-rope); opacity: 0.8; }
#gate .grule { height: 3px; background: var(--nyc-rope); opacity: 0.85; }
#info, #island, #lounge, #radio-panel {
  background-image: var(--nyc-corners); background-size: var(--nyc-corner-size);
  background-position: var(--nyc-corner-pos); background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .nav .links a { transition: none; }
}