/**
 * @file
 * Components, plus the handful of grid and utility classes the templates
 * inherited from Bootstrap. Bootstrap itself is no longer loaded: its
 * JavaScript needs jQuery below 4.0.0 and Drupal 11 ships jQuery 4, and only
 * these classes were ever used.
 */

/* Grid and utilities the templates depend on --------------------------- */

.row {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-md-6 { min-width: 0; }
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.clearfix::after { content: ''; display: table; clear: both; }

/* Buttons -------------------------------------------------------------- */

.button,
button,
input[type='submit'],
input[type='button'],
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.button:hover,
button:hover,
input[type='submit']:hover,
.form-submit:hover {
  color: var(--on-dark);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}

.button:disabled,
button:disabled,
input[type='submit']:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button--secondary,
.button--ghost {
  background: var(--surface);
  color: var(--accent-ink);
  border-color: var(--line-2);
  box-shadow: none;
}

/* Forms ---------------------------------------------------------------- */

.form-item { margin-bottom: var(--s-4); }

label {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='time'],
select,
textarea {
  width: 100%;
  max-width: 28rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  outline: none;
}

.description,
.form-item .description {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s-1);
}

/* Cards ---------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.card-header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-weight: 600;
}

.card-body { padding: var(--s-5); }

/* Tables --------------------------------------------------------------- */

.table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.table th,
table th {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.table td,
table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.thead-dark th { color: var(--ink-2); }

/* Wide tables scroll inside their own box rather than the page. */
.table-scroll,
.view-content > .table,
#athan-times {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Status rows on the monitor: colour is backed up by the text in the cell. */
.bg-success { background: var(--ok-soft); }
.bg-success .player_status { color: var(--ok); font-weight: 600; }
.bg-danger { background: var(--danger-soft); }
.bg-danger .player_status { color: var(--danger); font-weight: 600; }

/* Athan offsets table -------------------------------------------------- */

#athan-times {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s-2);
}

#athan-times input[name$='_diff'] {
  width: 5rem;
  max-width: none;
  padding: var(--s-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Prayer times read as data, so align and space them like data. */
#athan-times td[id$='-time'] {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent-ink);
}

/* Views ---------------------------------------------------------------- */

.view-filters {
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.view-empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}

.view-content > .item-list > ul,
.view-content > ul {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  padding: 0;
  list-style: none;
}

.view-content > .item-list > ul > li,
.view-content > ul > li {
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.view-content > .item-list > ul > li:hover,
.view-content > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.view-content img { border-radius: var(--r-sm); }

/* Slideshow ------------------------------------------------------------ */

.views-slideshow-cycle-main-frame,
.views-slideshow-cycle-main-frame-row {
  width: 100% !important;
}

/*
 * The front slideshow's own chrome lives in pages.css, which crops it to a
 * cloud. A border radius or a drop shadow set here would be clipped by that
 * mask and show as a torn edge, so this rule only covers the image.
 */

.view-homepage-slider img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

/* Messages and tabs ---------------------------------------------------- */

/*
 * Type is signalled three ways - the tint, the glyph, and the visually-hidden
 * heading core renders - so it never rests on colour alone. The glyph is
 * decorative: that heading already announces "Error message" and the rest.
 *
 * Two columns: the ::before badge, then .messages__content from
 * templates/misc/status-messages.html.twig. The heading is visually-hidden,
 * which positions it absolutely, so it is not a grid item and takes no cell.
 */
.messages {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
}

/* --accent is a fill and border colour only: white on it is 3.5:1. The badge
   carries a glyph, so it uses --accent-ink (5.9:1) like other text does. */
.messages::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-ink);
  color: var(--on-dark);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1;
}

.messages--status {
  border-inline-start-color: var(--ok);
  background: var(--ok-soft);
}

.messages--status::before {
  content: '\2713';
  background: var(--ok);
}

.messages--warning {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
}

.messages--warning::before {
  content: '!';
  background: var(--warn);
}

.messages--error {
  border-inline-start-color: var(--danger);
  background: var(--danger-soft);
}

.messages--error::before {
  content: '\2715';
  background: var(--danger);
}

/* The message is often a sentence and a link - "Forgot your password?" after a
   failed login - and the link has to stay legible on the tinted ground. */
.messages__content {
  align-self: center;
}

.messages__content > :first-child { margin-top: 0; }
.messages__content > :last-child { margin-bottom: 0; }

.messages__list {
  margin: 0;
  padding-inline-start: var(--s-5);
}

.messages__list li + li { margin-top: var(--s-2); }

.messages a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Each of these clears 4.5:1 on its own tint: 4.7, 4.9 and 6.4 to one. */
.messages--status a { color: var(--ok); }
.messages--warning a { color: var(--warn); }
.messages--error a { color: var(--danger); }

ul.tabs,
.tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

ul.tabs li { margin: 0; }

ul.tabs a {
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

ul.tabs a.is-active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}

/* Login block ---------------------------------------------------------- */

/*
 * The Drupal 7 theme positioned each label absolutely on top of its input and
 * faded it out on typing, which is why js/login-labels.js existed. That
 * pattern removes the field's visible name the moment someone starts typing,
 * and leaves nothing behind for a screen reader to announce on refocus. Real
 * labels sit above the inputs now, with placeholders for the hint text.
 */

