*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--page-background-gradient);
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-family-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  color: var(--vn-heading);
  margin-top: 0;
  margin-bottom: var(--space-3);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

/* The display serif stops at h2. Below that a heading is labelling a block
   inside a page rather than announcing the page, and Recoleta at 24px reads as
   another title competing with the one above it. h3 and h4 are the body face
   instead, bold and a step or two up from body copy — the same relationship a
   bolded lead-in has to the paragraph under it. */
h3, h4 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
}
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-top: 0; }

header {
  position: relative;
  padding: var(--space-3) var(--space-6);
  border-bottom: var(--page-marginal-border);
  background: var(--nieve);

  nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);

    #home-link {
      display: inline-flex;
      margin-right: auto;

      img {
        display: block;
        max-width: 5rem;
        height: auto;
      }
    }

    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: var(--space-4);
      align-items: center;
    }

    BUTTON.nav-toggle {
      display: none;
      padding: var(--space-2);
      background: transparent;
      border: none;
      cursor: pointer;
      line-height: 0;

      &:hover {
        background: var(--color-surface-muted);
      }

      .nav-toggle-close {
        display: none;
      }
    }
  }
}

@media (max-width: 48rem) {
  header {
    nav {
      flex-wrap: wrap;

      #home-link img {
        max-width: 3rem;
      }

      ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: var(--space-4) var(--space-6);
        background: var(--color-background);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        z-index: 10;
      }

      BUTTON.nav-toggle {
        display: inline-flex;
      }
    }

    &:has(nav[data-open="true"]) nav ul {
      display: flex;
    }

    &:has(nav[data-open="true"]) .nav-toggle {
      .nav-toggle-open { display: none; }
      .nav-toggle-close { display: inline; }
    }
  }
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-6);
}

/* Two-column layout for pages that include a secondary nav.
   Expected child structure: <h1>, <nav.secondary-nav>, <div.content>. */
main:has(nav.secondary-nav) {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: var(--space-4) var(--space-6);
  align-items: start;
  align-content: start;
}

main:has(nav.secondary-nav) > h1 {
  grid-column: 1 / -1;
  margin: 0;
}

main:has(nav.secondary-nav) > nav.secondary-nav {
  grid-column: 1;
}

main:has(nav.secondary-nav) > .content {
  grid-column: 2;
}

/* Flash messages live above the yield in the layout — span them full width. */
main:has(nav.secondary-nav) > [role="status"],
main:has(nav.secondary-nav) > [role="alert"] {
  grid-column: 1 / -1;
}

/* The callout surface, group headings and primary action for this nav live in
   list-blocks.css. The list and link rules stay here because this file loads
   after it — see the load-order note at the top of list-blocks.css. */
nav.secondary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

nav.secondary-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-link);
}

/* Hover lifts the link off the mist-coloured callout, so it fills with white
   rather than more mist. */
nav.secondary-nav a:hover {
  background: var(--nieve);
  color: var(--vn-heading);
}

nav.secondary-nav a.selected {
  background: var(--nav-button-selected-background-color);
  color: var(--nav-button-selected-color);
  font-weight: var(--fw-bold);
}

@media (max-width: 48rem) {
  main:has(nav.secondary-nav) {
    grid-template-columns: 1fr;
  }

  main:has(nav.secondary-nav) > h1,
  main:has(nav.secondary-nav) > nav.secondary-nav,
  main:has(nav.secondary-nav) > .content,
  main:has(nav.secondary-nav) > [role="status"],
  main:has(nav.secondary-nav) > [role="alert"] {
    grid-column: auto;
  }

  /* Full-width rows inside the callout card, not shrink-wrapped pills. */
  nav.secondary-nav a {
    width: auto;
  }
}

footer {
  flex: 0 0 auto;
  padding: var(--space-6);
  border-top: var(--footer-top-border);
  background: var(--footer-background);
  text-align: center;
  color: var(--chocolate);
  font-size: var(--font-size-small);
}

a {
  color: var(--color-link);
  transition: color 0.15s linear;
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

label {
  display: block;
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-1);
  color: var(--vn-heading);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  max-width: var(--input-max-width);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--nieve);
  font: inherit;
  color: var(--color-text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
  border-color: var(--pajaro-azul);
}

[role="status"] {
  padding: var(--space-3) var(--space-4);
  background: var(--color-status-background);
  border: 1px solid var(--color-status-border);
  border-radius: var(--radius-md);
  color: var(--color-status-text);
}

[role="alert"] {
  padding: var(--space-3) var(--space-4);
  background: var(--color-alert-background);
  border: 1px solid var(--color-alert-border);
  border-radius: var(--radius-md);
  color: var(--color-alert-text);
}

