/* =========================================================
   mystudyadda.css
   - Navbar (two rows), sidebar, offcanvas, 3-column layout
   - Ad helpers and consent banner
   - Perfect symmetry: equal L/R padding for header + menu + content
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Header row (logo + settings) */
  --header-bg: #7a9cc7;
  --header-fg: #ffffff;

  /* Horizontal menu row (topics scroller) */
  --menu-bg: #f7f8fa;
  --menu-fg: #1f2937;

  /* Dividers & spacing */
  --nav-divider: #e4e7eb;
  --menu-pad: 8px;          /* vertical padding inside menu row */

  /* Alias (some rules reference --sidebar-w) */
  --sidebar-w: var(--left-w);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}
.hidden { display: none !important; }

/* ---------- Navbar (two rows) ---------- */
/* Rows own their background; keep navbar wrapper transparent */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(60,60,60,0.06);
  padding: 0;  /* rows control their own height */
  height: auto;
}

/* Stack rows; remove default gutters (we set row paddings explicitly) */
.navbar .container-fluid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Row 1: Brand + toggles + right actions */
.brand-row {
  display: flex;
  align-items: center;
  min-height: var(--brand-h);
  background: var(--header-bg);
  color: var(--header-fg);

  /* PERFECT SYMMETRY */
  padding-inline: var(--page-pad) !important;
}

/* Top-right hamburger must stay visible & tappable */
.topnav-toggle { z-index: 1055; }
.topnav-toggle .bi { color: inherit; }

/* Brand row palette */
.navbar .brand-row .navbar-brand,
.navbar .brand-row .nav-link,
.navbar .brand-row .dropdown-toggle,
.navbar .brand-row .bi,
.navbar .brand-row .btn { color: var(--header-fg); }

.navbar .brand-row .btn.btn-outline-secondary{
  color: var(--header-fg);
  border-color: rgba(255,255,255,.5);
}
.navbar .brand-row .btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.7);
}

.navbar-brand {
  font-weight: 600;
  gap: .6rem;
  display: flex;
  align-items: center;
}
.brand-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.brand-title { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title small { font-size: 11px; color: rgba(255,255,255,.7); }
.brand-title span  { font-size: 20px; font-weight: 800; color: #faf8f8; }

/* Row 2: Topics scroller (desktop-only in HTML) */
.menu-row {
  display: flex;
  align-items: center;

  /* equal vertical space; preserves total navbar math */
  padding-block: var(--menu-pad);
  min-height: calc(var(--menu-h) - (var(--menu-pad) * 2));

  background: var(--menu-bg);
  color: var(--menu-fg);
  border-top: 1px solid var(--nav-divider);
  border-bottom: 1px solid var(--nav-divider);

  /* PERFECT SYMMETRY */
  padding-inline: var(--page-pad) !important;
}

.menu-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 4px;          /* room for scrollbar */
}
.menu-scroller .navbar-nav {
  flex-wrap: nowrap;
  align-items: center;
  gap: .25rem;
  margin: 0;
}
.menu-scroller .nav-link{
  color: var(--menu-fg);
  border-radius: 6px;
  padding-left: .75rem;
  padding-right: .75rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.menu-scroller .nav-link:hover{
  background: rgba(0,0,0,.05);
  color: #111;
}
.menu-scroller .nav-link.active{
  background: #e8eef7;
  color: #0b3d91;
  font-weight: 600;
}

/* Scrollbar style (optional) */
.menu-scroller::-webkit-scrollbar { height: 8px; }
.menu-scroller::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.menu-scroller::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 8px; }
.menu-scroller::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.menu-scroller { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.06); }

/* Dropdown palette */
.dropdown-menu { background-color: var(--color-surface); }
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover { background-color: var(--brand-400); color: #000; }

/* ---------- Sidebar (fixed on desktop) ---------- */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--nav-h);
  width: var(--left-w);                /* unified with base.html */
  height: calc(100vh - var(--nav-h));
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  z-index: 1030;
}

.sidebar .accordion-body a,
.sidebar a,
.offcanvas .accordion-body a,
.offcanvas a {
  font-size: 1.06rem;
  padding: 12px 28px;
  border-radius: 4px;
  margin-bottom: 2px;
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  display: block;
}

.sidebar a.active,
.offcanvas a.active,
.accordion-body a.active {
  background-color: var(--brand-500);
  color: #111 !important;
  font-weight: 600;
}

/* Accordion theming */
.accordion-button {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.06rem;
  padding-left: 1.5rem;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  outline: none;
}
.sidebar .accordion .accordion-item:first-child .accordion-header { margin-top: 0 !important; }
.sidebar .accordion .accordion-item + .accordion-item .accordion-header { margin-top: 6px; }

.accordion-button:not(.collapsed) {
  background-color: var(--brand-500);
  color: #000;
  box-shadow: inset 4px 0 0 #666, inset -4px 0 0 #666;
}
.accordion-collapse { background-color: var(--color-surface); }

.accordion-body a:hover,
.sidebar a:hover,
.offcanvas .accordion-body a:hover {
  background-color: var(--brand-400);
  color: #000;
}

