/* ------------------------------------------------------------------
   Geekkirály Szigete – podcast components on top of Zero One (UIkit).
   Everything is scoped under .gks so theme header/footer stay untouched.
   Palette from the logo: island blue + crown yellow.
   Signature: the sawtooth edge lifted from the episode cover art.
------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Space+Mono:wght@700&display=swap");

:root {
  --gks-blue: #2b2591;
  --gks-ink: #17143f;
  --gks-yellow: #ffd400;
  --gks-paper: #ffffff;
  --gks-mist: #e9e7f3;
  --gks-muted: #5f5b86;
  --gks-radius: 12px;
  --gks-display: "Bricolage Grotesque", system-ui, sans-serif;
  --gks-body: "IBM Plex Sans", system-ui, sans-serif;
  --gks-mono: "Space Mono", ui-monospace, monospace;
  --gks-theme: var(--gks-blue);
  --gks-on-theme: #ffffff;
}

/* --- Site-wide typography ---------------------------------------------------
   One font pair everywhere: Bricolage Grotesque for headlines (and menu
   labels), IBM Plex Sans for all paragraph and regular text. Overrides Zero One's compiled "Outfit", which never loaded
   (the Styling → Font URL setting loads a different font), so the theme's
   parts were falling back to Arial. */
html,
#cc-main,
div[data-service],
.uk-text-lead,
.uk-navbar-item,
.uk-navbar-toggle,
.uk-navbar-dropdown-nav .uk-nav-header,
blockquote { font-family: var(--gks-body); }

h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge {
  font-family: var(--gks-display);
  letter-spacing: -0.01em;
}

.gks a:focus-visible {
  outline: 3px solid var(--gks-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Episode code chip -------------------------------------------- */
.gks-code {
  display: inline-block;
  font-family: var(--gks-mono);
  font-weight: 700;
  font-size: 0.72em;
  line-height: 1.35;
  letter-spacing: 0.02em;
  background: var(--gks-yellow);
  color: var(--gks-ink);
  padding: 0.05em 0.4em;
  border-radius: 5px;
  vertical-align: 0.14em;
  white-space: nowrap;
}

.gks-label,
.gks-eyebrow {
  font-family: var(--gks-mono);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* --- Hero ----------------------------------------------------------- */
.gks-hero {
  position: relative;
  background: var(--gks-theme);
  color: var(--gks-on-theme);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 calc(clamp(2.5rem, 6vw, 4.5rem) + 18px);
}
.gks-hero a { color: inherit; }
.gks-hero .gks-eyebrow { opacity: 0.85; margin-bottom: 0.9rem; }
.gks-hero .gks-eyebrow a { text-decoration: none; border-bottom: 2px solid currentColor; }
.gks-hero .gks-eyebrow a:hover { border-bottom-color: transparent; }
.gks-hero__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.gks-hero__title .gks-code { font-size: 0.48em; vertical-align: 0.42em; margin-right: 0.15em; }
.gks-hero__subtitle {
  max-width: 44rem;
  margin-top: 1.1rem;
  font-size: 1.15rem;
  opacity: 0.92;
}
.gks-hero__subtitle p:last-child { margin-bottom: 0; }

.gks-sawtooth {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 18px;
  fill: var(--gks-paper);
  display: block;
}

/* Episode meta under the title */
.gks-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 1.6rem 0 0;
}
.gks-meta > div { min-width: 0; }
.gks-meta dt {
  font-family: var(--gks-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin: 0;
}
.gks-meta dd { margin: 0.15rem 0 0; font-weight: 600; }
.gks-meta dd a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Listen band ------------------------------------------------------ */
.gks-listen { padding: 2.5rem 0 1rem; }
.gks-player {
  width: 100%;
  margin-bottom: 1.25rem;
  border-radius: var(--gks-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gks-mist);
}
.gks-player iframe { display: block; width: 100%; }
.gks-platforms .gks-label { color: var(--gks-muted); margin-bottom: 0.7rem; }
.gks-platforms ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}
.gks-platform {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: var(--gks-brand);
  color: var(--gks-on-brand) !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gks-platform:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(23, 20, 63, 0.18);
}
.gks-platform--rss {
  --gks-brand: transparent;
  --gks-on-brand: var(--gks-ink);
  box-shadow: inset 0 0 0 2px var(--gks-ink);
}

/* Zero One layout content sits between listen band and pager */
.gks-content > .uk-section:first-child { padding-top: 1.5rem; }

/* --- Sections ------------------------------------------------------------ */
.gks-section { padding: 3rem 0; }
.gks-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.gks-section__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.gks-section__head .gks-section__title { margin: 0; }
.gks-section__title a { color: inherit; text-decoration: none; }
.gks-section--series .gks-section__title {
  border-left: 8px solid var(--gks-theme);
  padding-left: 0.75rem;
}
.gks-section + .gks-section--series { padding-top: 0; }

.gks-more { font-weight: 700; }
.gks-block .gks-more { margin-top: 1.25rem; }
.gks-empty { color: var(--gks-muted); }

/* --- Episode tiles ----------------------------------------------------------- */
.gks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}
@media (min-width: 640px) {
  .gks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .gks-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gks-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gks-card { min-width: 0; }
.gks-card__link { color: inherit; text-decoration: none !important; display: block; }
.gks-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--gks-radius);
  overflow: hidden;
  background: var(--gks-blue);
  margin-bottom: 0.85rem;
}
.gks-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
/* signature: a yellow sawtooth lip rises on hover */
.gks-card__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--gks-yellow);
  clip-path: polygon(0 100%, 0 30%, 4% 100%, 8% 30%, 12% 100%, 16% 30%, 20% 100%, 24% 30%, 28% 100%, 32% 30%, 36% 100%, 40% 30%, 44% 100%, 48% 30%, 52% 100%, 56% 30%, 60% 100%, 64% 30%, 68% 100%, 72% 30%, 76% 100%, 80% 30%, 84% 100%, 88% 30%, 92% 100%, 96% 30%, 100% 100%);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}