/* Two sections offering alternative ways to do one thing — the password reset
   page's "mail them a link" and "set one directly". Sections carry no margins
   of their own, so without this the second option crowds the first and the two
   read as one continuous instruction. Scoped to the class rather than applied
   to every stacked SECTION, which would reach pages that haven't asked for it. */
section.alternative + section.alternative {
  margin-top: var(--space-8);
}

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
}

dt {
  font-weight: 600;
}

.site-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.site-links img {
  display: block;
  width: 2rem;
  height: 2rem;
}

.site-link-fields {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.site-link-fields p:last-child {
  margin-bottom: 0;
}

/* What a deleted link leaves behind. Same mark as .card.ghost in the card
   lists — brisa dashed over a niebla wash, the house sign for "nothing here" —
   carrying the sentence the flash would have shown on a full reload. It keeps
   the row's box so the list does not jump, and stays until the next load. */
.site-link-fields.ghost {
  border-style: dashed;
  border-width: 2px;
  border-color: var(--brisa);
  background: color-mix(in srgb, var(--niebla) 40%, var(--nieve));
}

.site-link-fields.ghost .ghost-message {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.current-logo img {
  display: block;
  max-width: 100%;
  margin-bottom: var(--space-2);
}

/* An uploaded logo can be any aspect ratio, so cap its height rather than its
   width the way the built-in square brand mark is capped. */
#home-link img.site-logo {
  max-width: 14rem;
  max-height: 3rem;
  width: auto;
}

@media (max-width: 48rem) {
  #home-link img.site-logo {
    max-width: 9rem;
    max-height: 2.25rem;
  }
}

/* ==========================================================================
   Pagination — Kaminari's default markup, given the list-block treatment.

     <nav class="pagination">
       <span class="first|prev|page|gap|next|last">…</span>
     </nav>

   This belongs to the same family as .card-list, but it lives here rather
   than in list-blocks.css because that file is generated from the "List
   Building Blocks" design project and a re-sync would drop anything added to
   it. If pagination is ever added there, move this block across.
   ========================================================================== */

nav.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--fs-small);
}

/* Every item is the same box, so the row keeps an even rhythm whether it
   holds a digit, a gap ellipsis or "Next ›". */
nav.pagination span {
  display: block;
}

nav.pagination a,
nav.pagination .current,
nav.pagination .gap {
  display: block;
  min-width: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
}

nav.pagination a {
  background: var(--nieve);
  box-shadow: var(--shadow-card);
  color: var(--color-link);
}

nav.pagination a:hover {
  background: var(--color-link);
  color: var(--nieve);
}

/* The page you're on is a label, not a target — filled in, and not a link. */
nav.pagination .current {
  background: var(--color-link);
  color: var(--nieve);
  font-weight: var(--fw-bold);
}

nav.pagination .gap {
  color: var(--color-text-muted);
  box-shadow: none;
}


/* ==========================================================================
   Profile dot — a user's avatar, or their initial, in a circle.
   Add .with-tooltip where the dot stands alone without a visible name.
   ========================================================================== */

.profile-dot {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--profile-dot-border-color);
  border-radius: var(--radius-full);
  background: var(--profile-dot-background-color);
  color: var(--profile-dot-color);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  cursor: default;
  /* No overflow: hidden — it would clip the tooltip. The image is rounded
     on its own instead. */
}

.profile-dot img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.profile-dot.small {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 2px;
  font-size: var(--fs-meta);
}

.profile-dot.large {
  width: 4rem;
  height: 4rem;
  font-size: var(--fs-h4);
}

/* The initial is set against the 96px circle it sits in, not against the
   4rem dot's step — at --fs-h4 in a page heading it reads as a typo. */
.profile-dot.extralarge {
  width: 6rem;
  height: 6rem;
  font-size: var(--fs-h2);
}

/* Tooltip: the bubble and its arrow. Shown on hover, and on focus so the dot
   is usable by keyboard when it sits inside a link or button. */
.profile-dot.with-tooltip[data-name]:hover::after,
.profile-dot.with-tooltip[data-name]:focus-visible::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 10px);
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--profile-dot-tooltip-background-color);
  color: var(--profile-dot-tooltip-text-color);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.profile-dot.with-tooltip[data-name]:hover::before,
.profile-dot.with-tooltip[data-name]:focus-visible::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 7px);
  z-index: 1;
  display: block;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 2px;
  background-color: var(--profile-dot-tooltip-background-color);
  rotate: 45deg;
}