/* ============================================================
   FREERIDE KOSOVO — THEME ADDITIONS
   Everything here builds on the design system in fk-base.css:
   header/footer chrome, WordPress plumbing, and the handful of
   section patterns the inner pages need.
   ============================================================ */

/* ---- WordPress plumbing --------------------------------------------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body)}
img{max-width:100%;height:auto}
.fk-wrap > *:first-child{margin-top:0}

/* ---- header --------------------------------------------------------- */
.fk-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.fk-nav.is-scrolled{border-bottom:1px solid var(--line)}
.fk-nav-in{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:74px}
.fk-nav-nav{flex:1;min-width:0}
.fk-nav-links{display:flex;list-style:none;gap:28px;margin:0;padding:0;justify-content:center}
.fk-nav-links a{text-decoration:none;color:var(--ink);font-size:15px;font-weight:500}
.fk-nav-links a:hover{color:var(--muted)}
.fk-nav-links .current-menu-item > a{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--lime)}
.fk-nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.fk-nav-tel{text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap}
/* The logo is never cropped or letterboxed: height is capped, width follows,
   and the full wordmark including descenders stays visible at every size. */
.fk-logo{flex-shrink:0;display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.fk-logo img{height:clamp(30px,3.2vw,40px);width:auto;max-width:100%;display:block;object-fit:contain}
.fk-footer .fk-logo img{height:38px}

/* Text fallback, used only if the logo files are missing. */
.fk-wordmark{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:900;letter-spacing:.02em;font-size:18px;line-height:1.2}
.fk-wordmark .mark{color:var(--lime-600)}
.fk-wordmark--dark{color:#fff}

/* ---- mobile menu ---------------------------------------------------- */
.fk-burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:transparent;cursor:pointer;position:relative}
.fk-burger span,.fk-burger span::before,.fk-burger span::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:18px;height:2px;background:var(--ink);border-radius:2px}
.fk-burger span{top:50%;margin-top:-1px}
.fk-burger span::before{top:-6px;left:0;transform:none}
.fk-burger span::after{top:6px;left:0;transform:none}
.fk-mobile-nav{border-top:1px solid var(--line);background:var(--paper);padding-block:20px 28px}
.fk-mobile-links{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column}
.fk-mobile-links a{display:block;padding:14px 0;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:800;font-size:18px;border-bottom:1px solid var(--line)}
.fk-mobile-contact{margin-top:18px;font-size:15px;color:var(--muted)}
.fk-mobile-contact a{color:var(--ink)}
html.fk-nav-open{overflow:hidden}
@media (max-width:1000px){
  .fk-nav-nav,.fk-nav-tel{display:none}
  .fk-burger{display:block}
}
@media (min-width:1001px){.fk-mobile-nav{display:none!important}}

/* ---- footer -------------------------------------------------------- 
   Four columns, and the link lists kept short enough to scan. The base
   stylesheet collapses list gaps to zero for the old markup; everything
   below re-sets it rather than relying on that.                          */
