/* ============================================================
   EUC Combat Sports · Tirana 2026 — brand layer
   Official palette + typography. Loaded after start.css/page.css
   by page_open(), so it wins on the cascade.

   Type roles:  Oswald = titles     (display, condensed, uppercase-friendly)
                Montserrat = subtitles / eyebrows / labels / UI
                Lato = body text
   ============================================================ */

:root {
  /* ---- main palette ---- */
  --b-red:    #d90316;
  --b-black:  #0e0e0e;
  --b-white:  #fffeff;
  --b-blue:   #0949a4;

  /* ---- monochrome ---- */
  --m-900: #262828;
  --m-200: #dfe0e1;
  --m-050: #f9f9fa;

  /* ---- auxiliary ---- */
  --a-orange: #fe5a01;
  --a-amber:  #feb302;
  --a-green:  #019848;
  --a-sky:    #00a3e7;

  /* ---- highlight ---- */
  --h-purple: #6327a0;
  --h-teal:   #00b2aa;
  --h-pink:   #da0272;

  /* ---- gradients ---- */
  --g-red:  linear-gradient(90deg, #d90316, #0e0e0e);
  --g-blue: linear-gradient(90deg, #0949a4, #00a3e7);
  --g-warm: linear-gradient(90deg, #fe5a01, #feb302);

  /* ---- semantic, on the dark surface ---- */
  --ink:   #fffeff;
  --ink2:  rgba(255, 254, 255, 0.74);
  --mute:  rgba(255, 254, 255, 0.46);
  --line:  rgba(255, 254, 255, 0.13);
  --line2: rgba(217, 3, 22, 0.35);
  --card:  rgba(255, 254, 255, 0.045);
  --card2: rgba(255, 254, 255, 0.075);
  --surface: #0e0e0e;
  --link: #00a3e7;
  /* brand red is 3.6:1 on #0e0e0e: good for display type and fills, too low
     for labels and 11-14px text. Small accent text uses --a-sky (6.8:1);
     the deep --b-blue (2.3:1 on black) is a fill colour only. */
  --accent-sm: #00a3e7;

  /* ---- type stacks ---- */
  --f-title: 'Oswald', 'Segoe UI Semibold', 'Arial Narrow', system-ui, sans-serif;
  --f-sub:   'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-body:  'Lato', 'Segoe UI', system-ui, sans-serif;
}

/* ============================================================
   1. Page shell — overrides page.css
   ============================================================ */

body.doc {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-body);
}

.doc-back {
  font-family: var(--f-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
}

.doc-eyebrow {
  font-family: var(--f-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.6px;
  opacity: 1;
  color: var(--accent-sm);
}

.doc-title {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 720px) { .doc-title { font-size: 62px; } }

/* thin red rule under the header, tying every page to the logo */
.doc-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--b-red);
  margin-top: 16px;
}

.doc-body { font-family: var(--f-body); font-weight: 400; }
.doc-body p { opacity: 1; color: var(--ink2); }
.doc-body strong { color: var(--ink); font-weight: 700; }
.doc-body a { color: var(--link); }

.doc-body h2 {
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--b-red);
}
.doc-body h3 {
  font-family: var(--f-title);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
}
.doc-body h4 {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--mute);
  opacity: 1;
}

ul.doc-list li > a { font-family: var(--f-body); }
ul.doc-list li > a:hover { color: var(--accent-sm); }
ul.doc-list li > span { font-family: var(--f-sub); font-size: 12.5px; }

.doc-cta {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  background: var(--b-red);
}
.doc-btn { font-family: var(--f-sub); font-weight: 600; letter-spacing: 1.5px; }
.doc-btn.copied { border-color: var(--a-green); color: var(--a-green); }
.doc-foot { background: rgba(14, 14, 14, 0.94); }
.doc-more > summary { font-family: var(--f-sub); font-weight: 600; }
.doc-facts dt { font-family: var(--f-sub); font-weight: 600; opacity: 1; color: var(--mute); }
.embed-bar, .embed-back, .float-back { font-family: var(--f-sub); }

/* ============================================================
   2. .euc — the content block toolkit
   Content pages are pasted HTML in the admin. These are the
   pieces those blocks are built from, so the markup stays short
   and every page changes in one place.
   ============================================================ */

.euc {
  max-width: 1040px;
  margin: 0 auto;
  color: var(--ink);
  font: 400 16px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
.euc * { box-sizing: border-box; }

/* ---- opening copy ---- */
.euc .lead {
  max-width: 680px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0 0 8px;
}
.euc .lead b { color: var(--ink); font-weight: 700; }
.euc .hint {
  font-family: var(--f-sub);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mute);
  margin: 0 0 22px;
}
.euc .hint b { color: var(--accent-sm); font-weight: 600; }

