/* ================================================
   LEARNFRISIAN WEBSITE - MOBILE UX v8
   Applied to all visitors (On website field)
   ================================================ */

/* ================================================
   ISSUE 4: MOBILE HEADER TOO LARGE (≤767px)
   ================================================ */
@media (max-width: 767px) {
  /* Reduce container padding inside main header */
  .site-main-header-wrap .site-header-row-container-inner > .site-container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Reduce logo max-width on mobile */
  .site-branding a.brand img,
  .site-branding a.brand img.svg-logo-image {
    max-width: 50px !important;
    width: 50px !important;
  }

  /* Reduce min-height of main header inner */
  .site-main-header-inner-wrap {
    min-height: 50px !important;
  }

  /* Reduce nav item padding on mobile */
  .primary-navigation .menu-item > a,
  .site-header-item .header-navigation .header-menu-container > ul > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Reduce mobile toggle button size */
  .menu-toggle-open,
  .drawer-toggle {
    padding: 4px 8px !important;
    font-size: 20px !important;
  }
}

/* ================================================
   ISSUE 5: EXCESSIVE WHITESPACE / GTM PARAGRAPH
   ================================================ */
/* Hide GTM inline script paragraphs that render as whitespace */
.entry-content > p:empty,
.entry-content > p > script:only-child,
.wpapp-post-content > p:empty,
.wpapp-post-content > p > script:only-child,
.post-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce excessive section margins on mobile */
@media (max-width: 767px) {
  .entry-content .wp-block-kadence-rowlayout,
  .entry-content .wp-block-group {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .entry-content .wp-block-heading {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
}

/* ================================================
   ISSUE 5: LEADERBOARD TABLE MOBILE FIX v2
   ================================================ */
@media (max-width: 600px) {
  /* Wrapper: fill mobile viewport */
  .lf-leaderboard-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 2px !important;
    margin: 10px auto !important;
    overflow-x: hidden !important;
  }

  /* Table: fixed layout for predictable columns */
  .lf-leaderboard-table {
    table-layout: fixed !important;
    width: 100% !important;
    border-spacing: 0 3px !important;
  }

  /* Column 1 (#): narrow for medal/number */
  .lf-leaderboard-table thead th:nth-child(1),
  .lf-leaderboard-table tbody td:nth-child(1) {
    width: 30px !important;
    padding: 5px 2px !important;
    text-align: center !important;
  }

  /* Column 2 (Rank emblem): narrow for star */
  .lf-leaderboard-table thead th:nth-child(2),
  .lf-leaderboard-table tbody td:nth-child(2) {
    width: 34px !important;
    padding: 5px 2px !important;
    text-align: center !important;
  }

  /* Column 3 (Player): flexible, takes remaining space */
  .lf-leaderboard-table thead th:nth-child(3),
  .lf-leaderboard-table tbody td:nth-child(3) {
    padding: 5px 4px !important;
    overflow: hidden !important;
  }

  /* Column 4 (Points): fixed width for numbers */
  .lf-leaderboard-table thead th:nth-child(4),
  .lf-leaderboard-table tbody td:nth-child(4) {
    width: 75px !important;
    padding: 5px 6px 5px 2px !important;
    text-align: right !important;
  }

  /* Header text */
  .lf-leaderboard-table thead th {
    font-size: 0.55rem !important;
    padding: 5px 3px !important;
    letter-spacing: 0.05em !important;
  }

  /* All body cells: base styles */
  .lf-lb-row td {
    padding: 5px 3px !important;
    font-size: 0.75rem !important;
    vertical-align: middle !important;
  }

  /* Points: white color, no wrapping */
  .lf-leaderboard-table tbody tr td:last-child,
  .lf-lb-row td:last-child {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Rank number / medal emoji */
  .lf-lb-rank-num {
    font-size: 0.85rem !important;
  }

  /* Rank emblem SVG: smaller star */
  .lf-lb-emblem .lf-rank-emblem svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Player name: truncate if too long */
  .lf-lb-name {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Rank label under name */
  .lf-lb-rank-label {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Toggle buttons */
  .lf-lb-toggle {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .lf-lb-btn {
    padding: 8px 14px !important;
    font-size: 0.75rem !important;
  }

  /* Reduce row border-left width */
  .lf-lb-row td:first-child {
    border-left-width: 2px !important;
  }
}

/* ================================================
   LANGUAGE SWITCHER: Show all languages (incl. English)
   Fix: TranslatePress dropdown hides current language.
   Make inner wrapper flex-row so current + list both show.
   ================================================ */

/* Inner wrapper: show current language AND list side by side */
.trp-floating-switcher .trp-language-switcher-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Current language (English): always visible, styled like a list item */
.trp-floating-switcher .trp-language-item__current {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  order: 1 !important;
}

/* Dropdown list: always visible, flex column, not hidden */
.trp-floating-switcher .trp-switcher-dropdown-list {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  order: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-left: 1px solid rgba(0,0,0,0.1) !important;
}

/* Each item in the dropdown list */
.trp-floating-switcher .trp-switcher-dropdown-list .trp-language-item {
  display: flex !important;
  padding: 8px 12px !important;
}

/* ---- END language switcher fix ---- */