.gks-card__link:hover .gks-card__media img,
.gks-card__link:focus-visible .gks-card__media img { transform: scale(1.04); }
.gks-card__link:hover .gks-card__media::after,
.gks-card__link:focus-visible .gks-card__media::after { transform: translateY(0); }

.gks-card__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--gks-mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--gks-yellow);
}
.gks-card__title {
  font-family: var(--gks-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0;
}
.gks-card__title .gks-code { margin-right: 0.2em; }
.gks-card__link:hover .gks-card__title span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.gks-card__people {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--gks-muted);
}

/* --- Season / series index ------------------------------------------------------ */
.gks-index {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.gks-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--gks-mist);
  border-left: 10px solid var(--gks-theme);
  border-radius: var(--gks-radius);
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gks-index a:hover { transform: translateX(4px); box-shadow: 0 8px 22px rgba(23, 20, 63, 0.08); }
.gks-index li:not(:has(.gks-code)) a { grid-template-columns: 1fr auto; }
.gks-index__title { font-family: var(--gks-display); font-weight: 800; font-size: 1.35rem; }
.gks-index__meta { color: var(--gks-muted); font-size: 0.92rem; }
@media (max-width: 639px) {
  .gks-index a, .gks-index li:not(:has(.gks-code)) a { grid-template-columns: 1fr; gap: 0.25rem; }
  .gks-index .gks-code { justify-self: start; }
}

/* --- People ----------------------------------------------------------------------- */
.gks-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.gks-people a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--gks-mist);
  border-radius: var(--gks-radius);
  color: inherit;
  text-decoration: none !important;
}
.gks-people a:hover { border-color: var(--gks-blue); }
.gks-people span { color: var(--gks-muted); white-space: nowrap; }

/* --- Pager --------------------------------------------------------------------------- */
.gks-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
}
.gks-pager__link {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--gks-mist);
  border-radius: var(--gks-radius);
  color: inherit;
  text-decoration: none !important;
}
.gks-pager__link:hover { border-color: var(--gks-blue); }
.gks-pager__link .gks-label { color: var(--gks-muted); }
.gks-pager__link strong { font-family: var(--gks-display); font-weight: 700; line-height: 1.3; }
.gks-pager__link--next { text-align: right; }
@media (max-width: 639px) {
  .gks-pager { grid-template-columns: 1fr; }
  .gks-pager__link--next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .gks *, .gks *::after { transition: none !important; }
}