/* ---- section ---- */
.euc section { padding: 34px 0 4px; }
.euc section:first-child { padding-top: 6px; }
.euc section > header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.euc section .n {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--accent-sm);
  flex: none;
}
.euc section h2 {
  font: 600 26px/1.1 var(--f-title);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
  /* display size, so brand red clears the 3:1 large-text threshold */
  color: var(--b-red);
}
.euc .intro { color: var(--ink2); font-size: 15.5px; margin: 0 0 18px; max-width: 720px; }

/* ---- cards ---- */
.euc .cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.euc .card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--b-red);
  border-radius: 4px;
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
a.euc-card:hover, .euc a.card:hover { background: var(--card2); transform: translateY(-1px); }
.euc .card.blue { border-left-color: var(--accent-sm); }
.euc .card.sky { border-left-color: var(--a-sky); }
.euc .card.green { border-left-color: var(--a-green); }
.euc .card.amber { border-left-color: var(--a-amber); }
.euc .card.orange { border-left-color: var(--a-orange); }
.euc .card.purple { border-left-color: var(--h-purple); }
.euc .card.teal { border-left-color: var(--h-teal); }
.euc .card.pink { border-left-color: var(--h-pink); }
.euc .card .k {
  display: block;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 7px;
}
.euc .card .t {
  display: block;
  font: 500 19px/1.2 var(--f-title);
  letter-spacing: 0.4px;
  color: var(--ink);
}
.euc .card .s { display: block; margin-top: 5px; font-size: 14px; color: var(--ink2); }
.euc .card .go { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent-sm); font-family: var(--f-sub); font-weight: 600; }

/* ---- key/value rows ---- */
.euc .rows { list-style: none; margin: 0; padding: 0; }
.euc .rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.euc .rows li:last-child { border-bottom: 0; }
.euc .rows .k { flex: 1; min-width: 0; color: var(--ink); }
.euc .rows .v {
  flex: none;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink2);
  text-align: right;
}
.euc .rows .v a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(0, 163, 231, 0.45); }
.euc .rows .v a:hover { border-bottom-color: currentColor; }

/* ---- emergency / phone tiles ---- */
.euc .calls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.euc .calls a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 14px;
  background: var(--b-red);
  color: var(--b-white);
  text-decoration: none;
  border-radius: 4px;
  transition: filter 0.15s, transform 0.12s;
}
.euc .calls a:hover { filter: brightness(1.12); transform: translateY(-1px); }
.euc .calls a.dark { background: var(--m-900); }
.euc .calls a.blue { background: var(--b-blue); }  /* fill: white on #0949a4 = 9.4:1 */
.euc .calls .l {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  opacity: 0.85;
}
.euc .calls .num { font: 600 34px/1.05 var(--f-title); letter-spacing: 0.5px; }
.euc .calls .num.sm { font-size: 22px; }

/* ---- stats strip ---- */
.euc .stats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.euc .stats li { border-top: 3px solid var(--b-red); padding: 11px 2px 0; }
.euc .stats li:nth-child(2n) { border-top-color: var(--accent-sm); }
.euc .stats b { display: block; font: 600 32px/1 var(--f-title); letter-spacing: 0.4px; color: var(--ink); }
.euc .stats span {
  display: block;
  font-family: var(--f-sub);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--mute);
  margin-top: 7px;
}

/* ---- note / callout ---- */
.euc .note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-sm);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--ink2);
}
.euc .note b { color: var(--ink); font-weight: 700; }
.euc .note.warn { border-left-color: var(--a-amber); }
.euc .note.red { border-left-color: var(--b-red); }
.euc .note .h {
  display: block;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}

/* ---- inline group heading ---- */
.euc h3 {
  font: 500 18px/1.25 var(--f-title);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 24px 0 10px;
}
.euc p { margin: 0 0 13px; color: var(--ink2); }
.euc a { color: var(--link); }

/* ---- brand footer lockup ---- */
.euc .foot {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--mute);
  font-family: var(--f-sub);
  font-size: 12.5px;
}
.euc .foot strong { color: var(--accent-sm); font-weight: 600; }
/* the official lockup is black+navy artwork, so it needs a light plate to read on #0e0e0e */
.euc .foot .logo {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 16px;
  background: var(--b-white);
  border-radius: 6px;
  padding: 14px 18px;
}
.euc .foot .logo img { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .euc { font-size: 15.5px; }
  .euc section h2 { font-size: 22px; }
  .euc .calls .num { font-size: 30px; }
  .euc .rows li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .euc .rows .v { text-align: left; }
}

/* ---- chat widget coexistence ----
   The support widget renders a fixed 58px bubble at bottom-right, above
   everything (z-index 2147483001), and its internals are in a shadow root we
   cannot restyle. On phones the sticky .doc-foot buttons run full width and end
   up underneath it, so on any page carrying the widget the bar gives up a
   gutter on the bubble's side instead. */
body:has([data-chatbot]) .doc-foot { padding-right: 88px; }
@media (min-width: 720px) {
  body:has([data-chatbot]) .doc-foot { padding-right: 56px; }
}