/* ============================================
   style.css — Base styles & CSS variables
   iRO · Israel Hinojosa Baliño
   ============================================ */

/* ── CSS Custom Properties (Design tokens) ── */
:root {
  /* Brand colours */
  --color-purple-primary:   #3629cb;
  --color-purple-dark:      #4C01A0;
  --color-purple-light:     #a8a0f8;
  --color-red-accent:       #ff0000;
  --color-orange-link:      rgb(255, 81, 0);

  /* Accent palette (cards, pills, tags) */
  --accent-purple-bg:       #EEEDFE;
  --accent-purple-border:   #AFA9EC;
  --accent-purple-text:     #3C3489;
  --accent-teal-bg:         #E1F5EE;
  --accent-teal-border:     #5DCAA5;
  --accent-teal-text:       #085041;
  --accent-amber-bg:        #FAEEDA;
  --accent-amber-border:    #EF9F27;
  --accent-amber-text:      #633806;
  --accent-blue-bg:         #E6F1FB;
  --accent-blue-border:     #85B7EB;
  --accent-blue-text:       #0C447C;
  --accent-coral-bg:        #FAECE7;
  --accent-coral-border:    #F0997B;
  --accent-coral-text:      #712B13;
  --accent-green-bg:        #E8F5E9;
  --accent-green-border:    #A5D6A7;
  --accent-green-text:      #1B5E20;

  /* Dark mode accent overrides (applied via body.dark-theme) */
  --dark-purple-bg:         rgba(168,160,248,0.12);
  --dark-purple-border:     rgba(168,160,248,0.35);
  --dark-purple-text:       #c8c2ff;
  --dark-teal-bg:           rgba(29,158,117,0.12);
  --dark-teal-border:       rgba(29,158,117,0.35);
  --dark-teal-text:         #9fe1cb;
  --dark-amber-bg:          rgba(239,159,39,0.12);
  --dark-amber-border:      rgba(239,159,39,0.35);
  --dark-amber-text:        #fac775;
  --dark-blue-bg:           rgba(55,138,221,0.12);
  --dark-blue-border:       rgba(55,138,221,0.35);
  --dark-blue-text:         #85b7eb;
  --dark-coral-bg:          rgba(216,90,48,0.12);
  --dark-coral-border:      rgba(216,90,48,0.35);
  --dark-coral-text:        #f0997b;

  /* Typography */
  --font-sans:   "Lato", sans-serif;
  --font-serif:  "Lora", serif;
  --font-title:  "Zen Dots", sans-serif;

  /* Spacing */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;

  /* Z-index layers */
  --z-nav:       100;
  --z-content:   1;
  --z-overlay:   2;
}

/* ── Reset ── */
* {
  margin: 0;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

/* ── Body & themes ── */
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body.light-theme {
  background: radial-gradient(at center bottom, rgb(171, 192, 192), rgb(223, 209, 240));
  color: #1a1a2e;
}

body.dark-theme {
  background: radial-gradient(at center bottom, rgba(1,1,1,1.0), rgb(33,3,66));
  color: #f0f0f0;
}

/* ── Header ── */
header {
  background: url('../images/headerthinB.png') no-repeat top center;
  height: 100px;
}

header h1 {
  margin-left: 40px;
  margin-top: 18px;
}

.hatched-text {
  display: inline-block;
  color: var(--color-red-accent);
  padding: 2px 4px;
}

.subtitle-text {
  display: inline-block;
  color: white;
  padding: 2px 4px;
  font-weight: 600;
}

/* ── Main container ── */
.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: row wrap;
}

/* ── Quote banner ── */
.main {
  background-color: var(--color-purple-primary);
  padding: 10px;
}

.main.top {
  z-index: var(--z-content);
  width: 100%;
}

.main.content {
  border-radius: var(--radius-md);
  color: rgb(0,0,0);
  background-color: rgb(197, 213, 215);
  width: 50%;
  margin: 10px;
  align-self: flex-start;
  padding: 5px;
  order: 0;
  flex-grow: 10;
  flex-shrink: 1;
}

