/* =========================
   TheDailyo – Global CSS (Light Theme v2)
   - Keeps v1 look
   - Fix: move font-family off *
   - Add: main width guard
   - Add: form/button/calculator system
   ========================= */

/* Theme tokens */
:root{
  --bg: #f5f7ff;
  --bg-card: #ffffff;
  --bg-column: #ffffff;

  --accent: #4f7cff;
  --accent-soft: #3a55c4;

  --text-main: #0f172a;     /* slate-900 */
  --text-muted: #475569;    /* slate-600 */

  --border-subtle: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.18);

  --radius-lg: 18px;
  --radius-md: 16px;
  --radius-sm: 14px;

  --shadow-soft: 0 16px 40px rgba(2, 6, 23, 0.10);
  --shadow-hover: 0 22px 55px rgba(2, 6, 23, 0.14);

  --focus-ring: 0 0 0 3px rgba(79,124,255,0.25);

  --container: 1100px;
}

/* Reset + base */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

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

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #eef2ff 0%, #f7f9ff 42%, #ffffff 100%);
  color: var(--text-main);
  min-height:100vh;
  padding:32px 16px 48px;
  display:flex;
  justify-content:center;
}

main{ width:100%; } /* guard for pages that forget .page */

.page{ width:100%; max-width:var(--container); }

/* Accessibility */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid var(--border-subtle);
  color: var(--text-main);
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform .12s ease;
  z-index:9999;
}
.skip-link:focus{ transform:translateY(0); outline:none; box-shadow:var(--focus-ring); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-color:rgba(79,124,255,0.55);
}

/* Common text helpers */
p{ color: var(--text-muted); line-height:1.6; }
a{ color: var(--accent-soft); }
a:hover{ color: var(--text-main); }

/* Header (shared) */
.site-header{
  text-align:center;
  margin-top:40px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-subtle);
  position:relative;
}
.site-header::before{
  content:"";
  position:absolute;
  left:50%;
  top:-40px;
  width:260px;
  height:130px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(79,124,255,0.18), rgba(255,255,255,0));
  filter:blur(22px);
  pointer-events:none;
  z-index:-1;
}
.brand-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background: rgba(255,255,255,0.75);
  color: var(--text-main);
  font-weight:700;
  font-size:.85rem;
}
.site-title{
  font-size:2.15rem;
  font-weight:800;
  letter-spacing:.02em;
  color: var(--text-main);
}
.site-subtitle{
  margin-top:10px;
  font-size:1.05rem;
  color: var(--text-muted);
  font-weight:600;
  line-height:1.4;
}
.header-gradient-line{
  height:2px;
  width:240px;
  margin:16px auto 0;
  background: linear-gradient(to right, #6a8dff, #9aa9ff, #6a8dff);
  border-radius:999px;
  opacity:.85;
}

/* Nav pills */
.nav-pills{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border-subtle);
  background:#ffffff;
  color: var(--text-main);
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.nav-pill:hover{
  transform:translateY(-1px);
  border-color: rgba(79,124,255,0.35);
  box-shadow: 0 10px 24px rgba(2,6,23,0.08);
}

/* Search */
.search-wrap{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.search-input{
  width:min(720px, 100%);
  padding:10px 14px;
  background:#ffffff;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color: var(--text-main);
  font-size:.95rem;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}
.search-input::placeholder{ color: rgba(71,85,105,0.75); }

.search-button{
  padding:10px 18px;
  border-radius:999px;
  border:none;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 14px 28px rgba(79,124,255,0.25);
  transition: transform .12s ease, filter .12s ease;
}
.search-button:hover{ transform:translateY(-1px); filter:brightness(1.03); }

@media (max-width:900px){
  .search-wrap{ flex-direction:column; }
  .search-button{ width:min(720px, 100%); margin:0 auto; }
}

/* Sections */
.section-title{ margin-top:26px; font-size:1.25rem; font-weight:800; }
.section-subtitle{ margin-top:6px; color: var(--text-muted); font-size:.95rem; line-height:1.55; }

/* Grids + cards */
.columns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
@media (max-width:900px){ .columns{ grid-template-columns:1fr; } }

.card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border:1px solid var(--border-subtle);
  padding:18px 18px 16px;
  box-shadow: var(--shadow-soft);
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:140px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(79,124,255,0.30);
}
.card-title{ font-size:1.05rem; font-weight:800; color: var(--text-main); }
.card-desc{ font-size:.92rem; color: var(--text-muted); line-height:1.45; }
.card-meta{ margin-top:auto; font-size:.82rem; color: rgba(58,85,196,0.95); }

/* Info boxes */
.info-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){ .info-grid{ grid-template-columns:1fr; } }

