/* Fjala · a fictional language school in Shkodër (English, German, Italian), on Sezoni's base template (site/demo/bliri/).
   TO RE-SKIN FOR A CLIENT: change the 4 colours and the 2 fonts just below (and the Google Fonts link in
   index.html). Every other colour on the page is mixed from these four.
   The one extra is the class timetable with its filters and the WhatsApp sign-up ("timetable + sign-up" below).
   Motion: no signature motion, only the kit's short reveals and 0.2s hovers. */
:root {
  /* ---- Brand colours: the only four to change ---- */
  --brand: #1D4352;   /* main colour: logo, headings, prices, active chip, footer. Keep it dark: --paper text sits on it (4.5:1 or more). */
  --accent: #F08A5D;  /* highlight: the Call button, today's hours, focus ring on dark. --ink text sits on it. Never for small text on --paper. */
  --paper: #F7F5F0;   /* page background */
  --ink: #1B2A30;     /* text */
  /* ---- Fonts: the only two to change ---- */
  --font-display: "Literata", Georgia, "Times New Roman", serif;                    /* the name and the headings */
  --font-body: "Andika", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* everything else */

  /* mixed from the four colours above: no need to touch */
  --muted: color-mix(in srgb, var(--ink) 72%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --soft: color-mix(in srgb, var(--brand) 8%, var(--paper));
  --card: color-mix(in srgb, #fff 55%, var(--paper));
  --today: color-mix(in srgb, var(--accent) 30%, var(--paper));
  --brand-dk: color-mix(in srgb, var(--brand) 82%, #000);
  --park: color-mix(in srgb, var(--brand) 16%, var(--paper));
  --tree: color-mix(in srgb, var(--brand) 30%, var(--paper));
  --hdr: 60px;
  --r: 14px;
  --progress: var(--brand);
}
/* phones from before 2023 without color-mix(): neutral greys that suit any brand */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --muted: #5a5e5a; --line: #d9d6cf; --soft: rgba(0, 0, 0, .045); --card: rgba(255, 255, 255, .6); --today: rgba(0, 0, 0, .07); --brand-dk: var(--brand); --park: rgba(0, 0, 0, .07); --tree: rgba(0, 0, 0, .14); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img { height: auto; }
button { font: inherit; color: inherit; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h2 { font: 700 clamp(2.1rem, 7vw, 3.1rem)/1.05 var(--font-display); color: var(--brand); letter-spacing: -.01em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .ftr :focus-visible { outline-color: var(--accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--brand); background: var(--brand); color: var(--paper); font: 700 15px/1.1 var(--font-body); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, translate .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--brand-dk); }
.btn:active { translate: 0 1px; }
.btn--line { background: transparent; color: var(--brand); }
.btn--line:hover { background: var(--soft); }

/* ---------- header: logo, language, Call ---------- */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { --vein: var(--paper); display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; color: var(--brand); text-decoration: none; }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 4px; font: 700 27px/1 var(--font-display); letter-spacing: -.01em; } /* a long name never pushes the Call button off the screen */
.logo img { display: block; height: 36px; width: auto; }
.hdr__r { display: flex; flex: none; align-items: center; gap: 8px; }
.lang { display: flex; background: var(--soft); border-radius: 999px; }
.lang button { min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: none; font: 800 14px/1 var(--font-body); letter-spacing: .04em; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; }
.lang button[aria-pressed="true"] { background: var(--brand); color: var(--paper); }
.btn--call { padding-inline: 14px; } /* "Telefononi" fits next to Bliri and SQ/EN at 390 px */
@media (max-width: 379px) {
  .btn--call { width: 44px; padding: 0; }
  .btn--call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* a name too long for the header: the Call button keeps only its icon (set by the script in index.html) */
.hdr__in.is-tight .btn--call { width: 44px; padding: 0; }
.hdr__in.is-tight .btn--call span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- hero: photo, name, one line, open now, three buttons ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(calc(100vh - var(--hdr)), 780px); min-height: min(calc(100svh - var(--hdr)), 780px); color: #fff; background: #1b1f1c; }
.hero__img, .hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { z-index: -2; }
.hero__img img { object-fit: cover; object-position: 50% 60%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 14, 12, .1) 0%, rgba(12, 14, 12, .18) 30%, rgba(12, 14, 12, .78) 68%, rgba(12, 14, 12, .9) 100%); }
.hero__in { padding: 120px 0 26px; }
.hero__kicker { font: 800 13px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hero__name { font: 700 clamp(4.2rem, 19vw, 8.5rem)/.92 var(--font-display); letter-spacing: -.02em; margin: 8px 0 14px; }
.hero__line { font-size: clamp(1.05rem, 3.2vw, 1.3rem); line-height: 1.45; max-width: 34ch; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.status { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0; padding: 8px 15px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); font-weight: 700; font-size: 15px; line-height: 1.25; }
.js .status:not([data-state]) { visibility: hidden; } /* the text in the HTML only shows without JavaScript */
.status i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .22); }
.status[data-state="closed"] i { background: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .22); }
.hero__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 600px; }
.hb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 4px; border-radius: var(--r); background: var(--paper); color: var(--ink); font: 800 15px/1.15 var(--font-body); text-decoration: none; text-align: center; transition: translate .2s, background-color .2s; }
.hb svg { width: 24px; height: 24px; flex: none; color: var(--brand); }
.hb--main { background: var(--accent); }
.hb--main svg { color: var(--ink); }
.hb:hover { translate: 0 -2px; }
@media (min-width: 700px) {
  .hero__in { padding-bottom: 56px; }
  .hb { flex-direction: row; gap: 10px; min-height: 60px; font-size: 16px; padding-inline: 14px; }
}

