/*
 * irlo.org's look for the web build's own screens: the start screen, About this
 * file, the top bar and the sign-in and account pages. The colors, type and
 * button shapes are the public site's (its --color-* tokens); the layouts are
 * this app's. The editors are not styled here.
 *
 * One file for both kinds of page: the React start screen links it, and the
 * plain-HTML pages under /auth link it too. The gate lets exactly these files
 * through before sign-in (lib/web-auth/supabase.ts, SITE_STYLE_PATHS).
 *
 * The fonts are Google Fonts' latin subsets (which include every Spanish
 * letter), served from here. Licence: OFL-1.1, texts beside them.
 */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('raleway-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('lato-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('lato-700-latin.woff2') format('woff2');
}

.irlo-site, .irlo-wtb {
  --site-deep: #14161c;
  --site-charcoal: #1c2333;
  --site-mid: #2a3347;
  --site-cream: #f5f0eb;
  --site-cream-soft: #f5f0ebc7;
  --site-rule: #f5f0eb1f;
  --site-blue: #036fee;
  --site-blue-dark: #0258c4;
  --site-blue-light: #04a4ee;
  --site-bad: #ff8a80;
  --site-heading: 'Raleway', 'Segoe UI', system-ui, sans-serif;
  --site-body: 'Lato', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

/* The start screen fills the window below the bar, as the site's sections do. */
.irlo-site {
  min-height: 100%;
  box-sizing: border-box;
  background-color: var(--site-charcoal);
  background-image: radial-gradient(var(--site-rule) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--site-cream-soft);
  font-family: var(--site-body);
  font-size: 15px;
  line-height: 1.6;
}
.irlo-site main { padding-top: 48px; padding-bottom: 64px; }

.irlo-site h1, .irlo-site h2, .irlo-site h3 {
  font-family: var(--site-heading);
  color: var(--site-cream);
  letter-spacing: 0.01em;
}
.irlo-site h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
}
/* Section labels: the site's small, spaced, light-blue capitals. */
.irlo-site h2, .irlo-site h3 {
  font-family: var(--site-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--site-blue-light);
}
.irlo-site .site-title {
  font-family: var(--site-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--site-cream);
  text-transform: none;
  letter-spacing: 0;
}

.irlo-site .ink-quiet { color: var(--site-cream-soft); opacity: 0.8; }
.irlo-site a, .irlo-site .site-link {
  color: var(--site-blue-light);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.irlo-site a:hover, .irlo-site .site-link:hover { color: var(--site-cream); }

/* Panels: the site's raised cards with a blue top edge. */
.irlo-site .site-card {
  background: var(--site-mid);
  border: 0;
  border-top: 2px solid var(--site-blue);
  border-radius: 11px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
  padding: 20px 22px;
}
/* A card that is a button (each way to edit a file). */
.irlo-site button.site-card {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-top-color: var(--site-mid);
  transition: border-color 120ms, transform 120ms;
}
.irlo-site button.site-card:hover:not(:disabled) { border-top-color: var(--site-blue-light); transform: translateY(-1px); }

.irlo-site .site-btn {
  display: inline-block;
  background: var(--site-blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  font-family: var(--site-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.irlo-site .site-btn:hover:not(:disabled) { background: var(--site-blue-dark); }
.irlo-site .site-btn-quiet {
  background: transparent;
  color: var(--site-cream);
  border: 1px solid var(--site-rule);
  border-radius: 6px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.irlo-site .site-btn-quiet:hover:not(:disabled) { border-color: var(--site-blue-light); color: var(--site-blue-light); }

.irlo-site button:disabled { opacity: 0.55; cursor: default; }
.irlo-site :focus-visible { outline: 2px solid var(--site-blue-light); outline-offset: 2px; }
.irlo-site .site-rows > * + * { border-top: 1px solid var(--site-rule); }

/* The top bar draws its own colors (WebTopBar.tsx); this gives it the type. */
.irlo-wtb .irlo-wtb-mark { font-family: var(--site-heading); font-weight: 800; letter-spacing: 0.01em; }