/* brand — owned by TASK 08 (visual layer). Loaded after css/style.css (locked), so every rule
   here overrides the ported base without touching it. See TASK-08-visual-layer.md. */

/* ---------------------------------------------------------------------------------------
   Logo: mountain silhouette ('brand') + maple leaf ('maple-leaf'), both from
   partials/icons.html.twig. Class names are the ones style.css already lays out
   (.brand / .brand-mark / .brand-title / .brand-sub) — sizing/position stay untouched,
   we only add what the new markup needs that the old one didn't (a filled mark, a leaf).
   --------------------------------------------------------------------------------------- */
.brand-mark { fill: currentColor; }

.brand-leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Leaf = cap height of the wordmark beside it (Oswald caps ≈ .81em), sits on the baseline. */
  width: .81em;
  height: .81em;
  margin-left: .14em;
  vertical-align: baseline;
  color: var(--red);
}
.brand-leaf svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* ---------------------------------------------------------------------------------------
   Section dividers (icons.divider(name)). Decorative line-art, aria-hidden. Default sizing
   is a sane fallback for wherever tasks 09-11 drop one; their own block files (loaded after
   this one) can resize/recolour per placement.
   --------------------------------------------------------------------------------------- */
.divider-svg {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--red);
  opacity: .8;
}
.divider-svg .d-ridge { stroke-width: 2; opacity: .6; }

/* ---------------------------------------------------------------------------------------
   FONT EXPERIMENT — exploratory, see TASK-08-visual-layer.md "Font" section for the verdict.
   Self-hosted, two files per family (only the "latin" subset — this is an English-language
   Whistler, BC campaign site, the other Google Fonts subsets are dead weight offline).
   Every selector below reads the custom property through a var() with the real
   "Arial, Helvetica, sans-serif" fallback baked in, so REVERTING THE WHOLE EXPERIMENT IS
   JUST DELETING THIS ONE @font-face + :root BLOCK (the next ~10 lines) — every selector
   further down keeps working, it just falls back to Arial again because --font-head and
   --font-body resolve to nothing.
   --------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/oswald-v57-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/nunito-sans-v19-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}
:root {
  --font-head: 'Oswald', Arial, Helvetica, sans-serif;
  --font-body: 'Nunito Sans', Arial, Helvetica, sans-serif;
}
/* --- end of the deletable block --- */

body {
  font-family: var(--font-body, Arial, Helvetica, sans-serif);
}

h1, h2, h3, h4,
.section-title, .page-title, .section-sub, .page-sub,
.brand-title,
.nav a,
.donate-btn, .btn,
.hero-content h1, .priority-hero h1,
.story-item h2, .short-copy h2,
.priority-card h3, .action-card h3, .community-card h3,
.panel h2, .priority-col h2, .footer-col h4,
.amount, .community-lead {
  font-family: var(--font-head, Arial, Helvetica, sans-serif);
}

/* Homepage priority grid now uses icons.svg_outline() (previously filled icons.svg()) — same
   outline set already used on the priority-page hero badge and /priorities list. The macro's
   default stroke-width (4.5, tuned for the 82px hero badge) reads as nearly solid at this grid's
   much smaller size, so it's thinned per breakpoint the same way css/blocks/priorities.css
   already does for .priorities-row-icon. Sizes measured live: 52px desktop, 30px <=780px. */
.priority-card .icon svg { stroke-width: 3.2; }
@media (max-width: 780px) {
  .priority-card .icon svg { stroke-width: 2; }
}


/* Election banner — "FINAL v2" look (2026-09-09): calendar icon left of the text, sub line in
   bold caps like the headline, outline button unchanged. Structure lives in
   templates/modular/election.html.twig; base colours/sizes stay in the locked style.css. */