.fk-footer{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.fk-footer-in{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:clamp(32px,4vw,56px);padding-block:clamp(56px,7vw,84px);align-items:start;
}
.fk-footer-brand .fk-wordmark{font-size:20px}
.fk-footer-tag{color:var(--muted-dark);font-size:15px;line-height:1.55;margin:18px 0 0;max-width:34ch}

.fk-footer h4{
  font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 18px;
  padding-bottom:12px;border-bottom:1px solid var(--line-dark);
}
.fk-footer-col h4{position:relative}
.fk-footer-col h4::after{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:1px;background:var(--lime)}

.fk-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fk-footer-links li{margin:0}
.fk-footer-links a{
  display:inline-block;color:rgba(255,255,255,.78);text-decoration:none;
  font-size:15px;line-height:1.35;padding:9px 0;transition:color .15s ease,transform .15s ease;
}
.fk-footer-links a:hover{color:var(--lime);transform:translateX(3px)}
.fk-footer-links .current-menu-item > a{color:#fff}

.fk-footer-contact{display:flex;flex-direction:column;align-items:flex-start}
.fk-footer-strong{
  display:block;color:#fff;text-decoration:none;font-family:var(--f-display);
  font-size:17px;font-weight:800;letter-spacing:.01em;padding:6px 0;word-break:break-word;
}
.fk-footer-strong:hover{color:var(--lime)}
.fk-footer-place{color:var(--muted-dark);font-size:14px;margin:10px 0 0}
.fk-footer-cta{margin-top:20px}

.fk-social{list-style:none;display:flex;gap:18px;margin:22px 0 0;padding:0}
.fk-social a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;padding:8px 0;display:inline-block}
.fk-social a:hover{color:var(--lime)}

.fk-newsletter{margin-top:26px;width:100%;max-width:320px}
.fk-newsletter h4{margin-bottom:12px}
.fk-newsletter p{font-size:14px;color:var(--muted-dark);margin:0 0 12px;line-height:1.5}
.fk-newsletter form{display:flex;gap:8px;flex-wrap:wrap}
.fk-newsletter input{
  flex:1;min-width:150px;min-height:46px;padding:10px 16px;border-radius:var(--r-btn);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.07);color:#fff;font-family:var(--f-body);
}
.fk-newsletter input::placeholder{color:rgba(255,255,255,.55)}

.fk-footer-bottom{
  border-top:1px solid var(--line-dark);padding-block:22px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--muted-dark);
}

@media (max-width:1000px){
  .fk-footer-in{grid-template-columns:1fr 1fr;gap:40px}
  .fk-footer-brand{grid-column:1/-1}
  .fk-footer-contact{grid-column:1/-1}
  .fk-newsletter{max-width:none}
}
@media (max-width:560px){
  .fk-footer-in{grid-template-columns:1fr}
  .fk-footer-tag{max-width:none}
}

/* ---- hero variants used by inner pages ------------------------------- */
.fk-hero--compact{min-height:clamp(340px,44vh,480px)}
.fk-hero--plain{background:var(--ink);color:#fff;padding-block:clamp(72px,10vw,132px)}
.fk-hero--plain h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,64px);line-height:1.02;margin:12px 0 18px;max-width:20ch}
.fk-hero--plain p{color:var(--muted-dark);font-size:clamp(17px,1.6vw,20px);max-width:62ch;margin:0}

/* ---- generic card grid ---------------------------------------------- */
.fk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:40px}
.fk-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow-sm)}
.fk-alt .fk-card{background:var(--paper)}
.fk-dark .fk-card{background:var(--ink-2);border-color:var(--line-dark);color:#fff}
.fk-dark .fk-card p{color:var(--muted-dark)}
.fk-card .fk-card-kicker{font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.fk-card h3{font-family:var(--f-display);font-weight:800;font-size:20px;margin:0 0 10px;text-transform:uppercase}
.fk-card h3 a{color:inherit;text-decoration:none}
.fk-card p{color:var(--muted);font-size:15px;margin:0 0 14px}
.fk-card b.fk-card-big{display:block;font-family:var(--f-display);font-size:30px;font-weight:900;margin:2px 0 8px}

/* ---- two-column prose ------------------------------------------------ */
.fk-cols{columns:2;column-gap:44px;margin-top:28px}
.fk-cols p{break-inside:avoid;color:var(--muted);font-size:16px;margin:0 0 18px}
@media (max-width:760px){.fk-cols{columns:1}}

/* ---- payment / data table ------------------------------------------- */
.fk-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:15px}
.fk-table th,.fk-table td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.fk-table th{font-family:var(--f-display);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.fk-table td.fk-num{font-family:var(--f-display);font-weight:900;font-size:22px;white-space:nowrap}
.fk-table tr:last-child td{border-bottom:0}
.fk-table--total tr:last-child{background:var(--paper-2)}
@media (max-width:640px){
  .fk-table thead{display:none}
  .fk-table tr{display:block;border-bottom:1px solid var(--line);padding-block:14px}
  .fk-table td{display:block;border:0;padding:4px 0}
}

/* ---- contact / emergency number cards -------------------------------- */
.fk-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.fk-contact{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--paper)}
.fk-contact em{display:block;font-style:normal;font-family:var(--f-display);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fk-contact b{display:block;font-family:var(--f-display);font-size:24px;font-weight:900;margin-bottom:8px}
.fk-contact b a{color:inherit;text-decoration:none}
.fk-contact p{margin:0;color:var(--muted);font-size:14px}

/* ---- gear list columns ---------------------------------------------- */
.fk-gear{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.fk-gear > div{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--paper)}
.fk-gear h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:18px;margin:0 0 4px}
.fk-gear > div > p{color:var(--muted);font-size:14px;margin:0 0 16px}
.fk-gear ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.fk-gear li{break-inside:avoid;font-size:15px;padding:7px 0 7px 20px;position:relative;color:var(--ink)}
.fk-gear li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;background:var(--lime-600)}
@media (max-width:860px){.fk-gear{grid-template-columns:1fr}.fk-gear ul{columns:1}}

