/*
 Theme Name:   Aikaa riittää – Child Theme
 Theme URI:    https://aikaariittaa.fi
 Description:  Aikaa riittää -kirjasivuston child theme Divi-rakentajalle.
               Sisältää kaikki brändivariat, typografian ja komponentit.
 Author:       Kasvuopisto Kidea
 Author URI:   https://kidea.fi
 Template:     Divi
 Version:      1.0.0
 Text Domain:  aikaariittaa
*/

/* ============================================================
   AIKAA RIITTÄÄ – BRÄNDITOKENEET
   Pohjantähti #ab8c46 · Otava #336f70 · Laivasto #172B35
   Yötaivas #2C3E50 · Revontulet #754868
   Fontit: Playfair Display (otsikot) · Open Sans (teksti)
============================================================ */
:root {
  --ar-gold:     #ab8c46;   /* Pohjantähti – pääkorosteväri */
  --ar-gold-l:   #c5a455;   /* Pohjantähti vaalea */
  --ar-teal:     #336f70;   /* Otava – aksenttiväri */
  --ar-teal-l:   #88B8B9;   /* Otava vaalea – teksti tummalla pohjalla */
  --ar-teal-d:   #1f4748;   /* Otava tumma */
  --ar-navy:     #172B35;   /* Laivasto – sivuston pääväri */
  --ar-mid:      #2C3E50;   /* Yötaivas – sekundääritausta */
  --ar-violet:   #754868;   /* Revontulet – kontrastiväri */
  --ar-white:    #ffffff;
  --ar-ow:       #e8e8e4;   /* Off-white tekstille */
  --ar-muted:    #8fa3a8;   /* Himmennetty teksti */
  --ar-brd:      rgba(171,140,70,.15);
  --ar-brd-t:    rgba(136,184,185,.20);
}

/* ============================================================
   PERUSASETUS – sivuston taustaväri ja fontti
============================================================ */
body.et-db #page-container,
body {
  background-color: var(--ar-navy) !important;
  color: var(--ar-ow);
  font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   DIVI-POHJAMUUTOKSET
============================================================ */

/* Poistetaan Divin oletusvalkoinen tausta */
.et_pb_section,
#main-content,
.et-db #page-container {
  background: transparent;
}

/* Divi-rivileveys brändimääritysten mukaan */
.et_pb_row {
  max-width: 1100px !important;
}

/* ============================================================
   TYPOGRAFIA
============================================================ */
h1, h2, h3, h4,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4,
.ar-heading {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--ar-white);
}

p, li, td, label, input, textarea,
.et_pb_text p,
.ar-body {
  font-family: 'Open Sans', sans-serif !important;
}

/* Otsikkotyylit */
.ar-h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3.2rem, 6vw, 5.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ar-white);
}
.ar-h1 em, .ar-h1 .ar-gold {
  font-style: italic;
  color: var(--ar-gold);
}

.ar-h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ar-white);
  margin-bottom: 28px;
}
.ar-h2 em {
  font-style: italic;
  color: var(--ar-gold);
}

.ar-h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ar-white);
  margin-bottom: 8px;
}

.ar-label {
  font-family: 'Open Sans', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ar-teal-l);
  margin-bottom: 12px;
  display: block;
}

.ar-lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ar-ow);
  line-height: 1.6;
  margin-bottom: 18px;
}

.ar-text {
  font-size: 1rem;
  color: var(--ar-muted);
  line-height: 1.85;
  margin-bottom: 18px;
}

.ar-text strong {
  color: var(--ar-ow);
  font-weight: 500;
}

.ar-muted {
  color: var(--ar-muted);
}

/* Kultainen erotinviiva */
.ar-rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--ar-gold), transparent);
  margin-bottom: 48px;
  border: none;
}

/* ============================================================
   NAPIT
============================================================ */

/* Kulta-nappi (ensisijainen) */
.ar-btn-gold,
.et_pb_button.ar-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--ar-gold), var(--ar-gold-l));
  color: var(--ar-navy) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 3px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 36px rgba(171,140,70,.22);
  transition: transform .2s, box-shadow .2s;
	width:100%;justify-content:center;padding:15px;
}
.ar-btn-gold:hover,
.et_pb_button.ar-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 48px rgba(171,140,70,.38);
  background: linear-gradient(135deg, var(--ar-gold-l), var(--ar-gold));
}

/* Turkoosi nappi */
.ar-btn-teal,
.et_pb_button.ar-btn-teal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--ar-teal), var(--ar-teal-l));
  color: var(--ar-white) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(51,111,112,.22);
  transition: transform .2s, box-shadow .2s;
}
.ar-btn-teal:hover,
.et_pb_button.ar-btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(51,111,112,.38);
}

/* Outline-nappi */
.ar-btn-outline,
.et_pb_button.ar-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ar-ow) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .06em;
  border-radius: 3px;
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ar-btn-outline:hover,
.et_pb_button.ar-btn-outline:hover {
  border-color: var(--ar-teal-l);
  background: rgba(51,111,112,.1);
}