/* --- Featured episode hero (home) ------------------------------------- */
.gks-feature {
  position: relative;
  overflow: hidden;
  background: var(--gks-theme);
  color: var(--gks-on-theme);
  padding: clamp(3rem, 7vw, 5.5rem) 0 calc(clamp(3rem, 7vw, 5.5rem) + 18px);
}
.gks-feature a { color: inherit; }
.gks-feature__ghost {
  position: absolute;
  right: -0.06em;
  bottom: 0.02em;
  font-family: var(--gks-mono);
  font-weight: 700;
  font-size: clamp(7rem, 21vw, 19rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0.13;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.gks-feature__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.gks-feature__kicker {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 5.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.gks-feature .gks-eyebrow { opacity: 0.85; margin-bottom: 0.6rem; }
.gks-feature .gks-eyebrow a { text-decoration: none; border-bottom: 2px solid currentColor; }
.gks-feature__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  line-height: 1.15;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
.gks-feature__title a { text-decoration: none !important; }
.gks-feature__title a:hover { text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: 5px; }
.gks-feature__title .gks-code { font-size: 0.6em; vertical-align: 0.25em; margin-right: 0.2em; }
.gks-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.9rem 0 0;
  opacity: 0.85;
  font-weight: 600;
}
.gks-feature__player { margin: 1.5rem 0 0; box-shadow: none; }
.gks-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0;
}
.gks-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--gks-yellow);
  color: var(--gks-ink) !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gks-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.gks-feature__more { font-weight: 700; text-underline-offset: 4px; }

.gks-feature__art {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--gks-radius);
  overflow: hidden;
  background: var(--gks-yellow);
  box-shadow: 14px 14px 0 var(--gks-yellow);
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}
.gks-feature__art:hover { transform: rotate(0); }
.gks-feature__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gks-feature__art--logo img { object-fit: contain; padding: 8%; }

@media (max-width: 959px) {
  .gks-feature__inner { grid-template-columns: 1fr; }
  .gks-feature__art {
    order: -1;
    width: calc(100% - 10px);
    max-width: 30rem;
    box-shadow: 8px 8px 0 var(--gks-yellow);
    transform: rotate(-1.5deg);
  }
  .gks-feature__art--logo { max-width: 18rem; }
}

/* Play triangle on the hero CTA */
.gks-cta--play::before {
  content: "";
  width: 0;
  height: 0;
  margin-right: 0.6rem;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.65em;
  border-color: transparent transparent transparent currentColor;
}

/* Dark pill variant for light backgrounds */
.gks-cta--ink {
  background: var(--gks-ink);
  color: var(--gks-yellow) !important;
}

/* --- Support "coffee ticket" -------------------------------------------- */
/* A yellow ticket with sawtooth edges (the brand edge) and a perforated stub. */
.gks-ticket {
  --zig: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--gks-yellow);
  color: var(--gks-ink);
  padding: clamp(2rem, 4vw, 3rem) calc(clamp(1.5rem, 4vw, 3.5rem) + var(--zig));
  /* zigzag left and right edges */
  -webkit-mask:
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% calc(2 * var(--zig)) repeat-y,
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% calc(2 * var(--zig)) repeat-y;
          mask:
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% calc(2 * var(--zig)) repeat-y,
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% calc(2 * var(--zig)) repeat-y;
}
.gks-ticket .gks-eyebrow { color: var(--gks-ink); opacity: 0.75; margin-bottom: 0.6rem; }
.gks-ticket__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.gks-ticket__text { max-width: 40rem; margin: 1rem 0 0; font-size: 1.08rem; line-height: 1.55; }
.gks-ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-left: clamp(1.5rem, 4vw, 3rem);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 3px dashed rgba(23, 20, 63, 0.35);
  text-align: center;
}
.gks-ticket__more { color: var(--gks-ink) !important; font-weight: 700; text-underline-offset: 4px; }

