/* =====================================================================
   Get2Share – custom styles on top of Bootstrap 5.3 (mobile-first)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Themes: set on <html data-theme="light|black|navy">. The dark themes
   also get data-bs-theme="dark" so Bootstrap's own components (navbar
   toggler, dropdowns, form controls, close buttons) switch as well.
   Selectors use :root[data-theme=…] so they win over Bootstrap's
   [data-bs-theme=dark] defaults.
   --------------------------------------------------------------------- */
:root {
    --g2s-primary: #4f46e5;
    --g2s-primary-rgb: 79, 70, 229;
    --g2s-accent: #06b6d4;
    --g2s-radius: 1rem;

    /* Re-map Bootstrap's primary to the brand colour */
    --bs-primary: var(--g2s-primary);
    --bs-primary-rgb: var(--g2s-primary-rgb);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Light (default) */
:root,
:root[data-theme="light"] {
    --g2s-ink: #0f172a;
    --g2s-surface: #f8fafc;
    --g2s-border: #e2e8f0;
    --g2s-header-bg: rgba(255, 255, 255, .88);
    --g2s-link: #4f46e5;
    --g2s-link-strong: #3730a3;
    --g2s-ph-color: #3730a3;
    --g2s-ph-empty: #b45309;
    --g2s-role-label: #0e7490;
    --g2s-hero:
        radial-gradient(60rem 30rem at 110% -20%, rgba(6, 182, 212, .45), transparent 60%),
        radial-gradient(50rem 30rem at -10% 120%, rgba(236, 72, 153, .35), transparent 60%),
        linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #4338ca 100%);

    --bs-body-color: #1e293b;
    --bs-body-bg: #ffffff;
    --bs-link-color: var(--g2s-link);
    --bs-link-color-rgb: var(--g2s-primary-rgb);
    --bs-link-hover-color: var(--g2s-link-strong);
}

/* Black */
:root[data-theme="black"] {
    --g2s-ink: #fafafa;
    --g2s-surface: #0f0f10;
    --g2s-border: #27272a;
    --g2s-header-bg: rgba(0, 0, 0, .82);
    --g2s-link: #a5b4fc;
    --g2s-link-strong: #c7d2fe;
    --g2s-ph-color: #c7d2fe;
    --g2s-ph-empty: #fbbf24;
    --g2s-role-label: #67e8f9;
    --g2s-hero:
        radial-gradient(60rem 30rem at 110% -20%, rgba(79, 70, 229, .45), transparent 60%),
        radial-gradient(50rem 30rem at -10% 120%, rgba(6, 182, 212, .18), transparent 60%),
        linear-gradient(135deg, #000 0%, #0a0a0a 55%, #18181b 100%);

    --bs-body-color: #e4e4e7;
    --bs-body-bg: #000000;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(228, 228, 231, .65);
    --bs-secondary-bg: #18181b;
    --bs-tertiary-bg: #0f0f10;
    --bs-border-color: #27272a;
    --bs-link-color: var(--g2s-link);
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: var(--g2s-link-strong);
    --bs-link-hover-color-rgb: 199, 210, 254;
}

/* Dark blue */
:root[data-theme="navy"] {
    --g2s-ink: #f1f5fb;
    --g2s-surface: #0a1a36;
    --g2s-border: #172e52;
    --g2s-header-bg: rgba(4, 12, 28, .85);
    --g2s-link: #93c5fd;
    --g2s-link-strong: #bfdbfe;
    --g2s-ph-color: #bfdbfe;
    --g2s-ph-empty: #fcd34d;
    --g2s-role-label: #67e8f9;
    --g2s-hero:
        radial-gradient(60rem 30rem at 110% -20%, rgba(6, 182, 212, .35), transparent 60%),
        radial-gradient(50rem 30rem at -10% 120%, rgba(79, 70, 229, .35), transparent 60%),
        linear-gradient(135deg, #040c1d 0%, #081733 55%, #0e2750 100%);

    --bs-body-color: #dbe4f0;
    --bs-body-bg: #050f24;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(219, 228, 240, .68);
    --bs-secondary-bg: #0e2140;
    --bs-tertiary-bg: #0a1a36;
    --bs-border-color: #172e52;
    --bs-link-color: var(--g2s-link);
    --bs-link-color-rgb: 147, 197, 253;
    --bs-link-hover-color: var(--g2s-link-strong);
    --bs-link-hover-color-rgb: 191, 219, 254;
}

/* Smooth colour change when switching themes */
body, .site-header, .prompt-card, .category-tile, .prompt-body, .form-control {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---------- Theme switcher ---------- */
.theme-swatch {
    display: inline-block; width: 1rem; height: 1rem; border-radius: 50%;
    border: 1px solid rgba(127, 127, 127, .45); vertical-align: -.15em;
}
.theme-swatch-light { background: linear-gradient(135deg, #fff 50%, #4f46e5 50%); }
.theme-swatch-black { background: linear-gradient(135deg, #000 50%, #a5b4fc 50%); }
.theme-swatch-navy  { background: linear-gradient(135deg, #050f24 50%, #93c5fd 50%); }
.theme-menu .dropdown-item.active { background: rgba(var(--g2s-primary-rgb), .15); color: var(--g2s-link); }
.theme-menu .dropdown-item.active .bi-check2 { visibility: visible; }
.theme-menu .bi-check2 { visibility: hidden; }

.btn-primary {
    --bs-btn-bg: var(--g2s-primary);
    --bs-btn-border-color: var(--g2s-primary);
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-disabled-bg: #6366f1;
    --bs-btn-disabled-border-color: #6366f1;
    font-weight: 600;
}

.form-control:focus,
.form-check-input:focus {
    border-color: rgba(var(--g2s-primary-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--g2s-primary-rgb), .15);
}
.form-check-input:checked { background-color: var(--g2s-primary); border-color: var(--g2s-primary); }

.skip-link {
    position: absolute; left: 1rem; top: .5rem; z-index: 2000;
    padding: .5rem 1rem; background: var(--bs-body-bg); border-radius: .5rem;
}

/* ---------- Header / navbar ---------- */
.site-header {
    background: var(--g2s-header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--g2s-border);
}
.navbar-brand { color: var(--g2s-ink); letter-spacing: -.02em; }
.brand-mark {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: .6rem;
    color: #fff; background: linear-gradient(135deg, var(--g2s-primary), var(--g2s-accent));
}
.nav-search { margin-top: .5rem; }
@media (min-width: 992px) {
    .nav-search { margin-top: 0; width: 18rem; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 3.5rem 0 3rem;
    color: #fff;
    background: var(--g2s-hero);
}
.hero-compact { padding: 2.25rem 0 2rem; }
.hero h1 { letter-spacing: -.03em; }
.hero-subtitle { color: rgba(255, 255, 255, .85); }
.hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.6); --bs-breadcrumb-item-active-color: rgba(255,255,255,.85); }
.hero .breadcrumb a { color: #fff; }
.hero-search { max-width: 42rem; }
.hero-search .input-group-text,
.hero-search .form-control { border-color: transparent; }
.hero-search .btn { border-radius: 0 .5rem .5rem 0; }
@media (min-width: 768px) {
    .hero { padding: 5.5rem 0 5rem; }
    .hero-compact { padding: 3rem 0 2.75rem; }
}
/* On very small screens stack the button under the input */
@media (max-width: 479.98px) {
    .hero-search .input-group { flex-wrap: wrap; }
    .hero-search .input-group-text { display: none; }
    .hero-search .form-control { border-radius: .5rem !important; width: 100%; font-size: 1rem; }
    .hero-search .btn { width: 100%; margin-top: .5rem; margin-left: 0 !important; border-radius: .5rem !important; }
    .hero-search .input-group.shadow-sm { box-shadow: none !important; }
}

/* ---------- Category tiles ---------- */
.category-tile {
    gap: .5rem;
    padding: 1rem 1.1rem;
    color: var(--g2s-ink);
    text-decoration: none;
    background: var(--g2s-surface);
    border: 1px solid var(--g2s-border);
    border-radius: var(--g2s-radius);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.category-tile:hover,
.category-tile:focus-visible,
.category-tile.active {
    color: var(--g2s-link);
    border-color: rgba(var(--g2s-primary-rgb), .45);
    box-shadow: 0 .5rem 1.25rem rgba(var(--g2s-primary-rgb), .12);
    transform: translateY(-2px);
}
.category-tile .fw-semibold { font-size: .95rem; line-height: 1.25; }

/* ---------- Prompt cards ---------- */
.prompt-card {
    border: 1px solid var(--g2s-border);
    border-radius: var(--g2s-radius);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.prompt-card:hover,
.prompt-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(var(--g2s-primary-rgb), .35);
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
}
.prompt-card .card-title { line-height: 1.35; }
.prompt-card .card-title a:hover { color: var(--g2s-link) !important; }
/* Category badges must stay clickable above the stretched link */
.prompt-card .cat-badge { position: relative; z-index: 2; }

.cat-badge {
    font-weight: 500;
    color: var(--g2s-link);
    background: rgba(var(--g2s-primary-rgb), .08);
    text-decoration: none;
}
.cat-badge:hover { background: rgba(var(--g2s-primary-rgb), .22); color: var(--g2s-link-strong); }

mark { padding: 0 .1em; border-radius: .2em; background: #fef08a; color: #1e293b; }

.empty-state { background: var(--g2s-surface); border: 1px dashed var(--g2s-border); }

/* ---------- Single prompt page ---------- */
.system-role {
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--g2s-accent);
    background: rgba(6, 182, 212, .07);
    border-radius: .5rem;
}
.system-role .text-uppercase { color: var(--g2s-role-label); letter-spacing: .04em; font-size: .75rem; }

.prompt-box {
    border: 1px solid var(--g2s-border);
    border-radius: var(--g2s-radius);
    overflow: hidden;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .05);
}
.prompt-box-header {
    padding: .75rem 1rem;
    background: var(--g2s-surface);
    border-bottom: 1px solid var(--g2s-border);
}
.prompt-body {
    padding: 1.25rem;
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-wrap;          /* keep the prompt's line breaks */
    overflow-wrap: anywhere;
    background: var(--bs-body-bg);
}
@media (min-width: 768px) { .prompt-body { padding: 1.5rem 1.75rem; font-size: 1.05rem; } }

/* Live placeholders */
.ph {
    padding: .05em .35em;
    border-radius: .35em;
    font-weight: 600;
    color: var(--g2s-ph-color);
    background: rgba(var(--g2s-primary-rgb), .1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color .2s ease;
}
.ph-empty {
    font-weight: 500;
    color: var(--g2s-ph-empty);
    background: rgba(245, 158, 11, .14);
    outline: 1px dashed rgba(245, 158, 11, .6);
}

.btn-copy { white-space: nowrap; }

.variables-card { border-radius: var(--g2s-radius); border-color: var(--g2s-border); background: var(--g2s-surface); }
.sidebar-sticky { top: 5.5rem; z-index: 1; }

.related-list .list-group-item { background: transparent; }
.share-buttons .btn { width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border-radius: .75rem; }

.toast-container { z-index: 1090; }

/* ---------- Footer ---------- */
.site-footer {
    --g2s-footer-bg: #33205c;
    --g2s-footer-text: rgba(255, 255, 255, .78);
    --g2s-footer-line: rgba(255, 255, 255, .12);
    color: var(--g2s-footer-text);
    background: var(--g2s-footer-bg);
}
:root[data-theme="black"] .site-footer { --g2s-footer-bg: #0b0b0d; border-top: 1px solid #27272a; }
:root[data-theme="navy"]  .site-footer { --g2s-footer-bg: #030a19; border-top: 1px solid #172e52; }
.footer-brand { color: #fff; }
.footer-muted { color: var(--g2s-footer-text); max-width: 26rem; }
/* Headings with the short yellow underline */
.footer-heading {
    position: relative;
    margin-bottom: 1.4rem;
    padding-bottom: .55rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.footer-heading::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 2.25rem; height: 3px; border-radius: 3px;
    background: #facc15;
}
.footer-link { color: var(--g2s-footer-text); text-decoration: none; transition: color .15s ease; }
.footer-link:hover,
.footer-link:focus-visible,
.footer-link[aria-current="page"] { color: #fff; }
.footer-link[aria-current="page"] { font-weight: 600; }
.footer-bottom { border-top: 1px solid var(--g2s-footer-line); color: var(--g2s-footer-text); }

/* ---------- Content pages (about, contact, legal) ---------- */
.page-content { max-width: 50rem; }
.page-content h2 { font-size: 1.35rem; font-weight: 700; margin: 2.25rem 0 .85rem; scroll-margin-top: 6rem; }
.page-content h3 { font-size: 1.08rem; font-weight: 600; margin: 1.5rem 0 .6rem; }
.page-content p, .page-content li { line-height: 1.75; }
.page-content ul li { margin-bottom: .35rem; }
.page-meta { color: var(--bs-secondary-color); font-size: .9rem; }
.page-toc {
    padding: 1rem 1.25rem;
    background: var(--g2s-surface);
    border: 1px solid var(--g2s-border);
    border-radius: var(--g2s-radius);
}
.page-toc ol { margin: 0; padding-left: 1.2rem; columns: 2 16rem; }
.page-toc li { margin-bottom: .25rem; }
.info-card {
    height: 100%;
    padding: 1.5rem;
    background: var(--g2s-surface);
    border: 1px solid var(--g2s-border);
    border-radius: var(--g2s-radius);
}
.icon-circle {
    display: inline-grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--g2s-primary), var(--g2s-accent));
}
.email-cta { font-size: clamp(1.15rem, 4vw, 1.6rem); font-weight: 700; overflow-wrap: anywhere; }
.page-content .table { --bs-table-bg: transparent; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Theme-aware helpers ---------- */
.hero-search .input-group-text { background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.count-badge { color: var(--bs-body-color); background: var(--bs-body-bg); border: 1px solid var(--g2s-border); }
:root[data-theme="black"] .prompt-card:hover,
:root[data-theme="navy"] .prompt-card:hover { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45); }
:root[data-theme="black"] .ph,
:root[data-theme="navy"] .ph { background: rgba(var(--g2s-primary-rgb), .28); }
:root[data-theme="black"] .ph-empty,
:root[data-theme="navy"] .ph-empty { background: rgba(245, 158, 11, .16); }