/**
 * Gaeilge Gach Lá – today's practice panel, rendered by
 * [bitesize_gaeilge_gach_la].
 *
 * Two parts: a hero row (the Bitesize Sound Player alongside today's activity
 * and link), and beneath it the seven-day strip that lays out the whole
 * framework. Everything is scoped to .bsi-ggl- so the file is safe to load
 * site-wide.
 *
 * Brand tokens match the live-sessions module: orange #f04e24, earth brown
 * #5D4037.
 */

:root {
  --bsi-ggl-orange: #f04e24;
  --bsi-ggl-brown: #5D4037;
  --bsi-ggl-cream: #FAF7F0;
}

/* =====================================================================
 * Hero row — today
 * ================================================================== */

/* Wrapping rather than a viewport breakpoint: the panel has to survive being
   dropped into a narrow column on a wide screen, not just a narrow screen. The
   body's flex-basis is what decides when the two stack. */
.bsi-ggl-today__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* Hold the player to its natural width so the text takes the slack, and stop
   a long activity title from squeezing it. */
.bsi-ggl-today__audio {
  flex: 0 0 auto;
}

.bsi-ggl-today__body {
  flex: 1 1 14rem;
  min-width: 0;
}

/* An eyebrow label, not content — set small and uppercase so it reads as a
   caption for the title beneath rather than as another line of Irish. */
.bsi-ggl-today__eyebrow {
  margin: 0 0 0.3em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bsi-ggl-brown);
  opacity: 0.7;
}

.bsi-ggl-today__title {
  margin: 0 0 0.25em;
  line-height: 1.2;
}

.bsi-ggl-today__title a {
  color: var(--bsi-ggl-brown);
  text-decoration: none;
}

.bsi-ggl-today__title a:hover,
.bsi-ggl-today__title a:focus {
  color: var(--bsi-ggl-orange);
  text-decoration: underline;
}

.bsi-ggl-today__more {
  margin: 0;
  font-size: 0.9375rem;
}

.bsi-ggl-today__more a {
  color: var(--bsi-ggl-orange);
}

.bsi-ggl-today__more a:hover,
.bsi-ggl-today__more a:focus {
  text-decoration: underline;
}

/* =====================================================================
 * The seven-day strip
 *
 * Equal-width columns across the panel: it fills the row that today's few
 * words left empty, and does it with the thing a drop-in member actually
 * needs — the whole week, visible at once.
 * ================================================================== */

/* Grid, not flex: with seven items a wrapped flex row stretches whatever lands
   alone on the last line into a full-width slab. Grid keeps every day the same
   width no matter how many rows it takes. auto-fit collapses the empty tracks
   so the seven share the full width on one line when there's room. */
/* Sized in px, not rem, on purpose. The strip is a compact UI component, and
   rem ties both the track minimum AND the type inside it to whatever root
   font-size the theme happens to set — on Astra that made 7rem ≈ 147px, so
   only six days fitted a laptop-width column and the seventh wrapped. Fixed
   metrics mean the row holds seven wherever there's honestly room for seven. */
.bsi-ggl-week {
  display: grid;
  /* 105px is measured, not guessed: "Machnamh" is the widest label at 87px
     (15px bold), plus 8px padding and 1px border either side. Below this it
     breaks mid-word; above it, seven days stop fitting a laptop-width column.
     Seven across holds from roughly 780px up. */
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
}

/* Inside the panel the strip is a footer to today, so it gets a divider. On
   its own — as page navigation — it isn't dividing anything. */
.bsi-ggl-today .bsi-ggl-week {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(93, 64, 55, 0.15);
}

/* A white bar of its own, so it reads as one object no matter what colour the
   page or surrounding blocks sit on. */
.bsi-ggl-week--standalone {
  margin: 1.5rem 0 2.5rem;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
}

.bsi-ggl-week__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  /* Safety net: Déardaoin and Machnamh are long enough to spill a narrow
     column, and spilling looks worse than wrapping. */
  overflow-wrap: break-word;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bsi-ggl-week__day:hover,
.bsi-ggl-week__day:focus {
  background-color: rgba(93, 64, 55, 0.06);
  text-decoration: none;
}

.bsi-ggl-week__short {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bsi-ggl-brown);
  opacity: 0.6;
}

.bsi-ggl-week__irish {
  font-size: 15px;
  font-weight: 700;
  color: var(--bsi-ggl-brown);
}

.bsi-ggl-week__english {
  font-size: 13px;
  color: var(--bsi-ggl-brown);
  opacity: 0.7;
}

/* Today. Marked with colour AND weight, not colour alone, so it still reads
   as "you are here" without relying on hue. */
.bsi-ggl-week__day.is-today {
  background-color: var(--bsi-ggl-orange);
  border-color: var(--bsi-ggl-orange);
}

.bsi-ggl-week__day.is-today .bsi-ggl-week__short,
.bsi-ggl-week__day.is-today .bsi-ggl-week__irish,
.bsi-ggl-week__day.is-today .bsi-ggl-week__english {
  color: var(--bsi-ggl-cream);
  opacity: 1;
}

.bsi-ggl-week__day.is-today .bsi-ggl-week__english {
  opacity: 0.85;
}

.bsi-ggl-week__day.is-today:hover,
.bsi-ggl-week__day.is-today:focus {
  background-color: #d94420;
  border-color: #d94420;
}

/* =====================================================================
 * Anchor landings
 *
 * The strip's whole job is jumping to a day's section, and the theme header
 * is sticky — without this the heading you jumped to sits underneath it.
 * Scoped to these seven IDs, which only exist on the Gaeilge Gach Lá page.
 * ================================================================== */

#de-luain,
#de-mairt,
#de-ceadaoin,
#deardaoin,
#de-haoine,
#de-sathairn,
#de-domhnaigh {
  scroll-margin-top: 7rem;
}

/* =====================================================================
 * Narrow screens
 * ================================================================== */

.bsi-ggl-today a:focus-visible {
  outline: 2px solid var(--bsi-ggl-orange);
  outline-offset: 2px;
}

/* The hero row stacks by itself via flex-wrap; this only tightens the strip
   and lets the player use the full width once it's on its own line. */
@media (max-width: 600px) {
  .bsi-ggl-today__main {
    gap: 0.75rem;
  }

  .bsi-ggl-today__audio {
    width: 100%;
  }

  .bsi-ggl-week {
    /* Same measurement at the smaller type: "Machnamh" at 14px is 81px, plus
       4px padding and 1px border either side. */
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px;
  }

  /* Divider spacing belongs to the in-panel strip only, same as at full size. */
  .bsi-ggl-today .bsi-ggl-week {
    margin-top: 1.25rem;
    padding-top: 1rem;
  }

  .bsi-ggl-week__day {
    padding: 8px 4px;
  }

  .bsi-ggl-week__irish {
    font-size: 14px;
  }

  .bsi-ggl-week__english {
    font-size: 12px;
  }
}