/* ================================================================
   Kottab — Public Info Pages (About, Terms, Privacy)
   Requires global.css to be loaded first for font/token definitions
   ================================================================ */

/* ── Body ── */
body.info-page {
    background:   var(--bg);
    font-family:  var(--app-font);
    color:        var(--text-main);
    min-height:   100vh;
    display:      flex;
    flex-direction: column;
    margin:       0;
}

/* ════════════════════════════════
   HEADER
   ════════════════════════════════ */
.info-header {
    background:    var(--card);
    border-bottom: 1px solid var(--border-soft);
    position:      sticky;
    top:           0;
    z-index:       100;
}
.info-header::after {
    content:    "";
    display:    block;
    height:     3px;
    background: var(--btn-grad);
}
.info-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 36px;
    max-width:       1100px;
    margin:          0 auto;
    gap:             16px;
}
.info-header-brand          { text-decoration: none; display: flex; align-items: center; }
.info-header-brand img {
    height:     36px;
    width:      auto;
    filter:     none;
}
.info-footer-logo img { filter: none; }
.info-header-nav {
    display:     flex;
    align-items: center;
    gap:         22px;
}
.info-header-nav a {
    color:           var(--text-muted);
    text-decoration: none;
    font-size:       .875rem;
    transition:      color .2s;
}
.info-header-nav a:hover { color: var(--text-main); }
.info-header-cta {
    background:      var(--btn-grad);
    color:           #fff !important;
    padding:         9px 22px;
    border-radius:   999px;
    font-weight:     700;
    font-size:       .85rem;
    text-decoration: none;
    transition:      opacity .2s;
    white-space:     nowrap;
}
.info-header-cta:hover { opacity: .88; color: #fff !important; }

/* ════════════════════════════════
   MAIN
   ════════════════════════════════ */
.info-main {
    flex:       1;
    max-width:  860px;
    margin:     0 auto;
    padding:    60px 28px 90px;
    width:      100%;
}

/* Back link */
.info-back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--text-muted);
    text-decoration: none;
    font-size:       .85rem;
    margin-bottom:   32px;
    transition:      color .2s;
}
.info-back:hover { color: var(--accent); }
.info-back svg   { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════════════
   HERO STRIP
   ════════════════════════════════ */
.info-hero {
    background:    var(--hero-bg);
    border:        1px solid var(--accent-light);
    border-radius: 22px;
    padding:       52px 40px 46px;
    text-align:    center;
    margin-bottom: 52px;
}
.info-hero-icon {
    width:         62px;
    height:        62px;
    border-radius: 50%;
    background:    var(--btn-grad);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     26px;
    margin:        0 auto 22px;
    box-shadow:    0 8px 24px rgba(255,180,0,.28);
}
.info-hero h1 {
    font-family:   var(--font-main);
    font-size:     2.1rem;
    color:         var(--text-main);
    margin:        0 0 12px;
    line-height:   1.25;
}
.info-hero p {
    color:       var(--text-muted);
    font-size:   1rem;
    max-width:   520px;
    margin:      0 auto;
    line-height: 1.65;
}
.info-badge {
    display:       inline-block;
    background:    var(--badge-bg);
    border:        1px solid var(--accent-light);
    color:         var(--accent-dark);
    font-size:     .75rem;
    font-weight:   700;
    padding:       4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ════════════════════════════════
   SECTIONS
   ════════════════════════════════ */
.info-section {
    margin-bottom: 44px;
}
.info-section-title {
    font-family:     var(--font-main);
    font-size:       1.2rem;
    color:           var(--text-main);
    margin:          0 0 14px;
    padding-bottom:  12px;
    border-bottom:   2px solid var(--accent-light);
}
.info-section p {
    color:       var(--text-muted);
    line-height: 1.78;
    font-size:   .94rem;
    margin-bottom: 10px;
}
.info-section ul, .info-section ol {
    padding-inline-start: 22px;
    margin:       8px 0;
}
.info-section li {
    color:         var(--text-muted);
    line-height:   1.7;
    font-size:     .94rem;
    margin-bottom: 7px;
}
.info-section strong { color: var(--text-main); }

/* ════════════════════════════════
   ABOUT-SPECIFIC: Values grid
   ════════════════════════════════ */
.values-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   18px;
    margin-top:            22px;
}
.value-card {
    background:    var(--card);
    border:        1px solid var(--border-soft);
    border-radius: 16px;
    padding:       24px 20px;
    box-shadow:    0 3px 14px rgba(15,23,42,.06);
    transition:    box-shadow .2s, transform .15s;
}
.value-card:hover {
    box-shadow: 0 8px 24px rgba(15,23,42,.11);
    transform:  translateY(-2px);
}
.value-card-icon { font-size: 24px; margin-bottom: 12px; }
.value-card h3 {
    font-family:  var(--font-main);
    font-size:    .92rem;
    color:        var(--text-main);
    margin:       0 0 8px;
}
.value-card p {
    font-size:  .82rem;
    color:      var(--text-muted);
    line-height: 1.6;
    margin:     0;
}

/* Stats row */
.stats-row {
    display:   flex;
    gap:       18px;
    flex-wrap: wrap;
    margin:    30px 0;
}
.stat-box {
    flex:        1;
    min-width:   130px;
    background:  var(--card);
    border:      1px solid var(--border-soft);
    border-radius: 14px;
    padding:     22px 16px;
    text-align:  center;
    box-shadow:  0 3px 12px rgba(15,23,42,.06);
}
.stat-num {
    font-family:               var(--font-main);
    font-size:                 1.8rem;
    background:                var(--btn-grad);
    -webkit-background-clip:   text;
    -webkit-text-fill-color:   transparent;
    background-clip:           text;
    display:                   block;
    line-height:               1.2;
    margin-bottom:             4px;
}
.stat-lbl { font-size: .78rem; color: var(--text-muted); }

/* Team grid */
.team-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap:                   18px;
    margin-top:            22px;
}
.team-card {
    background:    var(--card);
    border:        1px solid var(--border-soft);
    border-radius: 16px;
    padding:       26px 18px;
    text-align:    center;
    box-shadow:    0 3px 14px rgba(15,23,42,.06);
}
.team-avatar {
    width:         54px;
    height:        54px;
    border-radius: 50%;
    background:    var(--btn-grad);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     22px;
    margin:        0 auto 13px;
}
.team-card h3 {
    font-family:  var(--font-main);
    font-size:    .92rem;
    color:        var(--text-main);
    margin:       0 0 5px;
}
.team-card p {
    font-size:   .8rem;
    color:       var(--text-muted);
    margin:      0;
    line-height: 1.5;
}