/* ---- callout / note band --------------------------------------------- */
.fk-callout{border-left:3px solid var(--lime);background:var(--paper-2);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:24px 28px;margin-top:32px}
.fk-callout p{margin:0;color:var(--ink);font-size:16px}
.fk-dark .fk-callout{background:var(--ink-2);}
.fk-dark .fk-callout p{color:rgba(255,255,255,.86)}

/* ---- legal / terms blocks ------------------------------------------- */
.fk-terms{margin-top:40px;display:grid;gap:36px;max-width:74ch}
.fk-terms h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:18px;margin:0 0 12px}
.fk-terms p,.fk-terms li{color:var(--muted);font-size:16px;line-height:1.65}
.fk-terms ul{padding-left:20px;margin:0}
.fk-terms li{margin-bottom:10px}

/* ---- closing CTA band ------------------------------------------------
   Centred as a whole. The eyebrow carries a leading rule that is anchored
   to the left edge of its box by default, which left it stranded on the
   far left while the heading and buttons sat in the middle. Here the
   eyebrow becomes an inline-flex box so the rule travels with the text. */
.fk-cta{background:var(--ink);color:#fff;text-align:center}
.fk-cta .fk-wrap{display:flex;flex-direction:column;align-items:center}
.fk-cta .fk-eyebrow{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:auto}
.fk-cta h2,
.fk-cta .fk-h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,4vw,48px);line-height:1.05;margin:14px 0 26px;max-width:24ch}
.fk-cta .fk-lead{max-width:60ch;margin-inline:auto}
.fk-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}

/* ---- form feedback (plugin output) ----------------------------------- */
.fk-form-msg{grid-column:1/-1;border-radius:var(--r-md);padding:16px 20px;font-size:15px;margin-bottom:8px}
.fk-form-msg--ok{background:rgba(201,224,27,.16);border:1px solid var(--lime);color:#fff}
.fk-form-msg--err{background:rgba(207,46,46,.16);border:1px solid #CF2E2E;color:#fff}
.fk-field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- pagination ------------------------------------------------------ */
.pagination{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-btn);
  text-decoration:none;color:var(--ink);font-size:14px}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- search form ----------------------------------------------------- */
.fk-searchform{display:flex;gap:10px;margin-top:24px}
.fk-searchform input{flex:1;min-height:50px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-md)}

/* ---- print ----------------------------------------------------------- */
@media print{
  .fk-nav,.fk-footer,.fk-enquiry,.fk-cta,.fk-mobile-nav{display:none!important}
  .fk-section{padding-block:18px}
}

/* ============================================================
   PHOTO PILLARS
   The three cards under "A single-cat operation" — a photograph
   behind each one, darkened from the top so the text stays legible,
   with the number in lime. Values match what is live: 480px tall,
   21px radius, 32px padding, and the overlay easing back on hover.
   ============================================================ */
