/*
 * Shared foundation for the public site and the admin: fonts, design tokens,
 * reset, typography, buttons and forms. Plain CSS (no build step, no nesting) so
 * it works on older phones; page-specific styles live in site.css / admin.css.
 */

/* The club's fonts (docs/design.md → Fonts), self-hosted (the CSP allows fonts from
   'self' only) in Google Fonts' latin / latin-ext subsets: pt-BR text needs only
   latin, so the -ext files download only for rarer characters.
   - Fraunces, the page titles (h1) — SIL Open Font License 1.1. Variable: weight
     100–900, optical size 9–144.
   - Bricolage Grotesque, everything else (text, subtitles, labels, numbers,
     buttons) — SIL Open Font License 1.1. Variable: weight 200–800, optical size
     12–96. No italic: the browser slants it where something is italic.
   Both pick their optical size from the font size by themselves.
   - Homemade Apple, handwriting for small details only — Apache License 2.0. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fraunces-latin-ext-53ea12c1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fraunces-latin-397b623a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/bricolage-grotesque-latin-ext-f02b0791.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/bricolage-grotesque-latin-b86257e5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* "block": a moment of blank beats flashing a fallback script font. */
@font-face {
  font-family: "Homemade Apple";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/homemade-apple-latin-dc50334c.woff2") format("woff2");
}

:root {
  /* The club's palette (docs/design.md). */
  --brown: #633d28;        /* main background */
  --pink: #ee7fa8;         /* tag / accent background */
  --mint: #47dfbf;         /* tag / accent background */
  --lime: #c6f635;         /* highlights: tape, bullets, the "inscreva-se!" marker */
  --cafe: #2e1c13;         /* text on light surfaces */
  --cream: #f5f1e7;        /* text on brown */
  --paper: #ece4d8;        /* paper cards (date card, "como funciona") */

  /* Derived tones, picked for WCAG AA contrast on their surface (see docs/design.md). */
  --brown-deep: #52311f;   /* footer / admin header */
  --rose-ink: #8e3d5d;     /* small labels on paper (5.6:1) */
  --cream-muted: #d8c8b4;  /* secondary text on brown (5.8:1) */
  --cafe-muted: #6b5444;   /* secondary text on paper (5.6:1) */
  --danger: #a1271c;       /* errors on paper (5.9:1) */
  --polaroid: #f6f2ea;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* page titles (h1) */
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-hand: "Homemade Apple", "Segoe Print", "Bradley Hand", cursive;

  /* Paper grain: an inline SVG noise layer over the paper color. */
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow-paper: 0 14px 28px -16px rgba(18, 9, 3, 0.7);
  --gutter: 20px;
  --max-width: 1040px;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
  background-color: var(--brown);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-underline-offset: 0.18em; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  /* Even lines instead of a lonely last word ("Cerâmica fria com vela em / pó"). */
  text-wrap: balance;
}

/* Page titles in Fraunces; subtitles (h2, h3) stay in the text font. */
h1 { font-family: var(--font-display); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Homemade Apple, for small handwritten details only (docs/design.md). It has a
   single weight: never let the browser fake a bold or an italic. */
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
  text-transform: none;
}

/* A phrase of a "·"-separated line (helper `phrases`): wraps as a whole. */
.phrase { display: inline-block; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Small letterspaced caps — the "INSCRIÇÕES ABERTAS · VAGAS LIMITADAS" voice. */
.eyebrow {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint);
}

/* A sheet of paper: the date card, the "como funciona" card, forms. */
.paper {
  color: var(--cafe);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  box-shadow: var(--shadow-paper);
}

.paper-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-ink);
}

/* The lime highlighter-marker button ("inscreva-se!"). */
.highlight-button {
  position: relative;
  display: inline-block;
  padding: 12px 22px 13px;
  border: 0;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cafe);
  text-decoration: none;
  background: var(--lime);
  transform: rotate(-1.5deg);
  clip-path: polygon(0% 8%, 3% 0%, 22% 5%, 41% 0%, 63% 4%, 84% 0%, 100% 6%, 98% 52%, 100% 94%, 79% 100%, 57% 95%, 36% 100%, 14% 96%, 2% 100%, 0% 55%);
  text-wrap: balance;
  cursor: pointer;
  transition: transform 120ms ease;
}
.highlight-button:hover { transform: rotate(-1.5deg) scale(1.03); }
.highlight-button:active { transform: rotate(-1.5deg) scale(0.98); }
.highlight-button[disabled], .highlight-button.is-disabled {
  color: var(--cafe-muted);
  background: #d9d3c7;
  cursor: not-allowed;
  transform: rotate(-1.5deg);
}
/* Sending (submit_once_controller.js): still the marker, a bit faded — not the grey
   of "vagas esgotadas", which reads as broken. */
.highlight-button[aria-busy="true"] { color: var(--cafe); background: var(--lime); opacity: 0.7; cursor: progress; }
.highlight-button--small { font-size: 1.05rem; padding: 9px 16px 10px; }

/* Plain button (secondary actions). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: inherit;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.button:hover { background: rgba(255, 255, 255, 0.08); }

/* Forms on paper. */
.field { margin: 0 0 18px; }
/* Descendant (not child) selector: Rails wraps an invalid field's label in
   <div class="field_with_errors">. */
.field label:not(.choice):not(.checkbox), .field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cafe);
}
.field-hint { margin: 6px 0 0; font-size: 0.85rem; color: var(--cafe-muted); }

.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="number"], .field input[type="url"],
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"],
.field select, .field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 2px solid rgba(46, 28, 19, 0.35);
  border-radius: 6px;
  font: inherit;
  /* 16px+ keeps iOS from zooming into the field on focus. */
  font-size: 1rem;
  color: var(--cafe);
  background: #fffdf8;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232e1c13' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cafe);
  box-shadow: 0 0 0 3px rgba(198, 246, 53, 0.9);
}

/* File inputs: the native "Escolher arquivo" button wears the site's font and a
   plain-button look instead of the system's. */
.field input[type="file"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--cafe-muted);
}
.field input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 9px 16px;
  border: 2px solid var(--cafe);
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  color: var(--cafe);
  background: #fffdf8;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: #fff; }

.field_with_errors { display: contents; }
/* Two classes + element, declared later: beats the `.field input[type=…]` border. */
.field .field_with_errors input, .field .field_with_errors select, .field .field_with_errors textarea { border-color: var(--danger); }
.field-error { margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--danger); }

.error-summary {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 4px solid var(--danger);
  border-radius: 4px;
  font-size: 0.95rem;
  color: var(--danger);
  background: #fbeae6;
}
.error-summary ul { margin: 6px 0 0; padding-left: 20px; }
/* Focused on load for screen readers (not something to click): no focus ring. */
.error-summary:focus { outline: none; }

/* Choice cards (radio buttons) — e.g. "1 taça / 2 taças". */
.choices { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.choices legend { padding: 0; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Label left, price right; a label too long to share the line takes it whole and
   the price drops below, still on the right. */
.choice > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding: 14px 16px;
  border: 2px solid rgba(46, 28, 19, 0.35);
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cafe);
  background: #fffdf8;
  cursor: pointer;
}
.choice > span strong { margin-left: auto; font-weight: 700; white-space: nowrap; }
.choice input:checked + span { border-color: var(--cafe); background: var(--lime); }
.choice input:focus-visible + span { outline: 3px solid var(--cafe); outline-offset: 2px; }

.checkbox { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.checkbox input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cafe); flex: none; }

/* Flash messages. */
.flash {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 600;
  color: var(--cafe);
  background: var(--lime);
}
.flash--alert { color: #fff; background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}