/* simple CSS coffee cup with steam */
.gks-ticket__cup {
  position: relative;
  width: 54px;
  height: 40px;
  margin: 18px 14px 0 0;
  background: var(--gks-ink);
  border-radius: 0 0 16px 16px;
}
.gks-ticket__cup::after { /* handle */
  content: "";
  position: absolute;
  right: -14px;
  top: 6px;
  width: 12px;
  height: 16px;
  border: 5px solid var(--gks-ink);
  border-left: 0;
  border-radius: 0 10px 10px 0;
}
.gks-ticket__cup::before { /* steam */
  content: "";
  position: absolute;
  left: 13px;
  top: -20px;
  width: 6px;
  height: 14px;
  border-radius: 6px;
  background: var(--gks-ink);
  opacity: 0.5;
  box-shadow: 12px -3px 0 var(--gks-ink), 24px 0 0 var(--gks-ink);
  animation: gks-steam 2.4s ease-in-out infinite;
}
@keyframes gks-steam {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-4px); opacity: 0.2; }
}

@media (max-width: 767px) {
  .gks-ticket { grid-template-columns: 1fr; }
  .gks-ticket__stub {
    margin: 1.75rem 0 0;
    padding: 1.75rem 0 0;
    border-left: 0;
    border-top: 3px dashed rgba(23, 20, 63, 0.35);
    align-items: flex-start;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gks-ticket__cup::before { animation: none; }
}


/* =====================================================================
   Header, topbar and mobile menu (Zero One markup, restyled here so the
   theme files stay untouched)
   ===================================================================== */

/* --- Topbar: brand strip on desktop, hidden on phones (it was an empty grey bar) */
#topbar {
  background: var(--gks-blue) !important;
  color: #fff;
  font-size: 0.85rem;
}
#topbar > .uk-container { padding-top: 7px !important; padding-bottom: 7px !important; }
#topbar a { color: var(--gks-yellow) !important; }
#topbar .tm-topbar-left a { font-weight: 700; text-underline-offset: 3px; }
#topbar .tm-topbar-left a:hover { text-decoration: underline; }
#topbar .uk-icon-link { color: rgba(255, 255, 255, 0.75) !important; }
#topbar .uk-icon-link:hover { color: var(--gks-yellow) !important; }
@media (max-width: 959px) { #topbar { display: none; } }

/* --- Navbar ------------------------------------------------------------- */
/* Zero One's compiled styles force a 100px bar; slim it, and slimmer when sticky */
#navbar .uk-navbar,
#navbar .uk-navbar-nav > li > a,
#navbar .uk-navbar-item,
#navbar .uk-navbar-toggle { min-height: 88px; transition: min-height 0.2s ease; }
#navbar .uk-navbar-sticky .uk-navbar,
#navbar .uk-navbar-sticky .uk-navbar-nav > li > a,
#navbar .uk-navbar-sticky .uk-navbar-item,
#navbar .uk-navbar-sticky .uk-navbar-toggle { min-height: 64px; }
/* logo fills the bar edge to edge, like a badge (bigger = readable wordmark) */
#navbar .uk-navbar-left { align-self: stretch; }
#navbar .uk-logo { padding: 0; min-height: 0; align-self: stretch; display: flex; }
#navbar .uk-logo img { height: 88px !important; width: auto; display: block; transition: height 0.2s ease; }
#navbar .uk-navbar-sticky .uk-logo img { height: 64px !important; }

#navbar .uk-navbar-nav > li > a {
  font-family: var(--gks-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0;
  color: var(--gks-ink);
  padding: 0 14px;
}
#navbar .uk-navbar-nav > li > a:hover { color: var(--gks-blue); }
#navbar .uk-navbar-nav > li.uk-active > a { color: var(--gks-ink); }
/* underline: thick yellow bar sitting just under the label */
#navbar .uk-navbar-nav > li > a::before,
#navbar .uk-navbar-nav > li.uk-active > a::before {
  height: 4px;
  bottom: calc(50% - 1.05em);
  left: 14px;
  background-color: var(--gks-yellow);
  border-radius: 2px;
}
#navbar .uk-navbar-nav > li.uk-active > a::before { right: 14px; }

/* support button: the coffee-ticket yellow */
#navbar .uk-navbar-right .uk-button-primary {
  background: var(--gks-yellow);
  color: var(--gks-ink);
  border-radius: 999px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
#navbar .uk-navbar-right .uk-button-primary:hover { background: var(--gks-ink); color: var(--gks-yellow); }