.fk-pillars--photo{gap:20px}
.fk-pillar--photo{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:480px;border-radius:21px;padding:32px;
  display:flex;flex-direction:column;gap:20px;justify-content:flex-start;
  background:var(--card-img) center/cover no-repeat,#1E1F1D;
}
.fk-pillar--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(191deg,#1E1F1D 0%,rgba(0,0,0,.22) 68%);
  transition:opacity .4s ease;
}
.fk-pillar--photo:hover::before{opacity:.81}
/* The variant re-declares everything the flat .fk-pillar sets, so it does not
   matter which section tone it sits in. */
.fk-pillar--photo,
.fk-alt .fk-pillar--photo,
.fk-dark .fk-pillar--photo{background-color:#1E1F1D;box-shadow:none}
.fk-pillar--photo .num{
  font-family:var(--f-display);font-size:16px;font-weight:600;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--lime);margin:0;
}
.fk-pillar--photo .fk-h3{color:#F4F4F1;font-size:27px;line-height:1.05;margin:0}
.fk-pillar--photo p,
.fk-dark .fk-pillar--photo p{color:#fff;font-size:16px;line-height:1.2;margin:0}
@media (max-width:1000px){
  .fk-pillars--photo{grid-template-columns:1fr 1fr!important}
  .fk-pillar--photo{min-height:420px}
}
@media (max-width:700px){
  .fk-pillars--photo{grid-template-columns:1fr!important}
  .fk-pillar--photo{min-height:380px}
}

/* ---- intro split: text left, photo right, pill under the copy ------- */
.fk-intro-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.fk-intro-split .fk-media img{border-radius:21px;width:100%;display:block}
.fk-intro-copy p{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 14px;max-width:56ch}
.fk-intro-copy .fk-btn{margin-top:18px}
@media (max-width:900px){.fk-intro-split{grid-template-columns:1fr}}

/* ---- dark section with a photograph behind it ------------------------ */
.fk-section--photo{position:relative;isolation:isolate;overflow:hidden}
.fk-section--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sec-img) center/cover no-repeat;opacity:.5;
}
.fk-section--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(30,31,29,.92) 0%,rgba(30,31,29,.78) 100%);
}

/* ============================================================
   DARK-SECTION TEXT
   The base stylesheet colours body copy for light sections. Anything
   that also appears inside .fk-dark needs the light-on-dark version,
   or it renders near-black on near-black — visible only as the lime
   tick marks with nothing beside them.
   ============================================================ */
.fk-dark .fk-list li,
.fk-dark .fk-note,
.fk-dark .fk-terms p,
.fk-dark .fk-terms li,
.fk-dark .fk-cols p,
.fk-dark p:not([class]),
.fk-cta .fk-list li,
.fk-enquiry .fk-list li{color:rgba(255,255,255,.86)}

.fk-dark .fk-list li::before,
.fk-cta .fk-list li::before{border-color:var(--lime)}