/* ---------- Fjala's re-skin ---------- */
.hdr { width: 100%; } /* ?shot makes the header absolute (kit.css): keep it full width there too */
.hero__img img { object-position: 62% 40%; } /* keep the student with the glasses in view on wide screens */
.hero::before { background: linear-gradient(180deg, rgba(10, 22, 28, .38) 0%, rgba(10, 22, 28, .52) 32%, rgba(10, 22, 28, .82) 62%, rgba(10, 22, 28, .92) 100%); } /* the classroom photo is light: a slightly darker veil keeps the text readable */

/* ---------- timetable + sign-up (Fjala's one extra) ---------- */
.hero__more { margin-top: 14px; }
.hero__more a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-underline-offset: 4px; }
.tt { padding: 52px 0 48px; background: var(--soft); }
.tt__head { max-width: 660px; margin-bottom: 22px; }
.tt__lead { margin-top: 10px; color: var(--muted); text-wrap: pretty; }
.tt__grid { display: grid; gap: 16px; align-items: start; }
.tt__board { container-type: inline-size; } /* the class cards lay out by the board's own width, not the screen's */
.tt__board, .su { min-width: 0; padding: 16px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.tt__filters { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tt__fk { margin-bottom: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt__chips .chip { padding-inline: 13px; font-size: 15px; }
.tt__count { margin: 14px 0 2px; font-weight: 700; }
.tt__day { margin-top: 18px; padding-bottom: 6px; border-bottom: 2px solid var(--brand); font: 700 1.15rem/1.25 var(--font-display); color: var(--brand); }
.tt__list { display: grid; gap: 8px; margin-top: 10px; }
.cls { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "b m" "b t"; align-items: center; gap: 6px 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cls:hover { border-color: var(--brand); }
.cls[aria-pressed="true"] { border-color: var(--brand); background: var(--today); }
.cls__lang { grid-area: b; align-self: start; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 700 14px/1 var(--font-body); letter-spacing: .04em; }
.cls__lang--en { background: var(--brand); color: var(--paper); }
.cls__lang--de { background: var(--accent); color: var(--ink); }
.cls__lang--it { background: var(--line); color: var(--ink); }
.cls__main { grid-area: m; min-width: 0; }
.nw { white-space: nowrap; }
.cls__t { display: block; font-weight: 700; line-height: 1.3; }
.cls__s { display: block; font-size: 14.5px; line-height: 1.35; color: var(--muted); }
.cls__time { grid-area: t; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--brand); }
@container (min-width: 420px) {
  .cls { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "b m t"; }
  .cls__lang { align-self: center; }
  .cls__time { display: block; text-align: right; }
}
.cls__pick { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cls[aria-pressed="true"] .cls__pick { color: var(--brand); }
.tt__empty { margin-top: 16px; color: var(--muted); }
.tt__note { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.su { display: grid; gap: 14px; }
.su__t { font: 700 1.35rem/1.2 var(--font-display); color: var(--brand); }
.su__free { margin-top: -6px; font-weight: 700; }
.su__pick { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--paper); border: 1.5px dashed var(--accent); }
.su__pick[hidden] { display: none; }
.su__pick p { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.4; }
.su__pick b { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.su__x { flex: none; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .2s; }
.su__x:hover { border-color: var(--brand); }
.f { display: grid; gap: 6px; min-width: 0; }
.f > span { font-size: 14px; font-weight: 700; }
.f input, .f select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font: 400 16px/1.2 var(--font-body); color: var(--ink); }
.f select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.f input::placeholder { color: var(--muted); opacity: 1; }
.f input:focus-visible, .f select:focus-visible { outline-offset: 1px; border-color: var(--brand); }
.f small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 480px) { .f2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.su__small { margin-top: -4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.btn--wa { width: 100%; min-height: 52px; font-size: 16px; }
@media (min-width: 380px) { .tt__board, .su { padding: 18px 16px; } }
@media (min-width: 900px) {
  .tt { padding: 72px 0 64px; }
  .tt__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
  .tt__board, .su { padding: 24px; }
  .su { position: sticky; top: calc(var(--hdr) + 16px); }
}

/* ---------- menu ---------- */
.menu { padding: 52px 0 36px; }
.menu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 14px; }
.menu__lead { margin-top: 8px; max-width: 46ch; color: var(--muted); text-wrap: pretty; }
.search { position: relative; display: block; flex: 1 1 260px; max-width: 380px; }
.search svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 48px; padding: 10px 16px 10px 42px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font: 400 16px/1.2 var(--font-body); color: var(--ink); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline-offset: 1px; border-color: var(--brand); }
.chips { position: sticky; top: var(--hdr); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.chips__in { display: flex; gap: 8px; overflow-x: auto; padding: 10px max(16px, (100% - 1120px) / 2); scrollbar-width: none; overscroll-behavior-x: contain; }
.chips__in::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font: 700 15px/1.1 var(--font-body); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.menu__list { padding-top: 22px; }
/* room for the menu until the script draws it, so the photos below stay lazy (not loaded on first view) */
.js .menu:not([data-menu-state]) .menu__list { min-height: 1100px; }
.mg { break-inside: avoid; padding: 6px 0 30px; }
.mg__t { font: 700 1.4rem/1.2 var(--font-display); color: var(--brand); padding-bottom: 10px; border-bottom: 2px solid var(--brand); }
.mi { padding: 13px 0 12px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.mi__top { display: flex; align-items: baseline; gap: 8px; }
.mi__name { font-weight: 800; font-size: 17px; line-height: 1.3; }
.mi__dots { flex: 1 1 auto; min-width: 14px; border-bottom: 2px dotted var(--line); translate: 0 -5px; }
.mi__price { flex: none; color: var(--brand); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi__price small { font-size: 13px; font-weight: 700; color: var(--muted); }
.mi__desc { margin-top: 3px; max-width: 46ch; font-size: 15px; line-height: 1.45; color: var(--muted); }
.mi.is-off .mi__name { color: var(--muted); }
.mi.is-off .mi__price b { text-decoration: line-through; text-decoration-thickness: 2px; }
.mi__off { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 800; }
.menu__empty { padding: 22px 0; color: var(--muted); }
.menu__note { margin-top: 6px; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) {
  .menu__list:not(.is-one), .menu__list.is-one .mg__items { columns: 2; column-gap: 64px; }
  .menu__list.is-one .mg__t { margin-bottom: 4px; }
}

/* ---------- photos ---------- */
.photos { padding: 52px 0; background: var(--soft); }
.photos h2 { margin-bottom: 22px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery__b { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--line); cursor: zoom-in; }
.gallery__b img { width: 100%; height: 100%; object-fit: cover; transition: scale .2s ease-out; }
.gallery__b:hover img { scale: 1.03; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; } .gallery__b { aspect-ratio: 1; } }

/* ---------- hours, address, map ---------- */
.visit { padding: 56px 0 44px; }
.visit__grid { display: grid; gap: 30px; }
.k { margin: 26px 0 8px; font: 800 13px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr.is-today { background: var(--today); }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 800; }
.today { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: var(--paper); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.addr { font-size: 18px; font-weight: 800; }
.visit__note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 800; text-underline-offset: 4px; }
.map { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__btn { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-bg { fill: var(--soft); }
.m-park { fill: var(--park); }
.m-tree { fill: var(--tree); }
.m-road { fill: none; stroke: var(--card); stroke-width: 7; stroke-linecap: round; }
.m-road--big { stroke-width: 13; }
.map__label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: var(--brand); color: var(--paper); font-weight: 800; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); transition: translate .2s; }
.map__label svg { width: 20px; height: 20px; }
.map__btn:hover .map__label { translate: 0 -2px; }
.map__btn:focus-visible { outline: none; } /* .map clips anything outside it, and the map drawing would cover an outline: draw the ring on top */
.map__btn:focus-visible::after { content: ""; position: absolute; inset: 6px; border: 3px solid var(--brand); border-radius: 13px; }
@media (min-width: 900px) {
  .visit__grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: stretch; }
  .map { aspect-ratio: auto; min-height: 480px; }
}

/* ---------- Google review + Instagram ---------- */
.links { padding: 4px 0 56px; }
.links__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 36px; border-top: 1px solid var(--line); }
.links .btn { min-height: 50px; padding-inline: 22px; }

/* ---------- footer (bottom padding keeps the demo ribbon off the credit) ---------- */
.ftr { --vein: var(--brand); padding: 40px 0 92px; background: var(--brand); color: var(--paper); }
.ftr__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.ftr__name { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 28px/1 var(--font-display); }
.ftr__name svg { width: 30px; height: 30px; }
.ftr a { color: inherit; text-underline-offset: 4px; }
.ftr__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; }
.ftr__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- print: the menu on paper, nothing else ---------- */
@media print {
  .hdr, .hero, .tt, .photos, .visit, .links, .chips, .search, .kit-demo { display: none !important; }
  .ftr { background: none; color: #000; padding: 12px 0; }
}