/* Sidebar footer */
.offcanvas-footer,
.sidebar-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-bottom: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 1rem;
}
.sidebar-footer .img-fluid,
.offcanvas-footer .img-fluid { max-height: 40px; }
.sidebar-footer .fw-semibold,
.offcanvas-footer .fw-semibold {
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
}
.sidebar-footer strong,
.offcanvas-footer strong { font-weight: 700; color: #212121; }

/* ---------- Content wrapper (central stream) ---------- */
.content {
  margin-top: 0;               /* body padding clears the navbar */
  padding: 0 0 2rem 0;         /* bottom breathing room only */
  min-height: auto;
}

.footer-site {
  background: var(--color-bg);
  position: relative;
  z-index: 0;
  clear: both;
}

/* ---------- Offcanvas (mobile) ---------- */
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end { background-color: var(--color-surface); }

.offcanvas .accordion-item {
  margin-bottom: 5px;
  border: 0;
  background: transparent;
}
.offcanvas .accordion-button {
  width: 100%;
  background-color: var(--color-surface);
  color: var(--color-text);
}
.offcanvas .accordion-body a {
  padding: 12px 28px;
  text-decoration: none;
  display: block;
  color: var(--color-text);
}
.offcanvas .accordion-body a:hover {
  background-color: var(--brand-400);
  color: #000;
}
.offcanvas .accordion-body a { padding-left: 2.5rem; }

.offcanvas-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  min-height: 68px;
  border-bottom: 1px solid var(--color-border);
  padding-top: 8px;
  padding-bottom: 8px;
}
.offcanvas-header .user-avatar-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.offcanvas-header .btn-close { margin-left: 12px; margin-top: 0; align-self: flex-start; }

/* ---------- Icons & Avatar ---------- */
.sidebar .bi, .offcanvas .bi {
  margin-left: -10px;
  width: 22px;
  min-width: 22px;
  text-align: center;
  margin-right: 12px !important;
}
.user-avatar-wrapper {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar {
  font-size: 2rem;
  line-height: 1;
  display: block;
  margin: 0 auto 3px auto;
}
.user-avatar-name {
  font-size: .97rem;
  font-weight: 600;
  color: #555;
  text-align: center;
  margin-bottom: 0;
}

/* ---------- Banner ad helpers (center area) ---------- */
.ad-container {
  display: block;
  width: 100%;
  margin: 1rem auto;
  min-height: 90px;
}

/* General ad placeholder styles */
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.ad-placeholder-img,
.ad-placeholder img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.95;
  padding: .5rem 1rem;
  border-radius: 4px;
}

/* Badge */
.ad-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: 999px;
}

/* Size presets */
.ad-300x250 .ad-placeholder { min-height: 250px; }
.ad-300x600 .ad-placeholder { min-height: 600px; }
.ad-banner   .ad-placeholder { min-height: 120px; } /* 320x100 / 728x90 */

/* Center AdSense <ins> blocks */
.ad-placeholder > ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* ---------- SIMPLE 3-COLUMN LAYOUT ---------- */
.layout-3col{
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--right-w);
  column-gap: 0;
  padding: var(--page-pad);
  padding-left: var(--page-pad); /* PERFECT SYMMETRY with header/menu rows */
  padding-top: 0 !important;     /* no gap under navbar */
  min-height: 100vh;
  box-sizing: border-box;
}
.col-left, .col-center, .col-right{ min-width:0; }

/* Sticky helpers sit directly under navbar */
.stick{ position: sticky; top: 0 !important; }

/* Space around the center column only */
.col-center{ margin-left: var(--gap); margin-right: var(--gap); }

/* Center content box */
.center-wrap{
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius: 8px;
  padding: var(--center-gutter);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  min-height: 40vh;
}

/* Center footer box */
.center-footer{
  margin-top: var(--gap);
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.center-footer-inner{ padding: var(--center-gutter); }

/* Right rail cards */
.col-right .card{
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.ad-skeleton{
  width:100%;
  min-height:600px;
  background: repeating-linear-gradient(45deg,#f6f7f8,#f6f7f8 10px,#eee 10px,#eee 20px);
  border-radius: 6px;
}

/* ---------- Responsive (stack center only on mobile) ---------- */
@media (max-width: 991.98px){
  .sidebar { display: none; }

  .layout-3col{
    grid-template-columns: 1fr;
    padding: 12px;
    padding-top: 0 !important;        /* keep flush under navbar */
    padding-left: 12px;               /* symmetric small page padding */
    padding-right: 12px;              /* ensure symmetry on mobile */
  }
  .col-left, .col-right{ display:none; }
  .col-center{ margin: 0; }

  /* Tighten brand so the right hamburger always fits */
  .brand-logo{ height:48px !important; }
  .brand-title small{ display:none !important; }
  .brand-title span{ font-size:1rem !important; }
  .brand-row{ padding-inline: 12px !important; } /* match mobile page pad */

  .navbar-brand { font-size: 1.10rem; }
  .user-avatar { font-size: 2.4rem; }
  .user-avatar-name { font-size: 1rem; }
  .user-avatar-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ---------- Cookie Banner ---------- */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1080;
  background:#f8f9fa;
  border-top:1px solid #e0e0e0;
}


/* Desktop/tablet: body offsets for brand + menu */
body { padding-top: var(--nav-h) !important; }
.navbar.fixed-top { min-height: var(--nav-h); }

/* Mobile: menu row is hidden (d-none d-lg-block), so only offset for brand row.
   Also handle phones with notches (safe-area) gracefully. */
@media (max-width: 991.98px){
  body{
    padding-top: calc(var(--brand-h) + env(safe-area-inset-top)) !important;
  }
  .navbar.fixed-top{
    min-height: calc(var(--brand-h) + env(safe-area-inset-top));
  }
  /* Push the brand row under the notch so it doesn’t “drop down” later */
  .brand-row{
    padding-top: max(var(--menu-pad), env(safe-area-inset-top));
  }
}