body.dark-theme .main.content {
  background-color: transparent;
  color: #f0f0f0;
}

blockquote {
  font-style: normal;
  margin-left: 32px;
  font-family: "Segoe Print", "Times New Roman", Verdana;
  padding-left: 48px;
  background: url('../images/Quotation-Mark.png') no-repeat left center;
  background-size: 50px;
  min-height: 30px;
  color: #f0f0f0;
}

blockquote footer {
  margin-top: 6px;
  font-style: italic;
  opacity: 0.8;
}

/* ── Side image ── */
.sidetop {
  background-color: rgb(191,192,182);
  color: white;
  margin: 10px;
  border-radius: var(--radius-md);
  padding: 5px;
  order: 1;
  align-self: flex-start;
  flex-grow: 0;
  flex-shrink: 100;
}

img.sidetop {
  border-radius: var(--radius-md);
  width: 10.5em;
  padding: 5px;
}

/* ── Bottom tag bar ── */
.bottom {
  color: rgb(25,21,21);
  background-color: rgb(197,213,231);
  border-radius: var(--radius-md);
  margin: 10px;
  padding: 10px;
  order: 3;
  align-self: flex-end;
  flex-grow: 10;
  flex-shrink: 10;
}

.dynamicc {
  display: flex;
  border: 3px solid black;
  height: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  flex-flow: row wrap;
}

.boxd {
  color: rgb(0,0,0);
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-flow: column wrap;
  padding: 8px 12px;
}

.boxd1 { background-color: rgb(160,142,179); flex-grow: 10; flex-shrink: 1; }
.boxd2 { background-color: rgb(186,161,128); flex-grow: 10; flex-shrink: 1; }
.boxd3 { background-color: rgb(180,143,117); flex-grow: 10; flex-shrink: 1; }

/* ── Footer ── */
.foot {
  text-align: center;
  background-color: rgb(229,205,252);
  padding: 1rem;
  border-radius: var(--radius-md);
}

/* ── Typography globals ── */
h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 5dvb;
}

h2 {
  font-family: var(--font-serif);
  font-size: x-large;
  margin: 10px;
}

h3 {
  font-family: var(--font-serif);
  font-size: large;
}

p {
  font-family: var(--font-sans);
  font-size: large;
}

a {
  font-family: var(--font-sans);
  color: var(--color-orange-link);
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
}

a:hover {
  color: rgb(255,98,0);
}

/* ── Mapbox map container ── */
#map {
  width: 100%;
  height: 500px;
  border-radius: 5%;
  color: var(--color-red-accent);
}

/* ── Theme toggle (checkbox) ── */
.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox-label {
  background-color: #111;
  width: 48px;
  height: 24px;
  border-radius: 30px;
  position: relative;
  padding: 2px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fa-moon { color: #f1c40f; }
.fa-sun  { color: #f39c12; }

.checkbox-label .ball {
  background-color: hsla(283,100%,12%,0.85);
  width: 23px;
  height: 23px;
  position: absolute;
  left: 0;
  top: -3.5px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}

/* ── Lang selector ── */
.nav-lang-selector {
  display: flex;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.1);
}

body.dark-theme .nav-lang-selector {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.nav-lang-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.4;
  transition: all 0.2s ease;
}

body.light-theme .nav-lang-btn { color: #111; }

.nav-lang-btn.active {
  opacity: 1;
  background: rgba(255,255,255,0.25);
}

body.dark-theme .nav-lang-btn.active {
  background: #ffcc00;
  color: #140129;
}

/* ── Utility: old card style (kept for compatibility) ── */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 15%;
  padding: 1%;
  background-color: rgb(239,228,251);
  margin: 1%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

span {
  position: relative;
  padding-top: 4px;
  margin-top: 4px;
}