/* ===========================================================================
   site.css — gyogynovenyek.net
   The purposeful override layer that sits ON TOP of casino.css (the chassis).

   Why a second file: the chassis contract is "recolour :root, touch nothing
   below it", and verify_chassis.py enforces it by failing on any hex written
   below :root. Site-specific behaviour therefore lives here instead of forking
   the chassis. Everything below is a stage-07 HARD RULE that the chassis does
   not already satisfy — nothing decorative.
   =========================================================================== */

:root{
  /* The money colour for bonus TEXT. It must differ from body ink AND from the
     CTA red, so the card carries three distinct signals (brand green / money
     amber / action red) rather than two shades of one. Tokaji gold itself is
     only 2.4:1 on white and unusable as text, so the text form uses this
     darker amber: 5.92:1 on card, 5.48:1 on the #1-pick cream. */
  --hu-money:#8a5a0b;
  --hu-hero-scrim:rgba(250,248,242,.82);
}

/* --- RULE 1: the "Last updated" pill goes UNDER the byline, never beside it.
   The chassis makes .ch-byline an inline-flex and .ch-upd an inline-block, so
   in the centred hero they share a line whenever there is room — correct at one
   viewport, broken at the next. Force the break at every width. -------------- */
.ch-hero-copy .ch-upd{display:block;width:fit-content;margin-inline:auto}

/* --- RULE 6: bonus renders as loud TEXT, never a pill or a button.
   Scoped deliberately: `.ch p,.ch li{color:var(--ch-ink-soft)}` targets the
   element directly and would BEAT a bare class on a <p>, silently rendering the
   bonus in body-text ink while looking intentional. Scoping to the element and
   raising the weight makes the computed colour the money colour at any nesting.
   The CTA stays the only button in the card. ------------------------------- */