/* ════════════════════════════════
   CTA STRIP
   ════════════════════════════════ */
.info-cta {
    background:    var(--btn-grad);
    border-radius: 20px;
    padding:       44px 36px;
    text-align:    center;
    margin-top:    52px;
}
.info-cta h2 {
    font-family:  var(--font-main);
    font-size:    1.55rem;
    color:        #fff;
    margin-bottom: 10px;
}
.info-cta p { color: rgba(255,255,255,.88); margin-bottom: 26px; font-size: .95rem; }
.info-cta-btn {
    display:         inline-block;
    background:      #fff;
    color:           #E30613;
    padding:         12px 30px;
    border-radius:   999px;
    font-weight:     800;
    font-size:       .95rem;
    text-decoration: none;
    transition:      transform .2s;
}
.info-cta-btn:hover { transform: scale(1.05); color: #E30613; }

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */
.info-footer {
    background: #1a1a1a;
    color:      #d7d7d7;
    padding:    28px 36px;
}
.info-footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       1100px;
    margin:          0 auto;
    flex-wrap:       wrap;
    gap:             14px;
}
.info-footer-copy { font-size: .8rem; opacity: .8; }
.info-footer-links {
    display: flex;
    gap:     20px;
}
.info-footer-links a {
    color:           #d7d7d7;
    font-size:       .8rem;
    text-decoration: none;
    opacity:         .65;
    transition:      opacity .2s;
}
.info-footer-links a:hover { opacity: 1; }
.info-footer-logo img { height: 28px; opacity: .8; }

/* ════════════════════════════════
   DARK MODE — force light text so nothing stays black
   ════════════════════════════════ */
[data-theme="dark"] .info-main,
[data-theme="dark"] .info-main h1,
[data-theme="dark"] .info-main h2,
[data-theme="dark"] .info-main h3,
[data-theme="dark"] .info-main h4,
[data-theme="dark"] .info-main h5,
[data-theme="dark"] .info-main h6,
[data-theme="dark"] .info-hero h1,
[data-theme="dark"] .info-section-title,
[data-theme="dark"] .info-section strong,
[data-theme="dark"] .info-section b,
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .team-card h3 {
    color: #f0ece4 !important;
}
[data-theme="dark"] .info-main p,
[data-theme="dark"] .info-main li,
[data-theme="dark"] .info-hero p,
[data-theme="dark"] .info-section p,
[data-theme="dark"] .info-section li,
[data-theme="dark"] .value-card p,
[data-theme="dark"] .team-card p,
[data-theme="dark"] .stat-lbl,
[data-theme="dark"] .info-back {
    color: #c9c4ba !important;
}
[data-theme="dark"] .info-hero {
    background: linear-gradient(135deg,#1f1b13 0%,#161210 100%) !important;
    border-color: #6b4e00 !important;
}
[data-theme="dark"] .info-badge {
    background: #1f1b13 !important;
    border-color: #6b4e00 !important;
    color: #FFB400 !important;
}
[data-theme="dark"] .value-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .team-card {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .info-section-title {
    border-bottom-color: #6b4e00 !important;
}
[data-theme="dark"] .info-back:hover { color: #FFB400 !important; }

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media (max-width: 900px) {
    .info-main         { padding: 40px 22px 72px; }
    .info-hero         { padding: 42px 28px 36px; }
    .info-hero h1      { font-size: 1.8rem; }
}
@media (max-width: 640px) {
    .info-header-inner { padding: 12px 16px; }
    .info-header-nav   { gap: 12px; }
    .info-main         { padding: 32px 16px 56px; }
    .info-hero         { padding: 30px 18px 26px; margin-bottom: 36px; }
    .info-hero h1      { font-size: 1.5rem; }
    .info-hero p       { font-size: .9rem; }
    .info-hero-icon    { width: 52px; height: 52px; font-size: 22px; margin-bottom: 16px; }
    .info-section         { margin-bottom: 32px; }
    .info-section-title   { font-size: 1.08rem; }
    .info-section p,
    .info-section li      { font-size: .88rem; }
    .info-footer-inner { flex-direction: column; text-align: center; }
    .info-footer-links { justify-content: center; }
    .info-cta          { padding: 32px 20px; margin-top: 36px; }
    .info-cta h2       { font-size: 1.25rem; }
    .info-cta p        { font-size: .88rem; }
    .values-grid, .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .value-card, .team-card  { padding: 18px 14px; }
    .stats-row         { gap: 12px; }
    .stat-box          { padding: 16px 12px; min-width: 0; }
    .stat-num          { font-size: 1.45rem; }
}
@media (max-width: 400px) {
    .values-grid, .team-grid { grid-template-columns: 1fr; }
    .stats-row               { flex-direction: column; }
    .info-hero h1            { font-size: 1.3rem; }
}