/* =====================================================================
   Rocky Cloud Hub — Global Site Theme
   Applied to EVERY page via public_page.php <link> tag.
   Loaded before component CSS so components can inherit.
   ===================================================================== */

/* ── Google Font load fallback (if not already loaded) ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ── Root overrides for Rocky Cloud Hub ── */
:root {
    --ts-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ts-primary: #E8923A;
    --ts-primary-tint: #fff8f2;
    --ts-primary-soft: #fdeedd;
    --ts-primary-strong: #c97020;
    --ts-radius: 12px;
}

/* ── Dark page base (all pages use dark theme) ── */
body {
    background: #000000;
    color: #ffffff;
    font-family: var(--ts-font);
}

/* ── Hero component — dark bg, amber accent ── */
.ts-hero, .ts-block-hero { background: #000000; color: #ffffff; }
.ts-hero h1, .ts-block-hero h1 { color: #ffffff; font-weight: 800; }
.ts-hero .ts-kicker, .ts-hero-kicker {
    color: #E8923A; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; font-size: 13px;
}

/* ── Buttons ── */
.ts-btn, .ts-cta-btn, .ts-btn-primary, button.ts-btn {
    background: #E8923A; color: #000000; font-weight: 700;
    border: none; border-radius: 10px; cursor: pointer;
    padding: 13px 28px; font-size: 15px;
    transition: background 0.2s ease, transform 0.15s ease;
    font-family: var(--ts-font);
}
.ts-btn:hover, .ts-cta-btn:hover, .ts-btn-primary:hover {
    background: #f0a050; transform: translateY(-1px);
}
.ts-btn-outline {
    background: transparent; color: #ffffff;
    border: 2px solid rgba(255,255,255,0.35); border-radius: 10px;
    padding: 11px 26px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: border-color 0.2s ease;
}
.ts-btn-outline:hover { border-color: #ffffff; }

/* ── Summary box ── */
.ts-block-summary_box, .ts-summary-box {
    background: #111111; border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    color: #ffffff; padding: 32px;
}
.ts-summary-box h2, .ts-block-summary_box h2 { color: #ffffff; }
.ts-summary-box p, .ts-block-summary_box p { color: rgba(255,255,255,0.75); }

/* ── Quick facts / stat blocks ── */
.ts-block-quick_facts, .ts-quick-facts { background: transparent; }
.ts-stat-value, .ts-fact-value { color: #E8923A; font-weight: 800; font-size: 2.4rem; }
.ts-stat-label, .ts-fact-label { color: rgba(255,255,255,0.6); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.ts-quick-facts .ts-fact-item, .ts-block-quick_facts .ts-fact-item {
    background: #111111; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 20px;
}

/* ── Card grid ── */
.ts-block-card_grid .ts-card, .ts-card-item {
    background: #111111; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; color: #ffffff;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ts-block-card_grid .ts-card:hover, .ts-card-item:hover {
    border-color: rgba(232,146,58,0.4); transform: translateY(-2px);
}
.ts-card-title { color: #ffffff; font-weight: 700; }
.ts-card-text, .ts-card-body { color: rgba(255,255,255,0.7); }
.ts-card-icon { color: #E8923A; }

/* ── Content section ── */
.ts-block-content_section { background: #000000; color: #ffffff; }
.ts-block-content_section h2 { color: #ffffff; font-weight: 700; }
.ts-block-content_section p { color: rgba(255,255,255,0.75); }

/* ── FAQ / accordion ── */
.ts-block-faq { background: #000000; }
.ts-faq-item, .ts-accordion-item {
    border: 1px solid rgba(255,255,255,0.10); border-radius: 10px;
    margin-bottom: 8px; overflow: hidden;
    background: #111111;
}
.ts-faq-question, .ts-accordion-trigger {
    color: #ffffff; font-weight: 600; padding: 18px 20px;
    background: transparent; border: none; width: 100%;
    text-align: left; cursor: pointer; font-family: var(--ts-font);
    font-size: 15px; display: flex; justify-content: space-between; align-items: center;
}
.ts-faq-question:hover { color: #E8923A; }
.ts-faq-answer, .ts-accordion-content {
    color: rgba(255,255,255,0.7); padding: 0 20px 16px;
    font-size: 14px; line-height: 1.7;
}
.ts-faq-icon { color: #E8923A; }

/* ── CTA block ── */
.ts-block-cta { background: #111111; border-radius: 20px; text-align: center; }
.ts-cta-heading { color: #ffffff; font-weight: 800; }
.ts-cta-subtext { color: rgba(255,255,255,0.65); }

/* ── Section headings ── */
.ts-section-label {
    color: #E8923A; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    display: block; margin-bottom: 12px;
}
.ts-section-heading { color: #ffffff; font-weight: 800; }
.ts-section-subtext { color: rgba(255,255,255,0.65); }

/* ── Page-level layout ── */
.ts-page, main { background: #000000; }
.ts-page-title { color: #ffffff; font-weight: 800; }
.ts-page-intro, .ts-geo-byline { color: rgba(255,255,255,0.55); }
main.container { max-width: 100%; padding: 0; }

/* ── Footer strip ── */
.ts-site-footer, footer {
    background: #0a0a0a; border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 13px; padding: 32px 24px;
    text-align: center;
}
.ts-site-footer a { color: rgba(255,255,255,0.55); }
.ts-site-footer a:hover { color: #E8923A; }

/* ── Links on dark bg ── */
a { color: #E8923A; }
a:hover { color: #f0a050; }

/* ── Selection highlight ── */
::selection { background: rgba(232,146,58,0.3); color: #ffffff; }

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #E8923A; }

/* ── Mobile ── */
@media (max-width: 768px) {
    .ts-block { padding: 48px 0; }
    .ts-stat-value { font-size: 1.8rem; }
}

/* ── Nav icon buttons: always dark style ── */
#ts-main-nav .ts-mn-iconbtn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  width: 36px !important; height: 36px !important;
}
#ts-main-nav .ts-mn-iconbtn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
#ts-main-nav .ts-mn-iconbtn svg { stroke: #ffffff !important; color: #ffffff !important; }

/* ── Hamburger button: always dark ── */
#ts-main-nav .ts-mn-burger {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
  width: 36px !important; height: 36px !important;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
#ts-main-nav .ts-mn-burger:hover {
  background: rgba(255,255,255,0.14) !important;
}
#ts-main-nav .ts-mn-burger span {
  display: block; width: 18px; height: 2px;
  border-radius: 1px; background: #ffffff !important;
  transition: transform .25s ease, opacity .25s ease;
}

/* ── Hide theme toggle ── */
#ts-main-nav .ts-mn-theme,
#ts-main-nav [data-theme-toggle],
.st-theme-toggle { display: none !important; }

/* ── Sticky mobile CTA: above fold, not clashing with hero content ── */
.ts-sticky-mobile-cta {
  background: #E8923A !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
.ts-sticky-mobile-cta:hover {
  background: #f0a050 !important;
  color: #000000 !important;
}

/* ── Force dark mode everywhere ── */
html, html[data-theme], html[data-theme="light"] {
  color-scheme: dark;
}