/**
* Chance2Win Queen — shared skin base.
*
* Deliberately tiny. The skin markup now mirrors the v7 mockups class-for-class, so the
* converted skin stylesheets carry the real design. This file only covers what the
* mockups could not: real ![]()
content inside boxes the mockups filled with
* placeholder text (.ph, .sp, .story-img), the uploaded org logo, and the board's
* empty state. Loaded BEFORE the skin stylesheet so any skin rule wins.
*
* No raw brand hex — colours come from the --c2w-* properties.
*/
/* Uploaded org logo in the top bar (mockups only had the initials circle).
NOT a 50% circle: real logos are usually rectangular, and the circular crop cut them
off. Natural width up to 140px, soft corners, whole logo always visible.
!important on the geometry: WooCommerce ships `.woocommerce img{height:auto;
max-width:100%}` (specificity 0,1,1) which beat this class on shop/checkout pages
and blew the logo up to its natural 135px — a 160px-tall header. */
.org-logo{height:44px !important;width:auto !important;max-width:140px !important;border-radius:8px;object-fit:contain;background:#fff;flex-shrink:0}
/* Headings — calmer type. The mockups use 800–900 weights with tight negative
letter-spacing; per client feedback that reads too heavy, so every skin is normalised
to 700 / near-normal tracking. !important is required: this file loads before the
skin stylesheets, which set the heavier weights. */
.hero h1{font-weight:700 !important;letter-spacing:-.3px !important}
.sec-title{font-weight:700 !important;letter-spacing:-.2px !important}
.final h2{font-weight:700 !important;letter-spacing:0 !important}
.panel h3,.board-head .left h2{font-weight:700 !important}
/* Small headings the skins set at 800: org name in the top bar, the how-it-works step
titles (all three skins use different classes for the same thing), step number labels,
contact card. Same 700 normalisation everywhere. */
.org-name{font-weight:700 !important}
.step h3,.strip-step h3,.contact-card h3{font-weight:700 !important}
.step .n,.step-num,.ss-num{font-weight:700 !important}
.jackpot{font-weight:800 !important}
/* Board empty state. */
.board-empty{text-align:center;padding:28px 16px;color:var(--c2w-g400);font-size:.95rem}
/* Revealed board cells with a REAL card-face image (queen_cards deck). The image
fills the cell. The number badge is hidden — it collided with the artwork and the
hover title still carries the card number — and the winner strip becomes the
prominent label instead. */
.cell.revealed.has-face{position:relative;overflow:hidden;padding:0}
.cell.revealed.has-face .card-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cell.revealed.has-face .num{display:none}
.cell.revealed.has-face .who{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--c2w-secondary,#0a1f44);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.2px;line-height:1.25;padding:4px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Real images inside the mockup placeholder boxes. */
.photo-strip .ph{overflow:hidden;padding:0}
.photo-strip .ph img,.photo-strip .ph a{display:block;width:100%;height:100%}
.photo-strip .ph img{object-fit:cover}
.sponsor-row .sp img{max-height:56px;width:auto;display:block}
.story-img{overflow:hidden;padding:0}
.story-img img{display:block;width:100%;height:100%;object-fit:cover}
/* Footer brand — the Chance2Win icon in a white rounded chip (same treatment as the
dashboard footer), next to the "Powered by" line. */
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:4px;box-sizing:border-box;background:#fff;border-radius:8px;flex:0 0 auto}
.foot-ico img{width:100%;height:100%;object-fit:contain;display:block}
/* Ghost button on dark felt — Jackpot Marquee defines this itself; Board First's mockup
used an inline style for the same look, normalised here for the other skins. */
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff}
/* ── Button text colour hardening ────────────────────────────────────────────
The buttons are tags, so they lose the specificity fight against link rules:
.topnav a (0,1,1) beats .btn-primary (0,1,0), and the legacy theme adds its own
a / a:visited colours on top. Result: a red Get Tickets button with navy link text.
These rules pin the button palette against every link rule, on every skin. */
a.btn,a.btn:visited,a.btn:hover,a.btn:focus{text-decoration:none !important}
.btn-primary,.btn-primary:visited,.btn-primary:hover,.btn-primary:focus,
.topnav .btn-primary,.topnav .btn-primary:hover{color:var(--c2w-on-primary) !important}
.btn-primary:hover{background:var(--c2w-accent) !important}
.btn-ghost,.btn-ghost:visited,.btn-ghost:hover,.btn-ghost:focus{color:#fff !important}
/* Image-only anchors (sponsor cards, gallery frame) must never show link underlines
or the legacy theme's visited tint. */
a.sp,a.sp:hover,.c2wq-gal-main,.c2wq-gal-main:hover,.org-id,.org-id:hover{text-decoration:none !important}
/* ── Site-wide skin chrome (inner pages) ─────────────────────────────────────
header.php / footer.php render the skin topbar + footer partials on every
public page (body gets .c2wq-chrome from the skin loader). The legacy header
pieces must not render underneath them. The homepage handles its own
suppression in newdesign.php; dashboard shell pages keep their own chrome. */
.c2wq-chrome #masthead,
.c2wq-chrome .innerheader.commonheader{display:none !important}
/* The topbar partial is sticky on the homepage; keep that on inner pages too. */
.c2wq-chrome .topbar{position:sticky;top:0;z-index:500}
/* Legacy #page wrapper must not clip the sticky topbar. */
.c2wq-chrome #page{overflow:visible}
/* ── Sponsor carousel (part-sponsors) ────────────────────────────────────────
~3 cards per view on desktop, 2 on tablet, 1 on mobile. Scroll-snap moves it,
so it swipes natively on touch; the arrows/auto-advance come from the partial. */
.c2wq-spsl{display:flex;align-items:center;gap:14px}
.c2wq-spsl-view{flex:1;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.c2wq-spsl-view::-webkit-scrollbar{display:none}
.c2wq-spsl-track{display:flex;gap:18px;padding:8px 2px}
.c2wq-spsl-slide{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;min-width:0}
/* Logo card: fills its slide, near-square, with a soft primary-tinted top edge so it
belongs to the theme instead of floating as a bare white box on the cream section. */
.c2wq-spsl-slide .sp{display:flex;align-items:center;justify-content:center;width:100%;height:170px;background:#fff;border:1px solid var(--c2w-g200);border-top:4px solid var(--c2w-primary);border-radius:var(--c2wq-radius,12px);box-shadow:0 6px 18px rgba(10,26,77,.10);padding:18px;transition:transform .18s ease,box-shadow .18s ease}
.c2wq-spsl-slide .sp:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(10,26,77,.16)}
.c2wq-spsl-slide .sp img{max-height:128px;max-width:92%;width:auto;object-fit:contain}
/* Arrows: solid primary discs with the auto-contrast glyph, matching the theme buttons. */
.c2wq-spsl-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;background:var(--c2w-primary);color:var(--c2w-on-primary);font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(10,26,77,.18);transition:background .15s,transform .12s}
.c2wq-spsl-arrow:hover{background:var(--c2w-accent);transform:scale(1.06)}
.c2wq-spsl-arrow:active{transform:scale(.96)}
@media(max-width:860px){.c2wq-spsl-slide{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:560px){.c2wq-spsl-slide{flex-basis:100%}}
/* ── Photo gallery (part-photos) ─────────────────────────────────────────────
One feature image, thumbnail rail below. Active thumb gets the primary ring. */
.c2wq-gal{max-width:900px;margin:0 auto}
.c2wq-gal-main{display:block;border-radius:var(--c2wq-radius,12px);overflow:hidden;box-shadow:0 10px 30px rgba(10,26,77,.14);background:var(--c2w-g100)}
.c2wq-gal-main img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:1;transition:opacity .18s ease}
.c2wq-gal-main[data-nolink]{cursor:default}
.c2wq-gal-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.c2wq-gal-thumb{flex:0 0 auto;width:96px;height:64px;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;background:var(--c2w-g100);cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s,transform .15s}
.c2wq-gal-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.c2wq-gal-thumb:hover{opacity:1;transform:translateY(-1px)}
.c2wq-gal-thumb.is-active{opacity:1;border-color:var(--c2w-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2w-primary) 20%,transparent)}
/* Thumbnails always WRAP instead of scrolling sideways — every photo visible at once. */
.c2wq-gal-thumbs{flex-wrap:wrap;overflow-x:visible;justify-content:center}
/* ── Mobile ──────────────────────────────────────────────────────────────────
The skins hide the nav links ≤820px but never shrink the org identity or the
Get Tickets button, so the top bar wrapped into a 3-line mess on phones. */
@media(max-width:760px){
/* !important throughout: base.css loads BEFORE the skin stylesheets, which set
these same properties at equal specificity and would win otherwise. */
.topbar-in{padding:8px 14px !important;gap:10px !important}
.org-id{gap:8px !important;min-width:0;flex:1}
.org-logo{height:34px !important;max-width:80px !important;border-radius:6px}
.org-mark{width:34px !important;height:34px !important;font-size:.8rem !important}
.org-name{font-size:.9rem !important;line-height:1.15 !important;display:block}
.org-sub{font-size:.56rem !important;letter-spacing:.6px !important;white-space:nowrap}
.topnav{flex-shrink:0}
.topnav .btn{white-space:nowrap !important;padding:9px 14px !important;font-size:.85rem !important}
}