/* --- Mobile toggle: bigger target with a label ---------------------------------- */
#navbar .uk-navbar-toggle {
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 4px 0 12px;
  color: var(--gks-ink);
}
#navbar .uk-navbar-toggle::before {
  content: "Menü";
  font-family: var(--gks-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 959px) {
  #navbar .uk-navbar,
  #navbar .uk-navbar-item,
  #navbar .uk-navbar-toggle { min-height: 68px; }
  #navbar .uk-logo img { height: 52px !important; }
  #navbar .uk-navbar-sticky .uk-navbar,
  #navbar .uk-navbar-sticky .uk-navbar-item,
  #navbar .uk-navbar-sticky .uk-navbar-toggle { min-height: 60px; }
  #navbar .uk-navbar-sticky .uk-logo img { height: 44px !important; }
}

/* --- Mobile menu (offcanvas) ----------------------------------------------------- */
#offcanvas .uk-offcanvas-bar {
  background: var(--gks-blue);
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
}
#offcanvas .uk-offcanvas-close { top: 18px; right: 18px; padding: 8px; color: #fff; }
#offcanvas .uk-offcanvas-close svg { width: 18px; height: 18px; }
#offcanvas .uk-logo img { height: 56px !important; width: auto; }
#offcanvas .uk-margin-medium-bottom { margin-bottom: 28px !important; }
#offcanvas .uk-margin-auto-vertical { margin-top: 0 !important; margin-bottom: auto !important; }

#offcanvas #mobile-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
#offcanvas #mobile-menu > li.uk-active > a { color: var(--gks-yellow); }
#offcanvas #mobile-menu .gks-code { font-size: 0.85rem; vertical-align: 0; }

/* last item is Zero One's "right nav" button = Támogasd munkánkat */
#offcanvas #mobile-menu > li:last-child > a {
  margin-top: 1.5rem;
  justify-content: center;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--gks-yellow);
  color: var(--gks-ink);
  font-family: var(--gks-body);
  font-size: 1.1rem;
  font-weight: 700;
}
#offcanvas #mobile-menu > li:last-child > a::before {
  content: "";
  width: 18px;
  height: 13px;
  margin-right: 4px;
  background: var(--gks-ink);
  border-radius: 0 0 6px 6px;
  box-shadow: 5px -1px 0 -2px var(--gks-yellow), 6px -1px 0 0 var(--gks-ink);
}

#offcanvas .uk-margin-large-top { margin-top: 2rem !important; }
#offcanvas .uk-margin-large-top a { color: rgba(255, 255, 255, 0.85); }
#offcanvas .uk-margin-large-top a:hover { color: var(--gks-yellow); }
#offcanvas .uk-text-muted { color: rgba(255, 255, 255, 0.6) !important; }

/* Between 960 and 1199px the centred menu collides with the support button:
   use the mobile menu there too. */
@media (max-width: 1199px) {
  #navbar .uk-navbar-center.uk-visible\@m,
  #navbar .uk-navbar-right .uk-navbar-item.uk-visible\@m { display: none !important; }
  #navbar .uk-navbar-toggle.uk-hidden\@m { display: flex !important; }
}

/* --- Page banner ----------------------------------------------------------- */
.gks-banner {
  position: relative;
  overflow: hidden;
  background: var(--gks-theme);
  color: var(--gks-on-theme);
  padding: clamp(3rem, 7vw, 5.5rem) 0 calc(clamp(3rem, 7vw, 5.5rem) + 18px);
}
.gks-banner a { color: inherit; }
.gks-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.gks-banner--noart .gks-banner__inner { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.gks-banner .gks-eyebrow { opacity: 0.85; margin-bottom: 0.9rem; }
.gks-banner__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.gks-banner__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 38rem; margin-top: 1.4rem; opacity: 0.95; }
.gks-banner__lead p:last-child { margin-bottom: 0; }
.gks-banner__art { display: flex; justify-content: center; }
.gks-banner__logo { width: min(100%, 18rem); transform: rotate(3deg); box-shadow: 12px 12px 0 var(--gks-yellow); }