.ch .ch-bonus-val,
.ch p.ch-bonus-val,
.ch div.ch-bonus-val,
.ch span.ch-bonus-val{
  color:var(--hu-money);
  font-family:var(--ch-display);
  font-size:1.75rem;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
.ch .ch-bonus-label{color:var(--ch-muted)}

/* --- RULE 2: hero backdrop behind ALL hero text on every money page.
   A scrim keeps the H1/lede/byline readable over the illustration, so the
   backdrop is decoration and the copy is never the thing being tested.
   background-position is set per page (see the gotcha about `center top`
   showing only the sky band) — the default here puts the landmark band in the
   hero window rather than the sky. ---------------------------------------- */
.ch-hero.hu-hero{
  position:relative;
  background:
    linear-gradient(180deg,var(--hu-hero-scrim) 0,var(--hu-hero-scrim) 55%,var(--ch-bg) 100%),
    var(--hu-hero-img,none);
  background-size:auto,cover;
  background-position:center,center 58%;
  background-repeat:no-repeat,no-repeat;
}
.ch-hero.hu-hero .ch-hero-copy{position:relative;z-index:1}

/* --- RULE 5: rank borders — #1 gold, #2 silver, #3 bronze, rest brand green —
   and each border GLOWS in its own colour.
   The chassis only ships `.ch-card.is-top` (the cream #1 fill); it has no
   per-rank border colours at all, so all four ranks are defined here. The glow
   is a box-shadow spreading OUTWARD from the card, never a blur over text.
   Rank metals are literal metal colours, so they are the one place in this file
   that cannot come from a brand token. ------------------------------------ */
.ch-card.is-1{border-color:#a87a14;
  box-shadow:var(--ch-shadow),0 0 0 1px rgba(168,122,20,.35),0 6px 24px rgba(168,122,20,.30)}
.ch-card.is-2{border-color:#8c9296;
  box-shadow:var(--ch-shadow),0 0 0 1px rgba(140,146,150,.32),0 6px 20px rgba(140,146,150,.26)}
.ch-card.is-3{border-color:#96602c;
  box-shadow:var(--ch-shadow),0 0 0 1px rgba(150,96,44,.32),0 6px 20px rgba(150,96,44,.26)}
.ch-card.is-rest{border-color:var(--ch-primary-bd);
  box-shadow:var(--ch-shadow),0 0 0 1px rgba(27,94,58,.16)}

/* --- RULE 4 support: the CTA is the most attractive element on the page.
   The chassis already gradients + glows it; this deepens the glow on hover and
   keeps a visible focus ring for keyboard users. -------------------------- */
.ch-cta{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.ch-cta:hover{transform:translateY(-1px);box-shadow:0 8px 26px var(--ch-cta-glow);filter:saturate(1.06)}
.ch-cta:focus-visible{outline:3px solid var(--ch-accent);outline-offset:2px}

/* --- RULE 2 (guides): every guide gets a brand-identity thumbnail, and they
   stay stylistically consistent with each other. ------------------------- */
.hu-guidethumb{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--ch-radius);border:1px solid var(--ch-line-soft);
  box-shadow:var(--ch-shadow);
}

/* --- Hungarian tricolour hairline: the one piece of national ornament, used
   once per page under the masthead. Not a "kicker line", not a pill. ------ */
.hu-tricolour{height:3px;border:0;margin:0;
  background:linear-gradient(90deg,#ce2939 0 33.33%,#faf8f2 33.33% 66.66%,#1b5e3a 66.66% 100%)}

@media (max-width:760px){
  .ch .ch-bonus-val,.ch p.ch-bonus-val,.ch div.ch-bonus-val,.ch span.ch-bonus-val{font-size:1.45rem}
  .ch-hero.hu-hero{background-position:center,center 52%}
}

/* --- Mobile horizontal-scroll containment.
   Measured on this build at 390x844: document scrollWidth = 406 (16px of
   sideways scroll) with NO card element over the edge. The source is the
   chassis's off-canvas nav panel — `.ch-nav-links` is position:fixed,
   width:100%, parked with transform:translateX(100%), and its static children
   sit at x=415..756. A transform does not remove a box from the scrollable
   overflow area, so the closed panel drags the document 16px wide on every
   page. `overflow-x:clip` on the body contains it WITHOUT creating a scroll
   container (unlike `hidden`, which would break the sticky navbar), and the
   panel still slides in normally because it is fixed, not clipped by an
   ancestor's clip box.
   The page body must never scroll sideways (stage-07 rule 9, stage-10 QA). -- */
@media (max-width:768px){
  html,body.ch{overflow-x:clip}
}

/* --- Mobile toplist card: stack the chip ABOVE the copy, centred.
   The chassis mobile card is `grid-template-columns:40px 1fr` with
   `.ch-cell-mid` a flex ROW (chip | text). At 390px that leaves the text
   column ~140px wide, which is fine for short Latin brand names and wrong for
   Hungarian: "Kingdom Casino" wrapped to two lines, the bonus figure broke
   mid-amount ("450% akár / 5 000 €") and the licence/min-deposit meta wrapped
   after "min. 20". Stacking gives the copy the full card width, which is the
   mobile-toplist-card shape anyway: logo, then bonus, then a full-width CTA. -- */
@media (max-width:768px){
  .ch-card .ch-cell-mid{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .ch-card .ch-cell-txt{width:100%}
  .ch-card .ch-brand-name{font-size:1.22rem;margin-bottom:.15rem}
  .ch-card .ch-feat{font-size:.86rem;margin-bottom:0}
  .ch-card .ch-chip{width:150px;height:76px}
}

/* --- Sortable comparison table + stat bars (stage-08 data visuals).
   The chassis ships .ch-cmp and .ch-bar/.ch-barrow/.ch-barwrap; these add the
   sort affordance and the bar label/value columns. --------------------------- */
.hu-sortable thead th{cursor:pointer;user-select:none;position:relative;padding-inline-end:20px}
.hu-sortable thead th::after{content:"";position:absolute;inset-inline-end:7px;top:50%;
  margin-top:-3px;border:4px solid transparent;border-top-color:currentColor;opacity:.35}
.hu-sortable thead th[aria-sort="ascending"]::after{border-top-color:transparent;
  border-bottom-color:currentColor;margin-top:-7px;opacity:1}
.hu-sortable thead th[aria-sort="descending"]::after{opacity:1}
.hu-sortable thead th:focus-visible{outline:3px solid var(--ch-accent);outline-offset:-3px}
/* The chassis already styles .ch-barrow / .ch-bar / .ch-barwrap and its bar
   markup is `<div class="ch-bar"><span style="width:X%"></span></div>`, so the
   stat strip uses that verbatim rather than inventing a parallel component. Only
   the tabular figures are added here. */
.ch-barrow b{font-variant-numeric:tabular-nums}

/* --- Editorial illustration figure (the `content/other` image kind). Shares
   .hu-guidethumb with the guide thumbnails so the whole image system stays
   stylistically consistent, per stage-07 rule 2. ---------------------------- */
.hu-fig{margin:0 0 1.1rem}
.hu-fig figcaption{font-size:.84rem;color:var(--ch-muted);margin-top:.45rem;line-height:1.45}

/* --- Stage-07 rule 3: the first toplist card must be visible on landing.
   Measured at 390x844 the card top sat at 762px of an 844 viewport — only a
   sliver. The chassis clamps `.ch-lede-clamp` on mobile only; apply the same
   clamp to the first-H2 lead (`.ch-lead`), and tighten the hero on mobile so the
   H1 + clamped lede + byline + date pill fit above the list.
   The full text stays in the DOM — this is content behaviour, not cloaking. -- */
@media (max-width:768px){
  .ch-lead.ch-lede-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden}
  .ch-morechk:checked ~ .ch-lead.ch-lede-clamp{-webkit-line-clamp:initial;line-clamp:initial;display:block}
  .ch-hero.hu-hero{padding:10px 0 14px}
  .ch-hero h1{font-size:1.28rem}
  .ch-lede{font-size:1rem;margin-bottom:12px}
  .ch-section:first-of-type{padding-top:14px}
  .ch-sectionhead{margin:.6rem 0 .7rem;padding-bottom:.5rem}
  .ch-section h2{font-size:1.22rem}
}

/* --- Rule 3, desktop side. At 1440x900 the first card top measured 782px, so
   only ~120px of it showed. The chassis hero is padding:46px 0 and .ch-section is
   padding:42px 0; on a money page the toplist is the first content block, so the
   space between the masthead and card 1 is pure cost. Trimmed only for the HERO
   and the FIRST section — every later section keeps the chassis rhythm. ------- */
@media (min-width:769px){
  .ch-hero.hu-hero{padding:24px 0 20px}
  .ch-hero h1{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:10px}
  .ch-hero .ch-lede{font-size:1.05rem;margin-bottom:14px}
  .ch-hero .ch-upd{margin-top:.45rem}
  main > .ch-section:first-of-type{padding-top:20px}
  main > .ch-section:first-of-type .ch-sectionhead{margin:0 0 .8rem;padding-bottom:.6rem}
  main > .ch-section:first-of-type .ch-lead{margin-bottom:14px}
}

/* stage-10 author card: the flex card must be able to shrink inside its grid track.
   Without min-width:0 the text column keeps its content width and /szerzok/ scrolled
   horizontally at 1440 (measured document width 1568px). Site layer, not the chassis. */
.ch-authorcards{min-width:0}
.ch-authorcard{min-width:0}
.ch-authorcard>.ch-authorcard-copy{min-width:0;flex:1 1 auto}
.ch-authorcard>.ch-authorcard-copy>*{margin:0 0 .35rem}
.ch-authorcard>.ch-authorcard-copy>*:last-child{margin-bottom:0}

/* stage-10 footer footnote: the responsible-gambling notice and the affiliate
   disclosure were marked up with .ch-18, which the chassis defines as a 34px round
   age BADGE (inline-flex, fixed height). Both paragraphs rendered inside that chip
   and were clipped at 390px — measured 495px wide in a 390px viewport, invisible
   because body.ch clips horizontal overflow. They get their own class; .ch-18 stays
   the badge and is now used only for the literal "18+" mark inside the first one. */
.ch-foot .ch-footnote{display:block;max-width:72ch;margin:.9rem auto 0;
  font-size:.82rem;line-height:1.55;text-align:center}
.ch-foot .ch-footnote .ch-18{margin-inline-end:.45rem;vertical-align:middle}

/* stage-10 fact strip: the chassis sets .ch-barrow b{white-space:nowrap} because in
   its original use the value is a short figure ("78%"). Our review fact strips put
   long strings there — "Curaçao Gaming Authority (CGA) — engedélyszám …", and
   Jack.com's "1x a fogadás összegére (kockázatmentes szerkezet)" — so at 390px the
   value ran to 669px inside a 366px row and everything past the viewport was clipped
   away by body.ch's overflow-x:clip. Invisible to a doc-width check; the layout scan
   measured it. Site layer, not the chassis. */
.ch-barwrap .ch-barrow{align-items:start}
.ch-barwrap .ch-barrow>span{min-width:0;overflow-wrap:anywhere}
.ch-barwrap .ch-barrow b{white-space:normal;min-width:0;overflow-wrap:anywhere;text-align:end}
@media (max-width:520px){
  .ch-barwrap .ch-barrow{grid-template-columns:1fr}
  .ch-barwrap .ch-barrow b{text-align:start}
}

/* stage-10 author card, mobile: .ch-note is the chassis's boxed callout (card
   background, 4px green rule, 14px padding). Inside an author card it turned the
   role line and the "click the name" line into two framed boxes with the avatar
   floating between them — measured fine, looked broken. Inside a card it is just
   small print. */
.ch-authorcard .ch-note{background:none;border:0;border-radius:0;padding:0;
  margin:.1rem 0 .35rem;font-size:.82rem;opacity:.85}
.ch-authorcard{align-items:flex-start}
.ch-authorcard img{margin-block-start:.15rem}
@media (max-width:520px){.ch-authorcard img{width:56px;height:56px}}