/*
 * PLG brand colours for the Wagtail admin.
 *
 * Wagtail derives every shade (hover, active, light tints) from these
 * hue / saturation / lightness triples, so only the base values are set here.
 * Values match assets/css/main.css on the site:
 *   primary   #06164a  deep navy (the site hero) → sidebar and header surfaces
 *   secondary #0924b0  --plg-primary              → buttons, links, active states
 * Both clear WCAG AA against the white text and backgrounds Wagtail pairs them with.
 */
:root {
  --w-color-primary-hue: 225.9;
  --w-color-primary-saturation: 85%;
  --w-color-primary-lightness: 15.7%;

  --w-color-secondary-hue: 230.3;
  --w-color-secondary-saturation: 90.3%;
  --w-color-secondary-lightness: 36.3%;

  /* Focus ring: --plg-orange darkened until it clears the 3:1 non-text
     contrast minimum on both white (3.9:1) and the navy sidebar (4.4:1). */
  --w-color-focus: #d95a00;
}

/* Sidebar logo: the white "P" mark. Wagtail's slot is 110px (40px when the
   sidebar is collapsed) — built for its bird — so scale the mark within it. */
.plg-admin-mark {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
}

/* Login page: full-colour wordmark above the form. */
.plg-login-logo {
  display: block;
  width: min(260px, 70vw);
  height: auto;
  margin: 2.5rem auto 0;
}

/* Dashboard: "Your website" shortcut cards (home/wagtail_hooks.py → WebsitePanel). */
.plg-website-panel {
  margin-bottom: 2.5rem;
}
.plg-website-panel__heading {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
}
.plg-website-panel__intro {
  margin: 0.25rem 0 1.25rem;
  color: var(--w-color-text-meta);
}
.plg-website-panel__cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.plg-website-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--w-color-border-furniture);
  border-radius: 0.75rem;
  background: var(--w-color-surface-page);
}
.plg-website-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.plg-website-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  background: var(--w-color-secondary-50);
  color: var(--w-color-secondary);
}
.plg-website-card__icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}
.plg-website-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.plg-website-card__address {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--w-color-text-meta);
}
.plg-website-card__description {
  flex: 1;
  margin: 0.75rem 0 1rem;
}
.plg-website-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}