/* big CSS coffee cup on a yellow saucer-circle */
.gks-bigcup {
  position: relative;
  display: block;
  width: 9rem;
  height: 7rem;
  margin: 4rem 3rem 2rem 0;
  background: var(--gks-yellow);
  border-radius: 0 0 3rem 3rem;
  box-shadow: 0 2.2rem 0 -1.6rem var(--gks-yellow), 0 2.3rem 0 -1.4rem rgba(0, 0, 0, 0.18);
  transform: rotate(-6deg);
}
.gks-bigcup::after { /* handle */
  content: "";
  position: absolute;
  right: -2.3rem;
  top: 1.1rem;
  width: 2rem;
  height: 2.6rem;
  border: 0.7rem solid var(--gks-yellow);
  border-left: 0;
  border-radius: 0 2rem 2rem 0;
}
.gks-bigcup::before { /* coffee surface */
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 0.5rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--gks-ink);
  opacity: 0.85;
}
.gks-bigcup__steam {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  width: 0.7rem;
  height: 2.6rem;
  border-radius: 1rem;
  background: currentColor;
  opacity: 0.35;
  animation: gks-steam 2.6s ease-in-out infinite;
}
.gks-bigcup__steam:nth-child(1) { left: 2rem; }
.gks-bigcup__steam:nth-child(2) { left: 4.1rem; height: 3.3rem; animation-delay: 0.4s; }
.gks-bigcup__steam:nth-child(3) { left: 6.2rem; animation-delay: 0.8s; }

@media (max-width: 959px) {
  .gks-banner__inner { grid-template-columns: 1fr; }
  /* decorative only: on stacked layouts keep the call to action above the fold */
  .gks-banner__art { display: none; }
}

/* --- Card sections ------------------------------------------------------------ */
.gks-cards { padding: clamp(3rem, 6vw, 5rem) 0; }
.gks-cards--blue { background: var(--gks-blue); color: #fff; }
.gks-cards__head { max-width: 46rem; margin-bottom: 2.25rem; }
.gks-cards .gks-eyebrow { color: var(--gks-muted); margin-bottom: 0.6rem; }
.gks-cards--blue .gks-eyebrow { color: var(--gks-yellow); }
.gks-cards__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
.gks-cards__intro { font-size: 1.1rem; line-height: 1.6; margin-top: 1rem; }
.gks-cards__intro p:last-child { margin-bottom: 0; }
.gks-cards__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gks-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gks-cards__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gks-cards__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gks-card-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--gks-radius);
  background: #fff;
  border: 1px solid var(--gks-mist);
  border-top: 6px solid var(--gks-yellow);
}
.gks-cards--blue .gks-card-box { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); border-top-color: var(--gks-yellow); color: #fff; }
.gks-card-box .gks-code { font-size: 0.72rem; letter-spacing: 0.08em; }
.gks-card-box__title {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}
.gks-card-box__text { line-height: 1.55; }
.gks-card-box__text p:last-child { margin-bottom: 0; }
.gks-card-box__link { margin-top: auto; padding-top: 0.4rem; font-weight: 700; color: var(--gks-blue) !important; text-underline-offset: 4px; }
.gks-cards--blue .gks-card-box__link { color: var(--gks-yellow) !important; }

/* --- FAQ ---------------------------------------------------------------------- */
.gks-faq { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.gks-faq .gks-eyebrow { color: var(--gks-muted); margin-bottom: 0.6rem; }
.gks-faq__list { margin-top: 1.75rem; border-top: 2px solid var(--gks-ink); }
.gks-faq__item { border-bottom: 2px solid var(--gks-ink); }
.gks-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--gks-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gks-ink);
}
.gks-faq__item summary::-webkit-details-marker { display: none; }
.gks-faq__item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gks-yellow);
  font-family: var(--gks-mono);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.gks-faq__item[open] summary::after { transform: rotate(45deg); }
.gks-faq__item summary:focus-visible { outline: 3px solid var(--gks-yellow); outline-offset: 4px; }
.gks-faq__answer { padding: 0 3rem 1.3rem 0; line-height: 1.6; }
.gks-faq__answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .gks-bigcup__steam { animation: none; }
}

/* =====================================================================
   Home intros: host + podcast. Opt-in per layout row in the Panel:
   row settings → Advanced → Layout custom class = gks-host / gks-about
   ===================================================================== */
.gks-host,
.gks-about {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6.5rem) !important;
}
.gks-host > .uk-container,
.gks-about > .uk-container { margin-bottom: 0 !important; position: relative; }
.gks-host .tm-shape-divider-wrap,
.gks-about .tm-shape-divider-wrap { display: none; }

