
/* =========================================================
   InfoZoneLive Portal Theme (Flarum)
   Goal: make the UI look like a modern portal (not stock Flarum),
         add a solid dark mode, and provide consistent ad slot styles.
   Domain: www.infozonelive.com
   ========================================================= */

/* ---------- Brand Tokens ---------- */
:root{
  --izl-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --izl-radius-sm: 10px;
  --izl-radius-md: 16px;
  --izl-radius-lg: 22px;

  --izl-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --izl-shadow-md: 0 10px 25px rgba(0,0,0,.08);

  /* Light palette */
  --izl-bg: #f6f7fb;
  --izl-surface: #ffffff;
  --izl-surface-2: #f1f3f8;
  --izl-border: rgba(15, 23, 42, 0.10);
  --izl-text: #0f172a;
  --izl-muted: rgba(15, 23, 42, 0.65);

  /* Accent */
  --izl-primary: #0ea5e9;    /* sky-500 */
  --izl-primary-2:#2563eb;   /* blue-600 */
  --izl-success: #16a34a;
  --izl-warning: #f59e0b;
  --izl-danger:  #ef4444;

  /* Ad slot */
  --izl-ad-bg: rgba(14,165,233,.08);
  --izl-ad-border: rgba(14,165,233,.22);
}

/* Dark mode:
   - Auto: prefers-color-scheme
   - Manual: add .izl-dark on <html> (via small JS/snippet) */
@media (prefers-color-scheme: dark){
  :root{
    --izl-bg: #0b1220;
    --izl-surface: #0f172a;
    --izl-surface-2: #111c33;
    --izl-border: rgba(226,232,240,0.12);
    --izl-text: #e5e7eb;
    --izl-muted: rgba(229,231,235,0.70);
    --izl-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --izl-shadow-md: 0 12px 26px rgba(0,0,0,.45);
    --izl-ad-bg: rgba(14,165,233,.12);
    --izl-ad-border: rgba(14,165,233,.28);
  }
}
html.izl-dark{
  --izl-bg: #0b1220;
  --izl-surface: #0f172a;
  --izl-surface-2: #111c33;
  --izl-border: rgba(226,232,240,0.12);
  --izl-text: #e5e7eb;
  --izl-muted: rgba(229,231,235,0.70);
  --izl-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --izl-shadow-md: 0 12px 26px rgba(0,0,0,.45);
  --izl-ad-bg: rgba(14,165,233,.12);
  --izl-ad-border: rgba(14,165,233,.28);
}

/* ---------- Global ---------- */
body{
  font-family: var(--izl-font-sans);
  background: var(--izl-bg);
  color: var(--izl-text);
}
a{ color: var(--izl-primary-2); }
a:hover{ color: var(--izl-primary); }

/* Make containers feel portal-like */
.App{
  background: var(--izl-bg);
}
.container{
  max-width: 1200px;
}

/* ---------- Header / Navigation ---------- */
.Header{
  background: var(--izl-surface);
  border-bottom: 1px solid var(--izl-border);
  box-shadow: var(--izl-shadow-sm);
}
.Header-primary{
  gap: 10px;
}
.Header-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.Header-secondary{
  align-items: center;
  gap: 10px;
}

/* Search bar -> more “portal” */
.Search-input input{
  border-radius: 999px;
  background: var(--izl-surface-2);
  border: 1px solid var(--izl-border);
}
.Search-input input:focus{
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
  border-color: rgba(14,165,233,.45);
}

/* ---------- Buttons / Inputs ---------- */
.Button{
  border-radius: 999px;
}
.Button--primary{
  background: linear-gradient(135deg, var(--izl-primary), var(--izl-primary-2));
  border: 0;
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}
.Button--primary:hover{
  filter: brightness(1.02);
}

/* ---------- Discussion list as “cards” ---------- */
.DiscussionListItem{
  background: var(--izl-surface);
  border: 1px solid var(--izl-border);
  border-radius: var(--izl-radius-md);
  box-shadow: var(--izl-shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.DiscussionListItem:hover{
  box-shadow: var(--izl-shadow-md);
  transform: translateY(-1px);
}
.DiscussionListItem-title{
  font-weight: 750;
  letter-spacing: -0.01em;
}
.DiscussionListItem-info{
  color: var(--izl-muted);
}
.DiscussionListItem-count{
  border-left: 1px solid var(--izl-border);
}

/* Tags as pills */
.TagLabel{
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--izl-border);
  background: var(--izl-surface-2);
}

/* ---------- Discussion page ---------- */
.Post{
  background: var(--izl-surface);
  border: 1px solid var(--izl-border);
  border-radius: var(--izl-radius-md);
  box-shadow: var(--izl-shadow-sm);
}
.Post-header{
  border-bottom: 1px solid var(--izl-border);
}
.Post-body{
  line-height: 1.7;
}

/* ---------- Sidebar modules ---------- */
.SideNav, .App-sidebar{
  background: transparent;
}
.App-sidebar .item{
  border-radius: var(--izl-radius-md);
}

/* ---------- Category blocks (portal grid vibe) ---------- */
.CategoryListItem, .TagTile{
  border-radius: var(--izl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--izl-border);
  box-shadow: var(--izl-shadow-sm);
}
.CategoryListItem:hover{
  box-shadow: var(--izl-shadow-md);
}

/* ---------- Ad Slots ----------
   Create ad containers that you can place via “Custom HTML” blocks or extensions.

   Recommended placement IDs/classes:
   - Header:    <div class="izl-ad izl-ad--header" id="izl-ad-header">...</div>
   - Sidebar:   <div class="izl-ad izl-ad--sidebar" id="izl-ad-sidebar">...</div>
   - Between:   <div class="izl-ad izl-ad--between" id="izl-ad-between">...</div>
   - Footer:    <div class="izl-ad izl-ad--footer" id="izl-ad-footer">...</div>
*/
.izl-ad{
  background: var(--izl-ad-bg);
  border: 1px dashed var(--izl-ad-border);
  border-radius: var(--izl-radius-md);
  padding: 14px;
  margin: 12px 0;
  position: relative;
  overflow: hidden;
}
.izl-ad:before{
  content: "ADVERTISEMENT";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .55;
  color: var(--izl-muted);
}
.izl-ad--header{ margin: 10px 0 0 0; }
.izl-ad--footer{ margin: 18px 0 0 0; }
.izl-ad--sidebar{ margin: 0 0 12px 0; }
.izl-ad--between{ margin: 16px 0; }

/* Make ad iframes responsive-ish */
.izl-ad iframe, .izl-ad ins{
  max-width: 100%;
}

/* ---------- Dark-mode polish for code blocks ---------- */
pre, code{
  border-radius: 12px;
}
pre{
  border: 1px solid var(--izl-border);
  background: var(--izl-surface-2);
}

/* ---------- Reduce “Flarum-y” corners ---------- */
.Alert, .Dropdown-menu{
  border-radius: var(--izl-radius-md);
  border: 1px solid var(--izl-border);
  box-shadow: var(--izl-shadow-md);
}

/* ---------- Accessibility ---------- */
:focus-visible{
  outline: 3px solid rgba(14,165,233,.35);
  outline-offset: 2px;
}