.info-box{
  background:#ffffff;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 12px 26px rgba(2,6,23,0.08);
}
.info-box h3{ font-size:.98rem; font-weight:800; margin-bottom:8px; color: var(--text-main); }
.info-box p{ font-size:.9rem; color: var(--text-muted); }

/* Lists */
.list{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){ .list{ grid-template-columns:1fr; } }

.list-item{
  background:#ffffff;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  padding:12px 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,0.08);
  text-decoration:none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.list-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(2,6,23,0.12);
  border-color: rgba(79,124,255,0.25);
}
.li-title{ font-weight:800; font-size:.95rem; color: var(--text-main); }
.li-desc{ margin-top:4px; color: var(--text-muted); font-size:.88rem; line-height:1.45; }

/* Notes */
.note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(79,124,255,0.10);
  border: 1px solid rgba(79,124,255,0.22);
  color: var(--text-main);
  font-size:.92rem;
  line-height:1.5;
}

/* FAQ */
details.faq{
  margin-top:12px;
  background:#ffffff;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}
details.faq summary{
  cursor:pointer;
  font-weight:800;
  color: var(--text-main);
  list-style:none;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq p{ margin-top:8px; color: var(--text-muted); font-size:.92rem; line-height:1.55; }

/* ---------------------------------
   Forms + Buttons (NEW, matches theme)
   --------------------------------- */

label{
  font-weight:800;
  color: var(--text-main);
  font-size:.92rem;
}

input, select, textarea{
  width:100%;
  background:#ffffff;
  border:1px solid var(--border-strong);
  border-radius:14px;
  padding:10px 12px;
  color: var(--text-main);
  font-size:.95rem;
  box-shadow: 0 10px 24px rgba(2,6,23,0.05);
}

textarea{ min-height:110px; resize:vertical; }

input::placeholder, textarea::placeholder{
  color: rgba(71,85,105,0.75);
}

select{ cursor:pointer; }

button{
  font-family: inherit;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  text-decoration:none;
}

.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color:#fff;
  box-shadow: 0 14px 28px rgba(79,124,255,0.22);
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.03); }

.btn-ghost{
  background:#ffffff;
  color: var(--text-main);
  border-color: var(--border-subtle);
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}
.btn-ghost:hover{
  transform:translateY(-1px);
  border-color: rgba(79,124,255,0.30);
}

/* ---------------------------------
   Calculator Layout Kit (NEW)
   --------------------------------- */

.calculator{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.calc-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

.result{
  margin-top:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(79,124,255,0.22);
  background: rgba(79,124,255,0.08);
  color: var(--text-main);
  font-weight:800;
  line-height:1.45;
}

.help-text{
  margin-top:6px;
  font-size:.88rem;
  color: var(--text-muted);
  line-height:1.5;
}

/* Footer */
.site-footer{
  margin-top:40px;
  padding-top:16px;
  border-top:1px solid var(--border-subtle);
  text-align:center;
  font-size:.8rem;
  color: var(--text-muted);
}
.site-footer-links a{
  color: var(--accent-soft);
  text-decoration:none;
  margin:0 4px;
}
.site-footer-links a:hover{
  text-decoration:underline;
  color: var(--text-main);
}

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

/* Search error banner */
.error-banner{
  display:none;
  margin:12px auto 0;
  width:min(720px, 100%);
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.08);
  color: #991b1b;
  font-weight:800;
  text-align:left;
  box-shadow: 0 10px 22px rgba(2,6,23,0.06);
}

.tradingview-widget-container{
  margin:18px auto 0;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border-subtle);
  box-shadow: 0 12px 26px rgba(2,6,23,0.08);
}

/* Breadcrumbs */
.breadcrumbs{
  margin-top:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  font-weight:700;
  color: var(--text-muted);
  flex-wrap:wrap;
}
.breadcrumbs a{
  color: var(--accent-soft);
  text-decoration:none;
}
.breadcrumbs a:hover{
  color: var(--text-main);
  text-decoration:underline;
}
.crumb-sep{
  color: rgba(71,85,105,0.75);
}