/* sawtooth edges: white teeth from the section above, next colour below */
.gks-host::before,
.gks-host::after,
.gks-about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 24V12L25 24 50 12 75 24 100 12 125 24 150 12 175 24 200 12 225 24 250 12 275 24 300 12 325 24 350 12 375 24 400 12 425 24 450 12 475 24 500 12 525 24 550 12 575 24 600 12 625 24 650 12 675 24 700 12 725 24 750 12 775 24 800 12 825 24 850 12 875 24 900 12 925 24 950 12 975 24 1000 12 1025 24 1050 12 1075 24 1100 12 1125 24 1150 12 1175 24 1200 12V24Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.gks-host::before { top: -1px; transform: scaleY(-1); }
.gks-host::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffec1a' d='M0 24V12L25 24 50 12 75 24 100 12 125 24 150 12 175 24 200 12 225 24 250 12 275 24 300 12 325 24 350 12 375 24 400 12 425 24 450 12 475 24 500 12 525 24 550 12 575 24 600 12 625 24 650 12 675 24 700 12 725 24 750 12 775 24 800 12 825 24 850 12 875 24 900 12 925 24 950 12 975 24 1000 12 1025 24 1050 12 1075 24 1100 12 1125 24 1150 12 1175 24 1200 12V24Z'/%3E%3C/svg%3E");
}
.gks-about::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath fill='%230e071d' d='M0 24V12L25 24 50 12 75 24 100 12 125 24 150 12 175 24 200 12 225 24 250 12 275 24 300 12 325 24 350 12 375 24 400 12 425 24 450 12 475 24 500 12 525 24 550 12 575 24 600 12 625 24 650 12 675 24 700 12 725 24 750 12 775 24 800 12 825 24 850 12 875 24 900 12 925 24 950 12 975 24 1000 12 1025 24 1050 12 1075 24 1100 12 1125 24 1150 12 1175 24 1200 12V24Z'/%3E%3C/svg%3E");
}

/* shared typography */
.gks-host h2,
.gks-about h2 {
  font-family: var(--gks-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.gks-host .tm-content-margin p,
.gks-about .tm-content-margin p {
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 36rem;
}
.gks-host figure,
.gks-about figure { margin: 0 auto; }
.gks-host img,
.gks-about img {
  display: block;
  border-radius: var(--gks-radius);
  transition: transform 0.3s ease;
}
.gks-about figcaption { display: none; }

/* host: brand blue, photo first with the yellow "sticker" offset */
.gks-host { background: var(--gks-blue) !important; color: #fff; }
.gks-host h2 { color: #fff; }
.gks-host h2::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 6px;
  margin-bottom: 1.1rem;
  border-radius: 3px;
  background: var(--gks-yellow);
}
.gks-host .tm-content-margin p { color: rgba(255, 255, 255, 0.88); }
.gks-host .tm-content-margin p:first-child {
  font-family: var(--gks-body);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--gks-yellow);
}
.gks-host .tm-content-margin em { color: #fff; }
.gks-host img {
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
  box-shadow: 14px 14px 0 var(--gks-yellow);
  transform: rotate(-2deg);
}
.gks-host img:hover,
.gks-about img:hover { transform: rotate(0); }

/* podcast intro: crown yellow, ink text, photo right with a blue offset */
.gks-about { background: #ffec1a !important; color: var(--gks-ink); }
.gks-about > .uk-position-cover { display: none; }
.gks-about h2 { color: var(--gks-ink); }
.gks-about .tm-content-margin p { color: var(--gks-ink); }
.gks-about .tm-content-margin p > strong:first-child {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--gks-body);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.35;
}
.gks-about .tm-content-margin p > strong:first-child + br { display: none; }
.gks-about img {
  max-width: 24rem;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: -14px 14px 0 var(--gks-blue);
  transform: rotate(2deg);
}

@media (min-width: 640px) {
  .gks-host .uk-grid > div:last-child { order: -1; }          /* photo left */
  .gks-about .uk-grid > .uk-flex-first\@s { order: 1; }        /* photo right */
}
@media (max-width: 639px) {
  .gks-host img, .gks-about img { max-width: 80%; }
  .gks-host .uk-grid > div:last-child,
  .gks-about .uk-grid > div:not(.uk-flex-first\@s) { margin-top: 2.5rem; }
}

/* Coffee ticket on episode pages, above the footer */
.gks-section--support { padding-top: 1rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }