/*
Theme Name: Chartria
Theme URI: https://chartriaai.com
Author: Chartria
Description: Dark, futuristic block theme for ChartriaAI: AI trading chart analysis, free tools, lessons and blog. Includes a light reading surface for long content and an ad-free app shell for the dashboard.
Version: 0.2.4
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chartria
*/

:root {
  --c-void: #060913; --c-space: #0B1224; --c-panel: #101A33; --c-line: #22305A;
  --c-violet: #6D4AFF; --c-cyan: #22D3EE; --c-bull: #34D399; --c-bear: #FB7185;
  --aurora: linear-gradient(120deg, #6D4AFF 0%, #22D3EE 100%);
}

/* ---------- Page backdrop: faint grid + violet glow, pure CSS ---------- */
body {
  background-color: var(--c-void);
  background-image:
    radial-gradient(60% 40% at 50% 0%, rgba(109, 74, 255, .22) 0%, rgba(6, 9, 19, 0) 70%),
    linear-gradient(rgba(34, 48, 90, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 48, 90, .22) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, repeat, repeat;
}

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; color: #0B1224; padding: .5rem 1rem; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Header (glass) ---------- */
.chartria-header { position: sticky; top: 0; z-index: 50; background: rgba(6, 9, 19, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.chartria-header-inner { padding-top: .6rem; padding-bottom: .6rem; }
.chartria-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none !important; }
.chartria-wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.chartria-wordmark b { font-weight: 800; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chartria-header .wp-block-navigation a { color: #B7C3E6; padding: .5rem .25rem; text-decoration: none; }
.chartria-header .wp-block-navigation a:hover { color: #fff; }
.chartria-header .wp-block-button__link { padding: .55rem 1.1rem; font-size: .9rem; }

/* ---------- Buttons ---------- */
.wp-block-button__link, .wp-element-button { box-shadow: var(--wp--custom--glow); transition: transform .15s, box-shadow .15s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.is-style-outline > .wp-block-button__link { background: transparent; color: #E6ECFF; border: 1px solid rgba(167, 139, 250, .55); box-shadow: none; }
.is-style-outline > .wp-block-button__link:hover { background: rgba(109, 74, 255, .18); color: #fff; }
.chartria-btn-aurora .wp-block-button__link { background: linear-gradient(120deg, #6D4AFF 0%, #2563EB 100%); color: #fff; }
.chartria-btn-aurora .wp-block-button__link:hover { background: linear-gradient(120deg, #7C5CFF 0%, #3B82F6 100%); color: #fff; filter: brightness(1.08); }

/* ---------- Sections ---------- */
.chartria-section { padding: 5rem 1.25rem; }
.chartria-section-tight { padding: 1.5rem 1.25rem; }
.chartria-section-soft { background: rgba(11, 18, 36, .65); border-block: 1px solid rgba(34, 48, 90, .7); }
.chartria-eyebrow { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-cyan); border: 1px solid rgba(34, 211, 238, .35); border-radius: 99px; padding: .3rem .85rem;
  background: rgba(34, 211, 238, .07); }
.chartria-grad { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chartria-lead { color: #B7C3E6; font-size: var(--wp--preset--font-size--medium); }
.chartria-center { text-align: center; }
.chartria-center .wp-block-buttons { justify-content: center; }

/* ---------- Hero (centered, annotated scanner chart) ---------- */
.chartria-hero { text-align: center; padding-top: 5rem; padding-bottom: 3rem; }
.chartria-hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.chartria-hero .chartria-lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
.chartria-hero-note { font-size: .85rem; color: #7E8BB0; }
.chartria-chart-frame { position: relative; margin-top: 1rem; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, rgba(109, 74, 255, .8), rgba(34, 211, 238, .5) 50%, rgba(34, 48, 90, .6)); box-shadow: 0 30px 80px rgba(109, 74, 255, .25); }
.chartria-chart-frame > div { border-radius: 19px; overflow: hidden; background: #070C1B; }
.chartria-chart-frame svg { display: block; width: 100%; height: auto; }

/* ---------- Cards, tiles ---------- */
.chartria-card { background: linear-gradient(180deg, rgba(16, 26, 51, .92), rgba(11, 18, 36, .92)); border: 1px solid var(--c-line);
  border-radius: var(--wp--custom--radius); padding: 1.6rem; height: 100%; transition: border-color .2s, box-shadow .2s, transform .2s; }
.chartria-card:hover { border-color: rgba(167, 139, 250, .65); box-shadow: 0 12px 40px rgba(109, 74, 255, .22); transform: translateY(-2px); }
.chartria-card h3 { margin-top: 0; font-size: 1.2rem; }
.chartria-card a { text-decoration: none; }
.chartria-card .wp-block-heading a { color: #fff; }
.chartria-card p { color: #B7C3E6; }
.chartria-idx { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--c-violet); letter-spacing: .1em; }

.chartria-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.chartria-bento > .chartria-tile { margin: 0 !important; max-width: none !important; }
.chartria-tile { background: linear-gradient(180deg, rgba(16, 26, 51, .92), rgba(11, 18, 36, .92)); border: 1px solid var(--c-line);
  border-radius: 20px; padding: 1.75rem; position: relative; overflow: hidden; }
.chartria-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--aurora); opacity: .6; }
.chartria-tile h3 { margin-top: .4rem; }
.chartria-tile p { color: #B7C3E6; }
.tile-lg { grid-column: span 4; grid-row: span 2; background: radial-gradient(80% 70% at 100% 0%, rgba(109, 74, 255, .28), rgba(11, 18, 36, .95) 70%); }
.tile-md { grid-column: span 2; }
.tile-wide { grid-column: span 3; }
.chartria-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chartria-chip { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; padding: .25rem .65rem; border-radius: 8px;
  border: 1px solid var(--c-line); color: #C9D4F5; background: rgba(34, 48, 90, .35); }
.chartria-chip.v { border-color: rgba(167, 139, 250, .6); color: #D8CCFF; }
.chartria-chip.c { border-color: rgba(34, 211, 238, .5); color: #A5F3FC; }
.chartria-chip.g { border-color: rgba(52, 211, 153, .5); color: #A7F3D0; }
.chartria-chip.r { border-color: rgba(251, 113, 133, .5); color: #FECDD3; }

/* cards and tiles stay left-aligned even inside centered sections */
.chartria-card, .chartria-tile { text-align: left; }
.chartria-tile .wp-block-buttons { justify-content: flex-start; }

/* ---------- Honest-number tiles ---------- */
.chartria-stat { font-family: var(--wp--preset--font-family--mono); font-size: 2.4rem; font-weight: 700; margin: 0; color: #fff; letter-spacing: -.02em; }
.chartria-statlabel { color: #9AA8CC; margin: .2rem 0 0; font-size: .95rem; }
.chartria-badge { display: inline-block; padding: .15rem .65rem; border-radius: 99px; font-size: .75rem; font-weight: 700;
  font-family: var(--wp--preset--font-family--mono); letter-spacing: .04em; }
.chartria-badge.bull { background: rgba(52, 211, 153, .14); color: var(--c-bull); border: 1px solid rgba(52, 211, 153, .4); }
.chartria-badge.bear { background: rgba(251, 113, 133, .14); color: var(--c-bear); border: 1px solid rgba(251, 113, 133, .4); }
.chartria-badge.warn { background: rgba(251, 191, 36, .12); color: #FBBF24; border: 1px solid rgba(251, 191, 36, .4); }
.chartria-badge.ai { background: rgba(109, 74, 255, .2); color: #C4B5FD; border: 1px solid rgba(167, 139, 250, .5); }
.chartria-num { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }

/* ---------- Steps ---------- */
.chartria-step-n { font-family: var(--wp--preset--font-family--mono); font-size: 2rem; font-weight: 700; margin: 0 0 .4rem; background: var(--aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- FAQ ---------- */
.wp-block-details { border: 1px solid var(--c-line); border-radius: 14px; padding: .95rem 1.2rem; background: rgba(16, 26, 51, .7); }
.wp-block-details summary { font-weight: 700; cursor: pointer; color: #fff; }
.wp-block-details[open] { border-color: rgba(167, 139, 250, .55); }

/* ---------- CTA ---------- */
.chartria-cta { border-radius: 24px; border: 1px solid rgba(167, 139, 250, .45);
  background: radial-gradient(70% 120% at 50% 0%, rgba(109, 74, 255, .35), rgba(11, 18, 36, .95) 70%); padding: 3.5rem 1.5rem; text-align: center; }

/* ---------- Light reading surface for lessons, blog, legal pages ---------- */
.chartria-article { background: #F7F8FC; color: #1F2A44; border-radius: 22px; padding: clamp(1.25rem, 4vw, 3.25rem); margin-block: 2.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.chartria-article :where(h1, h2, h3, h4, .wp-block-post-title) { color: #0B1224; }
.chartria-article a { color: #4F32E6; }
.chartria-article .chartria-meta { color: #55627F; }
.chartria-article .chartria-badge.ai { background: #EDE9FE; color: #4F32E6; border-color: #C4B5FD; }
.chartria-article .chartria-badge.bull { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.chartria-article .chartria-badge.warn { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.chartria-article .wp-block-post-terms a, .chartria-article .wp-block-post-date, .chartria-article .wp-block-post-author-name { color: #55627F; }
.chartria-article blockquote { color: #1F2A44; }
.chartria-article code { background: #ECEEF8; border-radius: 6px; padding: .1rem .35rem; }
.chartria-article .wp-block-details { background: #fff; border-color: #D8DDF0; }
.chartria-article .wp-block-details summary { color: #0B1224; }
.chartria-article .chartria-disclaimer { color: #55627F; border-top-color: #D8DDF0; }
.chartria-meta { color: #9AA8CC; font-size: .9rem; }

/* ---------- Ad slots: reserve height; empty unless an ad plugin fills them ---------- */
.chartria-ad-slot { min-height: 280px; margin: 2rem auto; text-align: center; }
.chartria-ad-slot:empty { display: none; }
body.chartria-app .chartria-ad-slot { display: none !important; }

/* ---------- Disclaimer & footer ---------- */
.chartria-disclaimer { font-size: .85rem; color: #9AA8CC; border-top: 1px solid var(--c-line); padding-top: 1rem; }
.chartria-footer { background: #040711; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, #6D4AFF, #22D3EE, transparent) 1;
  padding: 3.5rem 1.25rem 2rem; margin-top: 3rem; }
.chartria-footer a { color: #AEBBDF; text-decoration: none; }
.chartria-footer a:hover { color: #fff; text-decoration: underline; }
.chartria-footer-title { color: #fff !important; font-size: 1rem !important; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: .1em; }
.chartria-footer-list { list-style: none; padding: 0; margin: 0; }
.chartria-footer-list li { margin: .4rem 0; }
.chartria-footer-blurb { font-size: .9rem; color: #7E8BB0; }
.chartria-footer-disclaimer { font-size: .8rem; color: #7E8BB0; border-top: 1px solid var(--c-line); padding-top: 1rem; margin-top: 2rem; }
.chartria-footer-copy { font-size: .8rem; color: #5B6890; }
.chartria-footer-credit { font-size: .8rem; color: #5B6890; margin-top: .25rem; }
.chartria-footer-credit a { color: #8C99C2; }

/* ---------- App shell (page-dashboard): no ads, no distractions ---------- */
.chartria-app-shell { min-height: 70vh; padding-top: 1.5rem; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .chartria-bento { grid-template-columns: 1fr; }
  .tile-lg, .tile-md, .tile-wide { grid-column: auto; grid-row: auto; }
}
@media (max-width: 781px) {
  .chartria-hero { padding-top: 3rem; }
  .chartria-section { padding: 3.25rem 1rem; }
}