/* ============================================================
   KORTIT JA OSIOT
============================================================ */

/* Malli-kortti (Pohjantähti / Otava / Revontulet) */
.ar-model-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  background: rgba(44,62,80,.7);
  border: 1px solid var(--ar-brd);
  border-radius: 5px;
  margin-bottom: 14px;
  transition: border-color .3s, transform .3s;
}
.ar-model-card:hover {
  border-color: rgba(171,140,70,.35);
  transform: translateX(4px);
}

.ar-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.ar-icon-gold   { background: rgba(171,140,70,.12); border: 1px solid rgba(171,140,70,.2); }
.ar-icon-teal   { background: rgba(51,111,112,.12);  border: 1px solid rgba(51,111,112,.2); }
.ar-icon-violet { background: rgba(117,72,104,.12);  border: 1px solid rgba(117,72,104,.2); }

/* Kipupiste-kortti */
.ar-pain-card {
  padding: 28px 30px;
  background: rgba(44,62,80,.6);
  border: 1px solid var(--ar-brd);
  border-radius: 5px;
  transition: border-color .3s;
}
.ar-pain-card:hover {
  border-color: rgba(51,111,112,.3);
}
.ar-pain-q {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ar-white);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ar-pain-a {
  font-size: .87rem;
  color: var(--ar-muted);
  line-height: 1.75;
}

/* Luku-kortti */
.ar-ch-card {
  padding: 22px 24px;
  background: rgba(44,62,80,.5);
  border: 1px solid var(--ar-brd);
  border-radius: 5px;
  transition: background .3s, border-color .3s;
}
.ar-ch-card:hover {
  background: rgba(44,62,80,.9);
  border-color: rgba(171,140,70,.25);
}
.ar-ch-num {
  font-family: 'Open Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ar-gold);
  opacity: .75;
  margin-bottom: 8px;
}
.ar-ch-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  color: var(--ar-white);
  margin-bottom: 6px;
}
.ar-ch-desc {
  font-size: .82rem;
  color: var(--ar-muted);
  line-height: 1.65;
}

/* CTA-boksi (kulta) */
.ar-cta-box {
  background: rgba(44,62,80,.8);
  border: 1px solid rgba(171,140,70,.25);
  border-radius: 9px;
  padding: 68px 72px;
  position: relative;
  overflow: hidden;
}
.ar-cta-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ar-gold), transparent);
  opacity: .5;
}
.ar-cta-box::after {
  content: '';
  position: absolute;
  top: -80px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(171,140,70,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* CTA-boksi (turkoosi – valmennus) */
.ar-course-box {
  background: rgba(44,62,80,.7);
  border: 1px solid var(--ar-brd-t);
  border-radius: 9px;
  padding: 68px 72px;
  position: relative;
  overflow: hidden;
}
.ar-course-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ar-teal-l), transparent);
  opacity: .4;
}

/* Tagit */
.ar-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 2px;
  font-family: 'Open Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ar-tag-gold {
  background: rgba(171,140,70,.1);
  border: 1px solid rgba(171,140,70,.3);
  color: var(--ar-gold);
}
.ar-tag-teal {
  background: rgba(51,111,112,.1);
  border: 1px solid rgba(51,111,112,.3);
  color: var(--ar-teal-l);
}

/* Lomakekenttä */
.ar-input {
  padding: 13px 18px;
  background: rgba(23,43,53,.8);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  color: var(--ar-ow);
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.ar-input::placeholder { color: var(--ar-muted); opacity: .6; }
.ar-input:focus { border-color: rgba(171,140,70,.5); }

/* Kirjoittaja-kortti */
.ar-author-card {
  padding: 36px;
  background: rgba(44,62,80,.5);
  border: 1px solid var(--ar-brd);
  border-radius: 7px;
  transition: border-color .3s;
}
.ar-author-card:hover { border-color: rgba(171,140,70,.25); }

.ar-author-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.ar-author-av-gold { background: rgba(171,140,70,.12); color: var(--ar-gold); border: 1px solid rgba(171,140,70,.2); }
.ar-author-av-teal { background: rgba(51,111,112,.12); color: var(--ar-teal-l); border: 1px solid rgba(51,111,112,.2); }

.ar-author-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--ar-white); margin-bottom: 4px; }
.ar-author-role { font-family: 'Open Sans', sans-serif; font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-gold); margin-bottom: 16px; }
.ar-author-bio  { font-size: .9rem; color: var(--ar-muted); line-height: 1.8; }

/* ============================================================
   VALMENNUSSIVU – päiväohjelma
============================================================ */

/* Valmennus-välilehdet */
.ar-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 48px;
}
.ar-tab {
  font-family: 'Open Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 28px;
  background: none;
  border: none;
  color: var(--ar-muted);
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.ar-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--ar-teal-l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s;
}
.ar-tab.active { color: var(--ar-teal-l); }
.ar-tab.active::after { transform: scaleX(1); }
.ar-tab:hover { color: var(--ar-ow); }