.election-lead{display:flex;align-items:center;gap:16px;text-align:left}
.election-icon{flex:0 0 auto;width:44px;height:44px;color:#fff}
.election-icon svg{width:100%;height:100%;fill:currentColor}
.election-inner span{text-transform:uppercase;font-weight:900;letter-spacing:.3px}
@media(max-width:780px){
  .election-lead{gap:12px}
  .election-icon{width:36px;height:36px}
}
.election-inner strong,.election-inner span{font-family:var(--font-head, Arial, Helvetica, sans-serif)}


/* ---- Footer per "FINAL v2" (2026-09-09): centred logo block, 3 columns with dividers,
   vertical quick links, socials as badge + label, single authorization line. Base colours
   and the signup pill stay in the locked style.css. ---- */
/* 2026-09-16 (client, "footer výškovo zmenšiť"): the centred logo band is gone; logo + wordmark
   open the middle column at a third of the size, the columns start right under the page, quick
   links run in two columns and every gap is tighter. Desktop footer 654px -> ~400px. */
.site-footer{padding-top:30px}
.footer-brand{display:flex;align-items:center;gap:14px;padding-bottom:0;color:#fff}
/* Thin white lines between logo / Page / mailing list in the middle column (2026-09-16, client). */
.footer-rule{border:0;height:1px;margin:16px 0;background:rgba(255,255,255,.55)}
.footer-brand .brand-mark{width:78px;height:auto;aspect-ratio:90/52}
.footer-brand .brand-title{font-size:26px;line-height:.95;letter-spacing:1px}
.footer-brand .brand-sub{font-size:11px;letter-spacing:2.5px;margin-top:5px}
.footer-top{grid-template-columns:.8fr 1.3fr 1fr;  /* links | brand+signup+Page | ideas */gap:0;padding:0 0 18px}
.footer-col{padding:0 34px}
.footer-col:first-child{padding-left:0}
.footer-col+.footer-col{border-left:1px solid #2b2b2b}
.footer-col h4{font-size:14px;letter-spacing:1px;margin-bottom:10px}
.footer-col p{font-size:14px;line-height:1.5;margin:0 0 10px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px}
.quick a:hover{color:#f22}
.socials{display:flex;flex-direction:column;gap:14px;margin-top:0}
.socials a.social{width:auto;height:auto;border-radius:0;background:none;display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;color:#fff}
.social-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.social-badge svg{width:22px;height:22px;fill:#fff}
.social.facebook .social-badge{background:#1877f2}
.social.instagram .social-badge{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}
.social.linkedin .social-badge{background:#0a66c2}
.socials a.social-featured{font-weight:800}
.socials a.social-featured .social-badge{width:46px;height:46px}
.socials a.social-featured .social-badge svg{width:25px;height:25px}
/* "Personal contacts" divider under the campaign Page, mirrors .connect-divider in contact.css. */
.socials-divider{display:flex;align-items:center;gap:10px;margin:2px 0;
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#9a9a9a}
.socials-divider::before,.socials-divider::after{content:"";flex:1;height:1px;background:#333}
/* "Share Your Ideas" questions in the footer (2026-09-11); own column since 2026-09-16. */
.footer-ideas{margin-top:0;padding-top:0;border-top:0}
.footer-ideas-head{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:#fff;margin-bottom:6px}
.footer-ideas-icon{width:26px;height:26px;flex:0 0 auto;color:#ff5457}
.footer-ideas-icon svg{width:100%;height:100%;fill:currentColor}
.footer-ideas-list{list-style:none;margin:0 0 8px;padding:0}
.footer-ideas-list li{position:relative;padding-left:16px;margin:0 0 3px;font-size:13px;line-height:1.45;color:#ddd}
.footer-ideas-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.footer-ideas-link{display:inline-block;color:#ff5457;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.footer-ideas-link:hover{color:#fff}
.social-label-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#9a9a9a}
.authorization{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;font-size:13px;padding:14px 0 4px;border-top:1px solid #2b2b2b}
.authorization span+span::before{content:"|";margin-right:12px;color:#555}
.authorization a:hover{color:#f22}
@media(max-width:780px){
  .site-footer{padding-top:24px}
  .footer-rule{margin:14px 0}
  .footer-top{grid-template-columns:1fr;gap:18px;padding:0 0 14px}
  .footer-col{padding:0}
  .footer-col+.footer-col{border-left:0;border-top:1px solid #2b2b2b;padding-top:16px}
  .quick{gap:7px 14px}
  .authorization{font-size:12px;gap:6px 10px}
}
@media(max-width:470px){
  /* style.css hides .brand-sub in the header under 470px; the footer wordmark keeps it (v2). */
  .footer-brand .brand-sub{display:block}
  /* one item per line so the "|" separators never start a wrapped line */
  .authorization{flex-direction:column;align-items:center;gap:6px}
  .authorization span+span::before{content:none;margin:0}
}


/* ---- Lightbox on phones (2026-09-09): swipe handled in js/site.js; here the iOS bits.
   100dvh + safe-area so the image never hides under the notch/home bar, touch-action:none so
   the browser does not scroll/zoom the page while swiping, body.lb-lock is the scroll lock
   that actually works in iOS Safari (overflow:hidden alone does not). ---- */
body.lb-lock{position:fixed;left:0;right:0;overflow:hidden;width:100%}
.lightbox{height:100dvh;touch-action:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;
  padding:max(28px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.lightbox img{max-width:100%;max-height:calc(100dvh - 140px);user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.lightbox-close,.lightbox-prev,.lightbox-next{min-width:44px;min-height:44px;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.lightbox-close{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.lightbox-caption{bottom:max(18px,env(safe-area-inset-bottom));left:12%;right:12%;font-size:14px}
@media(max-width:780px){
  .lightbox-prev,.lightbox-next{top:auto;bottom:max(56px,calc(env(safe-area-inset-bottom) + 44px));transform:none;font-size:22px}
  .lightbox-prev{left:max(16px,env(safe-area-inset-left))}
  .lightbox-next{right:max(16px,env(safe-area-inset-right))}
  .lightbox-caption{bottom:max(112px,calc(env(safe-area-inset-bottom) + 100px))}
}

/* Signup pill: the Form plugin renders the button inside its own wrapper, so the flex row's
   stretch never reached it and it sat 1px short of the input. Explicit equal heights (and 44px
   = tap-target minimum) for both, wrapper made a flex child. */
.signup{align-items:stretch}
.signup>div{display:flex}
.signup input[type=email],.signup button{height:44px;box-sizing:border-box;line-height:1;margin:0}


/* ---- Section-title rule with the mountain mark (2026-09-09), partials/title-rule.html.twig.
   Mirrors donate.css .donate-divider so the motif is identical site-wide. ---- */
.section-title:has(+ .title-rule)::after{display:none}
.section-title:has(+ .title-rule){margin-bottom:10px}
/* style.css draws the same plain red rule under .page-title as under .section-title, in one
   shared selector — so page heroes that use the divider need their own switch-off (2026-09-10,
   /priorities). Without it the page shows both: the divider and a stray red dash under it. */
.page-title:has(+ .title-rule)::after{display:none}
.page-title:has(+ .title-rule){margin-bottom:14px}
.title-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 26px;max-width:300px}
.title-rule .line{flex:1;height:2px;background:var(--red)}
.title-rule-mark{width:34px;height:20px;color:var(--red);flex:0 0 auto}
.title-rule-mark svg{width:100%;height:100%;fill:currentColor}
@media(max-width:780px){.title-rule{max-width:220px;margin-bottom:20px}}

/* ---- Meet Ivan (2026-09-09): four chapters from MEET.docx. The column was halved to 540px
   when each story was a single sentence; the new copy runs to several paragraphs, so it needs
   more room. style.css sizes the image column as minmax(260px,34%), whose 260px floor would
   starve the text here, so it becomes a plain percentage. ---- */

/* ---- TASK 15 (2026-09-09): vertical timeline ------------------------------------------------
   .story-row (templates/modular/meet-ivan.html.twig) wraps each chapter and carries .story-dot
   plus a connecting line segment (::after) — see the twig file for why those live outside
   .story-item rather than inside it (js/site.js reveal fade).

   The spine is one segment per row, from this row's dot down to the NEXT row's dot
   (top:var(--dot-y), height:calc(100% + gap + dot-y)), not a single line spanning the whole
   list. Chapter 2 (pull quote + five paragraphs) is much taller than chapter 4 (three short
   paragraphs); sizing a segment off 100% of its OWN row means it always reaches exactly to the
   next dot regardless of how tall that row is, and the last row gets no segment at all — nothing
   is drawn above the first dot or below the last one.

   Desktop used to split image/text 34/66. At the geometric centre of an asymmetric split, the
   midpoint always falls inside whichever column is wider — on both sides of the alternation,
   there's no seam there for a spine. Equal-width columns are what open a real, alternation-proof
   gutter down the centre for the line and dot to sit in. ---- */
.story-list{
  --spine-x:50%;--dot-size:18px;--dot-y:26px;--row-gap:52px;
}
.story-row{position:relative;margin-bottom:var(--row-gap)}
.story-row:last-child{margin-bottom:0}
.story-item{margin-bottom:0}
.story-dot{
  position:absolute;top:var(--dot-y);left:var(--spine-x);
  width:var(--dot-size);height:var(--dot-size);
  transform:translate(-50%,-50%);
  border-radius:50%;background:var(--red);
  border:3px solid var(--soft2,#fff);
  box-shadow:0 0 0 2px var(--line);
  z-index:2;
}
.story-row:not(:last-child):after{
  content:'';position:absolute;top:var(--dot-y);left:var(--spine-x);
  width:2px;transform:translateX(-50%);background:var(--line);
  height:calc(100% + var(--row-gap) + var(--dot-y));
  z-index:1;
}
@media(min-width:781px){
  .story-list{max-width:900px}
  .story-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  .story-item img{position:sticky;top:96px}
  /* Alternation used to key off .story-item:nth-child(even) — .story-item is now the only
     child of .story-row, so it is always nth-child(1) of its own parent and that selector
     never matches. Re-keyed to the wrapper, which does alternate. */
  .story-row:nth-child(even) .story-item img{order:2}
  .story-row:nth-child(even) .story-item .story-body{order:1}
}
/* Rounded corners on the PHOTO, not on a frame around it (2026-09-10, client). style.css puts
   every timeline image in a fixed 4:5 box with object-fit:contain, a light background and 4-6px
   of padding — so the rounded corner belonged to that grey box while the picture inside kept its
   square ones, letterboxed above and below (all four photos in use are 3:4 or square, none is
   4:5). Dropping the box lets each photo be its own shape, and the radius then lands on the
   image itself. Heights vary a little between rows now; on an alternating timeline that reads
   as intentional rather than ragged. */
.story-item img{
  aspect-ratio:auto;
  height:auto;
  padding:0;
  background:transparent;
  border-radius:18px;
}
.story-item h2{font-size:20px;margin-bottom:4px;position:relative;padding-bottom:14px}
/* Client-requested short red underline under each chapter heading — a small rule, not the
   full-width .section-title border. left:0 works unchanged at both breakpoints because the
   heading text is left-aligned on both (see the mobile block below for why). */
.story-item h2:after{
  content:'';position:absolute;left:0;bottom:0;
  width:56px;height:3px;background:var(--red);border-radius:2px;
}
.story-subhead{color:var(--red);font-weight:800;font-size:15px;margin:0 0 12px}
.story-body p{font-size:15px;line-height:1.65;margin:0 0 12px}
.story-body p:last-child{margin-bottom:0}
.story-quote{
  margin:16px 0;padding:12px 0 12px 18px;border-left:3px solid var(--red);
  font-family:var(--font-head,Arial,Helvetica,sans-serif);font-size:17px;line-height:1.4;
  text-transform:none;
}
/* The slogan is now the last stop on the timeline (a .story-row of its own), so the old
   separating border is gone — the final dot does that job. Padding leaves room for it. */
.story-closing{
  max-width:900px;margin:0 auto;padding-top:34px;
  text-align:center;font-family:var(--font-head,Arial,Helvetica,sans-serif);
}
.story-row-closing{margin-bottom:0}
/* Slightly larger, filled dot so the end of the line reads as an end, not another chapter. */
.story-dot-final{width:calc(var(--dot-size) + 6px);height:calc(var(--dot-size) + 6px)}
@media(max-width:780px){
  /* Mobile spine sits in the left rail; the slogan keeps the same indent as the chapters. */
  .story-row-closing .story-closing{text-align:left;padding-top:26px}
}
.story-closing strong{display:block;font-size:26px;text-transform:uppercase;letter-spacing:.5px}
.story-closing span{display:block;margin-top:6px;color:var(--red);font-size:16px;text-transform:uppercase}
@media(max-width:780px){
  /* Spine moves to the left; chapters sit to the right of it. Headings/paragraphs switched from
     centred to left-aligned to match the rail (see ## Result for why) — style.css already had
     paragraphs left-aligned and only the heading/subhead centred, so this also removes an
     existing mismatch rather than just serving the timeline. */
  /* --spine-x is measured from .story-row's own left edge, and the row starts *after*
     .story-list's padding — so a positive value put the spine and dots on top of the text.
     Both now derive from one --rail so the line sits in the middle of the gutter. */
  .story-list{
    --rail:30px;
    --spine-x:calc(var(--rail) / -2);
    --dot-size:14px;--dot-y:18px;--row-gap:40px;
    padding-left:var(--rail);
  }
  .story-item{grid-template-columns:1fr;gap:16px}
  .story-item img{margin:0}
  .story-body h2{text-align:left}
  .story-subhead{text-align:left}
  .story-body p{text-align:left;font-size:14px}
  .story-quote{font-size:15px}
  .story-closing strong{font-size:20px}
  .story-closing span{font-size:14px}
}

/* ---- Home hero (2026-09-09): copy left, photo NOT mirrored. The mirror was tried and
   reverted — flipping the frame also flips the Whistler skyline, and anyone local reads a
   mirrored mountain range as wrong. hero-index.jpg already has Ivan on the right and open
   water on the left, which is exactly where style.css's 90deg gradient is darkest. ---- */
/* Hero rule: white (the section rules elsewhere are red — on the photo white reads better and
   matches the headline), and exactly as wide as the headline text thanks to .hero-head. The
   mountain, being centred in the rule, lands under the middle of "IVAN IS HERE." */
.hero-head{display:inline-block;max-width:100%}
.hero-content .title-rule{width:100%;max-width:none;margin:16px 0}
.hero-content .title-rule .line{background:#fff}
.hero-content .title-rule-mark{color:#fff}
.hero-content .strap span{display:block}
@media(max-width:780px){
  /* Copy to the bottom of the hero: on a phone the centred block landed straight on Ivan's
     face. Photo now reads in the upper part, text sits over the dark foot of the gradient. */
  .home-hero{display:flex;align-items:flex-end;min-height:min(640px,86svh)}
  /* .wrap sets margin:auto, which in a flex column centres the block and cancels flex-end —
     the bottom margin has to be zeroed explicitly, not just the top set to auto. */
  .hero-content{padding-top:0;padding-bottom:30px;margin-top:auto;margin-bottom:0}
  .hero-content .title-rule{margin:12px 0;max-width:none}
}
@media(max-width:470px){
  .home-hero{min-height:min(600px,84svh)}
  .hero-content{padding-bottom:24px}
}

/* Get Involved cards overflowed by 16px at 320px wide (found while checking the hero headline).
   .cards-3 keeps its style.css grid; the cards just need to be allowed to shrink below their
   content's intrinsic width, which grid items do not do by default. */
@media(max-width:400px){
  .cards-3{grid-template-columns:minmax(0,1fr)}
  .action-card{min-width:0}
}


/* ---- "Learn More" on the homepage priority cards. 2026-09-09: red pill. 2026-09-17 (client,
   "iba červený text >"): no pill — plain red uppercase text with the site chevron, the same
   look as the "Read More" links on /news. The chevron is its own span so it can be sized
   without touching the label. ---- */
.priority-card .learn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;color:var(--red);
  border-radius:0;padding:0;
  font-size:12px;letter-spacing:.6px;font-weight:900;
  box-shadow:none;
  transition:color .2s ease;
  align-self:center;
}
.priority-card .learn:hover{color:#a90709;text-decoration:underline;text-underline-offset:3px}
.learn-arrow{display:inline-flex;line-height:1}
.learn-arrow .chev{width:14px;height:14px}
@media(max-width:780px){
  /* style.css puts the link in its own grid column on phones — keep it compact there. */
  .priority-card .learn{font-size:11px;align-self:center}
  .learn-arrow .chev{width:13px;height:13px}
}
/* Below 390px style.css moves the link out of its own column onto a row of its own
   (.priority-card .learn{grid-column:2;grid-row:3}); size it to its content, not the card width.
   Tap target: the text is ~14px tall, under the 44px this project treats as a hard rule, so an
   invisible ::after stretches the hit area to 44px without changing what is drawn. */
@media(max-width:470px){
  .priority-card .learn{
    justify-self:start;
    font-size:10.5px;
    gap:5px;
    position:relative;
  }
  .priority-card .learn::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  .learn-arrow .chev{width:12px;height:12px}
}

/* ---------------------------------------------------------------------------------------
   Priority-page hero backdrop. Re-added 2026-09-09 after TASK 15's rewrite of the Meet Ivan
   block in this file removed it — the hero had silently fallen back to style.css's old
   priority-mountain.jpg with the whole element greyscaled.

   Two things this does that the locked style.css cannot:
   1. The photo sits on a ::before layer, so only the photo is greyscaled and the red icon badge
      on top keeps its colour (style.css greyscales the whole element, and a child cannot undo
      an ancestor's filter — the `>*{filter:grayscale(0)}` in style.css never worked).
   2. The gradient fades much further on the right so the landscape is actually visible there,
      instead of being buried under a near-flat black wash.
   css/blocks/ is one level below css/, hence ../../images/.
   --------------------------------------------------------------------------------------- */
.priority-hero{filter:none;background-image:none;position:relative;isolation:isolate}
.priority-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.22) 100%),
             url("../../images/hero-hills.jpg") right 30%/cover no-repeat;
  filter:grayscale(1);
}
.priority-hero > .wrap{position:relative;z-index:1}
@media(max-width:780px){
  /* Phone: the copy spans the full width, so a left-to-right fade would put text on the bright
     part. Fade top-to-bottom instead and keep the ridge visible under the text. */
  .priority-hero::before{
    background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.86)),
               url("../../images/hero-hills.jpg") center 30%/cover no-repeat;
  }
}


/* Red mountain mark above each Get Involved card heading (2026-09-09) — same glyph as the logo
   and the section rules, so the three cards carry the brand rather than starting cold on text. */
.action-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.action-card-head h3{margin:0}
.action-card-mark{flex:0 0 auto;width:38px;height:23px;color:var(--red)}
.action-card-mark svg{width:100%;height:100%;fill:currentColor}
/* Square box for the per-card Material Symbols glyphs (2026-09-10) — the mountain is a 38x23
   landscape mark, these are 1:1, so reusing its box would squash them. */
.action-card-icon{width:48px;height:48px}  /* 27px until 2026-09-10 (client: "ikonku väčšiu") */
/* Red rule under the card head, full width (2026-09-10, client), then the lead line. */
.action-card-head{padding-bottom:12px;border-bottom:3px solid var(--red);margin-bottom:14px}
/* Lead line under the card heading (2026-09-10, client: "druhú vetu výraznejšiu"). */
.action-card-lead{font-size:20px;font-weight:900;line-height:1.3;color:var(--ink);margin:0 0 6px}

/* ---- Bullet lists in the Get Involved cards (2026-09-10, client) ----
   Same red dot as the priority-page columns, so the site has one bullet, not two. The card
   becomes a flex column and the button gets margin-top:auto: the three lists are different
   lengths, and without it the three buttons would sit at three different heights. */
.action-card{display:flex;flex-direction:column}
.action-card-list{list-style:none;padding:0;margin:12px 0 18px}
.action-card-list li{position:relative;padding-left:18px;margin:0 0 9px;font-size:14px;line-height:1.5}
.action-card-list li:last-child{margin-bottom:0}
.action-card-list-bold li{font-weight:800;font-size:15px}  /* bold_items: true on the card */
.action-card-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:50%;background:var(--red);
}
/* align-self matters as much as the margin here: making the card a flex column turns the button
   into a flex item, and a flex item stretches to the cross axis by default — which silently blew
   the compact pill up to the full card width. The signup bar is the one child that SHOULD stretch. */
.action-card > .btn{margin-top:auto;align-self:flex-start}
.action-card > .signup{margin-top:auto;align-self:stretch}
@media(max-width:780px){
  /* Centred cards on phones (see the block above) — the bullets have to come back to the left,
     or each dot floats in the middle of the card with ragged text beside it. The list itself is
     centred as a block, the text inside it stays left-aligned. */
  .action-card-list{text-align:left;display:inline-block;margin-left:auto;margin-right:auto}
  .action-card-list li{font-size:13px;margin-bottom:8px}
  /* Cards are centred at this width, so the pill centres with them instead of hugging the left. */
  .action-card > .btn{align-self:center}
}
@media(max-width:780px){
  .action-card-head{gap:10px}
  .action-card-mark{width:32px;height:19px}
  .action-card-icon{width:40px;height:40px}
  .action-card-lead{font-size:17px}
  .action-card-mobile-last{order:99}  /* mobile_last: true on the card; .cards-3 is a grid, order applies */
}

/* ---- Get Involved on phones (2026-09-09, client): centre the cards, shrink the buttons ----
   The three cards stack to one column at this width (style.css .cards-3), and a single
   full-width card with everything hugging the left edge read as unfinished next to the centred
   section title and rule above it. Centring is per-card, not on .cards-3, so the desktop
   three-across layout is untouched.

   `.btn` is inline-flex, so text-align:center on the card is what centres it — no margin games.
   Same 44px invisible hit area as the Learn More pills above, for the same reason. */
@media(max-width:780px){
  .action-card{text-align:center}
  .action-card-head{justify-content:center}
  .action-card .btn{
    padding:10px 18px;
    font-size:11px;
    letter-spacing:.4px;
    position:relative;
  }
  .action-card .btn::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  /* The third card holds the disabled signup look-alike: its input+button bar is a flex row that
     must stay full width (a centred 200px input would look broken), so only the note under it
     inherits the centring. The bar's own button keeps the bar's sizing, not the card's. */
  .action-card .signup{text-align:left}
  .action-card .signup .btn{padding:12px 16px;font-size:11px}
  .action-card .signup .btn::after{display:none}
}


/* Nav labels stay white; a small dot before each one carries the distinction instead. The three
   standalone pages (Contact / Priorities / News) get a red dot, the homepage anchors a white one,
   so the two groups are legible without turning half the menu red.
   .nav a keeps its vertical padding from style.css (that padding is what the hover underline
   sits on), so it becomes inline-flex rather than getting the dot positioned absolutely. */
.nav a{display:inline-flex;align-items:center;gap:8px}
.nav a::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:#fff;transition:background .2s ease;
}
.nav a.nav-accent::before{background:var(--red)}
.nav a:hover::before{background:#f22}
@media(max-width:780px){
  /* stacked menu — keep the dots aligned down the left edge */
  .nav a{justify-content:flex-start;gap:10px}
}

/* ---- The site's one arrow (icons.chev(), 2026-09-17): sizes with the text, inherits colour. */
.chev{display:inline-block;width:.8em;height:.8em;vertical-align:-.06em;flex:0 0 auto}

/* ---- Hero bottom edge (2026-09-10, client: "zaoblenie pod hero zrušme, nechajme iba červenú
   čiaru", then "všade"). style.css rounds the bottom corners of every hero (34/28/24/20px by
   breakpoint) and gives the home one a drop shadow; all of that goes, and every hero ends on the
   same 3px red line the home hero already had. !important because style.css re-sets the radius
   inside its own media queries and this file must win at every width. */
.home-hero,.simple-hero,.priority-hero{
  border-radius:0!important;
  box-shadow:none!important;
}
/* 2026-09-11, client: no red line under the home hero photo. 2026-09-16, client: none under
   the sub-page heroes either ("všade pod hero vyhodiť červenú čiaru") — every hero now ends
   flat on the photo, the line is gone site-wide. */
.home-hero,.simple-hero,.priority-hero{border-bottom:0}

/* ---- Simple-page hero backdrop (2026-09-11, client: "use the new photo instead of those
   mountain backgrounds"). style.css still points .simple-hero (contact, donate, privacy, cookie,
   news, vote) at the old priority-mountain.jpg; every other mountain backdrop already uses
   hero-hills.jpg, which now holds the client's own panorama (vstupy/novaa.JPG, top strip,
   greyscale — see bin/optimize-images.py). Same dark wash as before. /priorities is unaffected:
   .page-shell-priorities .simple-hero sets background:none with higher specificity. ---- */
.simple-hero{
  background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
             url("../../images/hero-hills.jpg") center 40%/cover no-repeat;
}