.imd-login-block,
#user-login-form {
  max-width: 26rem;
}

.imd-login-block {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.imd-login-block h2 {
  margin-bottom: var(--s-5);
  font-size: var(--t-xl);
}

#user-login-form .form-item,
.imd-login-block .form-item {
  margin-bottom: var(--s-4);
}

#user-login-form input[type='text'],
#user-login-form input[type='password'],
.imd-login-block input[type='text'],
.imd-login-block input[type='password'] {
  max-width: none;
}

#user-login-form .form-actions,
.imd-login-block .form-actions {
  margin-top: var(--s-5);
}

#user-login-form input[type='submit'],
.imd-login-block input[type='submit'] {
  width: 100%;
}

/* "Reset your password" and friends, rendered as an item list. */
.imd-login-block .item-list ul,
#user-login-form + .item-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}

.imd-login-block .item-list li { margin: 0; }

.imd-login-block .item-list a {
  font-size: var(--t-sm);
  font-weight: 500;
}

/* Checkboxes and radios ------------------------------------------------ */

/*
 * Text inputs above are styled by type, which deliberately excludes checkbox
 * and radio. Those need the control beside its label, not stacked under it.
 */
.form-type-checkbox,
.form-type-radio,
.js-form-type-checkbox,
.js-form-type-radio {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.form-type-checkbox label,
.form-type-radio label,
.js-form-type-checkbox label,
.js-form-type-radio label {
  margin: 0;
  font-weight: 400;
  color: var(--ink);
}

input[type='checkbox'],
input[type='radio'] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent-ink);
  flex: none;
}

/* Contact form --------------------------------------------------------- */

.contact-form,
.contact-message-form {
  max-width: 42rem;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/*
 * A grid, so every row starts and ends on the same edges.
 *
 * Name and email used to be inline-block at calc(50% - var(--s-2)) with a
 * var(--s-3) margin between them. Those do not add up: 50% - 0.5rem twice
 * plus 0.75rem leaves 100% - 0.25rem, and inline-block also renders the
 * whitespace between the two divs in the markup, which pushed the pair past
 * the full width and dropped email onto its own line.
 *
 * Column gap only. Vertical rhythm stays with .form-item's margin-bottom, so
 * the two do not stack into a double gap. Subject and message are fields, so
 * their wrapper is .field--name-*, not .form-item - the span rule below
 * covers them without having to name either.
 */
.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--s-4);
}

.contact-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 48rem) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .contact-form .form-item-name {
    grid-column: 1;
  }

  .contact-form .form-item-mail {
    grid-column: 2;
  }
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form select,
.contact-form textarea {
  max-width: none;
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}

/* The name and email rows render as plain markup for a logged-in user, so
   they need to read as values rather than as unstyled leftovers. */
.contact-form .form-type-item {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

.contact-form .form-actions,
.contact-message-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* Preview is secondary to Send. */
.contact-form .form-actions input[value='Preview'],
.contact-form .form-actions #edit-preview {
  background: var(--surface);
  color: var(--accent-ink);
  border-color: var(--line-2);
  box-shadow: none;
}

/* Playlist ------------------------------------------------------------- */

/*
 * One player above a list of tracks, built by js/playlist.js from the view's
 * per-track <audio> elements. Everything here needs a .playlist ancestor, so
 * the no-JavaScript fallback keeps the plain per-track players unstyled by it.
 *
 * howler.js ships no interface, so the transport is ours: a play/pause toggle,
 * elapsed and total time either side of a range input that doubles as the seek
 * bar.
 */
.playlist__now {
  margin: 0 0 var(--s-3);
  font-weight: 600;
}

.playlist__transport {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.playlist__play {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-dark);
  cursor: pointer;
}

/* A triangle for play, two bars for pause, drawn rather than fetched. The
   button carries an aria-label that changes with it, so this is decoration. */
.playlist__play::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.7rem;
  border-color: transparent transparent transparent currentColor;
  transform: translateX(0.1rem);
}

/* Two bars from one box, so the pause state needs no second element. */
.playlist__play.is-playing::before {
  width: 0.7rem;
  height: 0.85rem;
  border: 0;
  transform: none;
  background: currentColor;
  clip-path: polygon(
    0 0,
    35% 0,
    35% 100%,
    0 100%,
    0 0,
    65% 0,
    100% 0,
    100% 100%,
    65% 100%,
    65% 0
  );
}

.playlist__progress {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent-ink);
  cursor: pointer;
}

.playlist__progress:disabled {
  cursor: default;
  opacity: 0.5;
}

.playlist__time {
  flex-shrink: 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.playlist__tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.playlist__tracks li + li {
  border-top: 1px solid var(--line);
}

.playlist__track {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.playlist__track:hover {
  background: var(--bg-2);
}

/* The playing track is marked with aria-current for screen readers; weight and
   colour are the visual half of the same signal, never the only one. */
.playlist__track.is-playing {
  background: var(--bg-2);
  color: var(--accent-ink);
  font-weight: 600;
}