.ar-tab-panel { display: none; }
.ar-tab-panel.active { display: block; }

/* Päivä-blokki */
.ar-day-block {
  background: rgba(44,62,80,.55);
  border: 1px solid var(--ar-brd);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 28px;
}
.ar-day-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  background: rgba(51,111,112,.08);
  border-bottom: 1px solid rgba(51,111,112,.14);
}
.ar-day-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(51,111,112,.15);
  border: 1px solid rgba(51,111,112,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  color: var(--ar-teal-l);
  flex-shrink: 0;
}
.ar-day-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--ar-white);
  margin-bottom: 2px;
}
.ar-day-header p { font-size: .8rem; color: var(--ar-muted); }

.ar-session {
  display: grid;
  grid-template-columns: 90px 1fr;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ar-session:last-child { border-bottom: none; }
.ar-session-time {
  font-family: 'Open Sans', sans-serif;
  font-size: .71rem;
  color: var(--ar-teal);
  letter-spacing: .06em;
  padding: 16px 18px;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
}
.ar-session-content { padding: 16px 22px; }
.ar-session-title { font-size: .92rem; color: var(--ar-ow); margin-bottom: 4px; }
.ar-session-desc  { font-size: .81rem; color: var(--ar-muted); line-height: 1.65; }
.ar-session.break { opacity: .45; }

/* Ilmoittautumiskortti */
.ar-enroll-card {
  background: rgba(44,62,80,.85);
  border: 1px solid var(--ar-brd-t);
  border-radius: 9px;
  padding: 36px;
  position: relative;
}
.ar-enroll-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ar-teal-l), transparent);
  opacity: .4;
}
.ar-price {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--ar-white);
  line-height: 1;
  margin-bottom: 4px;
}
.ar-price-note { font-size: .84rem; color: var(--ar-muted); margin-bottom: 22px; line-height: 1.6; }

.ar-checklist { list-style: none; padding: 0; margin-bottom: 24px; }
.ar-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  color: var(--ar-muted);
  margin-bottom: 9px;
}
.ar-checklist li::before {
  content: '✓';
  color: var(--ar-teal-l);
  flex-shrink: 0;
  font-size: .85rem;
}

/* ============================================================
   TÄHTIKENTTÄ (Starfield) – canvas-elementti
============================================================ */
#ar-starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Ambient-hehku */
.ar-ambient {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ar-ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: ar-blob 20s ease-in-out infinite;
}
.ar-ambient-blob:nth-child(1) {
  width: 600px; height: 400px;
  top: -120px; left: -100px;
  background: radial-gradient(ellipse, rgba(51,111,112,.15) 0%, transparent 70%);
  animation-delay: 0s;
}
.ar-ambient-blob:nth-child(2) {
  width: 500px; height: 350px;
  top: 20%; right: -80px;
  background: radial-gradient(ellipse, rgba(171,140,70,.10) 0%, transparent 70%);
  animation-delay: 7s;
}
.ar-ambient-blob:nth-child(3) {
  width: 400px; height: 300px;
  bottom: 10%; left: 20%;
  background: radial-gradient(ellipse, rgba(117,72,104,.10) 0%, transparent 70%);
  animation-delay: 14s;
}
@keyframes ar-blob {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .7; }
  33%       { transform: translate(30px,20px) scale(1.05); opacity: 1; }
  66%       { transform: translate(-20px,30px) scale(.95); opacity: .5; }
}

/* ============================================================
   SCROLL REVEAL
============================================================ */
.ar-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.ar-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   DIVI SECTION -TAUSTAVÄRIT
============================================================ */
.ar-section-navy   { background-color: var(--ar-navy) !important; }
.ar-section-mid    { background-color: var(--ar-mid) !important; }
.ar-section-dark   { background-color: rgba(15,26,33,.95) !important; }

/* ============================================================
   FOOTER
============================================================ */
.ar-footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ar-white);
  letter-spacing: .06em;
  display: block;
  margin-bottom: 14px;
  text-decoration: none;
}
.ar-footer-logo span { color: var(--ar-gold); }

.ar-footer-tag {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ar-brd);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .88rem;
  color: var(--ar-muted);
  line-height: 1.6;
}

/* ============================================================
   APULUOKAT
============================================================ */
.ar-gold-text  { color: var(--ar-gold) !important; }
.ar-teal-text  { color: var(--ar-teal-l) !important; }
.ar-white-text { color: var(--ar-white) !important; }
.ar-muted-text { color: var(--ar-muted) !important; }

.ar-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ar-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

@media (max-width: 768px) {
  .ar-grid-2, .ar-grid-3 { grid-template-columns: 1fr; }
  .ar-cta-box, .ar-course-box { padding: 48px 28px; }
}