.fk-dark .fk-h3,
.fk-dark .fk-terms h3,
.fk-cta .fk-h3{color:#fff}

.fk-dark a:not(.fk-btn),
.fk-cta a:not(.fk-btn){color:var(--lime)}

.fk-dark .fk-table th{color:rgba(255,255,255,.55)}
.fk-dark .fk-table td,
.fk-dark .fk-table{color:rgba(255,255,255,.86);border-color:var(--line-dark)}
.fk-dark .fk-table th,
.fk-dark .fk-table td{border-bottom-color:var(--line-dark)}

/* Cards and contact tiles sitting on dark ground */
.fk-dark .fk-contact{background:var(--ink-2);border-color:var(--line-dark)}
.fk-dark .fk-contact b,
.fk-dark .fk-contact b a{color:#fff}
.fk-dark .fk-contact em,
.fk-dark .fk-contact p{color:var(--muted-dark)}
.fk-dark .fk-gear > div{background:var(--ink-2);border-color:var(--line-dark)}
.fk-dark .fk-gear h3{color:#fff}
.fk-dark .fk-gear li{color:rgba(255,255,255,.86)}
.fk-dark .fk-gear > div > p{color:var(--muted-dark)}

/* ============================================================
   SMALL LABELS ON LIGHT GROUND
   The brand lime is a signal colour, not a text colour: at 11–16px on
   white it measures about 1.7:1, which is unreadable for anyone with
   reduced contrast sensitivity and fails WCAG by a distance. Small text
   labels use a darkened version of the same hue; the lime stays for
   rules, ticks, buttons and anything on dark ground, where it is fine.
   ============================================================ */
:root{--lime-text:#5E6B07}
.fk-pillar .num,
.fk-day-num,
.fk-card .fk-card-kicker,
.fk-pack-kicker{color:var(--lime-text)}
.fk-dark .fk-pillar .num,
.fk-dark .fk-day-num,
.fk-dark .fk-card .fk-card-kicker,
.fk-dark .fk-pack-kicker,
.fk-pillar--photo .num{color:var(--lime)}
.fk-alt .fk-day-num{color:var(--lime-text)}

/* ============================================================
   HERO LEGIBILITY
   The hero photograph is bright exactly where the headline sits. The
   image is mirrored so its darker side falls behind the copy, and a
   left-to-right scrim sits over it. Nothing in these photographs is
   direction-dependent — no text, no signage — so mirroring is safe.
   ============================================================ */
.fk-hero-img{transform:scaleX(-1)}
/* The scrim belongs only to heroes that actually carry a photograph. On a
   plain hero it has nothing to darken and simply greys out the headline. */
.fk-hero:has(.fk-hero-img)::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,12,10,.78) 0%,rgba(11,12,10,.45) 45%,rgba(11,12,10,.12) 100%);
}
.fk-hero-in{position:relative;z-index:2}
/* Fallback for browsers without :has() — never darken a plain hero. */
.fk-hero--plain::before{display:none!important}
.fk-hero--plain > .fk-wrap{position:relative;z-index:2}

/* ---- bare list columns ----------------------------------------------
   Same two-column list, without the card around it: used where the
   section background should carry the content on its own. */
.fk-gear--bare{gap:clamp(28px,4vw,56px)}
.fk-gear--bare > div{background:none;border:0;padding:0;box-shadow:none}
.fk-gear--bare h3{margin-bottom:14px}

/* ============================================================
   HERO ALIGNMENT
   A hero's copy sits on the same left edge and the same maximum width
   as every section below it, whether or not the hero has a photograph.
   ============================================================ */
.fk-hero-in,
.fk-hero--plain > .fk-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.fk-hero--plain h1{max-width:22ch}
.fk-hero-in > *{max-width:none}

/* ============================================================
   INNER-PAGE HEROES
   The homepage hero is the loud one. On every supporting page the
   headline was running at the same size — three lines of 88px with the
   copy jammed against the band below it. These heroes get a smaller
   display size, a wider measure so the line count drops, and real
   breathing room above and below.
   ============================================================ */
.fk-hero--compact,
.fk-hero--plain{min-height:auto}

.fk-hero--compact{
  padding-block:clamp(72px,9vw,120px);
  align-items:center;
}
.fk-hero--plain{padding-block:clamp(80px,10vw,132px)}

.fk-hero--compact .fk-hero-in{padding-bottom:0}

.fk-hero--compact h1,
.fk-hero--plain h1{
  font-size:clamp(30px,4vw,54px);
  line-height:1.06;
  max-width:18ch;
  margin:0 0 20px;
  letter-spacing:-.01em;
}

.fk-hero--compact .fk-hero-eyebrow,
.fk-hero--plain .fk-eyebrow{margin-bottom:20px}

.fk-hero--compact p,
.fk-hero--plain p{
  font-size:clamp(16px,1.35vw,18px);
  max-width:56ch;
  margin:0;
  line-height:1.65;
}

/* The stats band sits directly under a hero on some pages: give it its
   own space rather than letting it butt against the hero copy. */
.fk-hero--compact + .fk-stats,
.fk-hero--plain + .fk-stats{border-top:1px solid var(--line-dark)}
.fk-stats-in{padding-block:clamp(26px,3vw,38px)}

@media (max-width:620px){
  .fk-hero--compact{padding-block:64px}
  .fk-hero--plain{padding-block:64px}
  .fk-hero--compact h1,
  .fk-hero--plain h1{font-size:clamp(28px,8vw,38px);max-width:none}
}