/* Yolicali theme overrides for opengist —
   Yolicali class rules copied verbatim from site/assets/yolicali.css
   so they match by class match, not selector tug-of-war. */

@font-face { font-family: "Equity A"; src: url("https://yolicali.mx/fonts/equity_a_regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "Equity A"; src: url("https://yolicali.mx/fonts/equity_a_italic.woff2") format("woff2"); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: "Equity A"; src: url("https://yolicali.mx/fonts/equity_a_bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "Equity A Caps"; src: url("https://yolicali.mx/fonts/equity_a_caps_regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }

:root {
  --color-bg:         #f4efe4;
  --color-bg-card:    #fbf8f1;
  --color-text:       #302a24;
  --color-text-light: #5a5a5a;
  --color-accent:     #a03520;
  --color-gold:       #b8860b;
  --color-rule:       #d4cfc7;
  --font-body:        "Equity A", Georgia, "Times New Roman", serif;
  --font-caps:        "Equity A Caps", Georgia, serif;
  --measure:          38em;
}

html, body, #app {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Tailwind class overrides — !important here only because we are
   beating opengist's baked Tailwind, never on Yolicali class rules. */
nav.bg-gray-50 { background-color: transparent !important; }
.bg-white, .bg-gray-100 { background-color: var(--color-bg-card) !important; }
.bg-gray-200 { background-color: #ebe5d8 !important; }
.text-black, .text-gray-700, .text-gray-800, .text-gray-900,
.text-slate-700, .text-slate-800, .text-slate-900 { color: var(--color-text) !important; }
.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600,
.text-slate-300, .text-slate-400, .text-slate-500, .text-slate-600 { color: var(--color-text-light) !important; }
.bg-primary-500, .bg-primary-600, .bg-primary-700 { background-color: var(--color-accent) !important; color: #fff !important; }
.bg-primary-500:hover, .bg-primary-600:hover, .bg-primary-700:hover, .hover\:bg-primary-500:hover { background-color: var(--color-gold) !important; }
.text-primary-500, .text-primary-600, .text-primary-700 { color: var(--color-accent) !important; }
.border-primary-500, .focus\:border-primary-500:focus, .focus\:ring-primary-500:focus { border-color: var(--color-accent) !important; }
a { color: var(--color-accent) !important; }
a:hover { color: var(--color-gold) !important; }
.border, .border-gray-200, .border-gray-300, .border-gray-600 { border-color: var(--color-rule) !important; }

nav a img[src*="/assets/logo"] { display: none !important; }

.cm-editor, .cm-content, .cm-gutters, .codejar, pre.editor, div[contenteditable="true"] {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text) !important;
}
.cm-gutters { background-color: #ebe5d8 !important; border-right: 1px solid var(--color-rule) !important; }

pre, code, .font-mono {
  background-color: var(--color-bg-card);
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

.inline-flex.py-8 { display: none !important; }

/* ─── Yolicali class rules — copied verbatim from site/assets/yolicali.css ─ */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4.25rem 1.5rem 2rem;
}

h1 {
  font-family: var(--font-caps);
  font-weight: normal;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-text);
}
h1:has(+ .subtitle) {
  margin-bottom: 0.6rem;
}

.logo {
  text-align: center;
  width: 100%;
  margin-bottom: 3rem;
}
.logo img {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: auto;
  border-radius: 17.54%;
  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
}

.subtitle {
  text-align: center;
  font-style: italic;
  font-size: 1.125rem !important;
  color: var(--color-text-light);
  margin-bottom: 3rem;
}

.rule {
  border: none;
  text-align: center;
  margin: 3rem auto;
  font-size: 2.2rem;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  height: auto;
  display: block;
}
.rule::before {
  content: "\2767";
}

footer {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 0 1.5rem 4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
}
footer p { margin-bottom: 0.5rem; }
.footer-nav ul { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.footer-nav li { display: inline; }
.footer-nav li + li::before { content: " · "; }
.footer-meta {
  margin-top: 2rem;
  font-family: var(--font-caps);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  opacity: 0.55;
  text-transform: uppercase;
}