/*
================================================================================
  baud9600-layout.css
  Baud 9600 — Sidebar layout layer
  Sits on top of existing Bootstrap + baud9600.css — only adds layout rules.

  BREAKPOINTS
  ─────────────────────────────────────────────────────────────────────────────
  < 768px   mobile   sidebar hidden, hamburger visible, no ad column
  768–1199  tablet   sidebar visible (collapsed icons), no ad column
  ≥ 1200px  desktop  full sidebar + right ad column

  CUSTOM PROPERTIES (override in :root to theme)
  ─────────────────────────────────────────────────────────────────────────────
  --sidebar-width          expanded sidebar width          220px
  --sidebar-collapsed-w    collapsed (icon-only) width     36px
  --ad-col-width           right ad column width           320px
  --topbar-h               header height                   46px
  --sidebar-bg             sidebar background              #f8f9fa
  --sidebar-border         sidebar border color            #dee2e6
  --sidebar-active-bg      active item background          #e7f0ff
  --site-blue              link / accent blue              #0d6efd
  --site-indigo            tool card purple                #5b50c8
================================================================================
*/

/* ── Custom properties ──────────────────────────────────── */
:root {
  --sidebar-width:       220px;
  --sidebar-collapsed-w: 36px;
  --ad-col-width:        320px;      /* 300px ad + 10px padding each side */
  --topbar-h:            46px;
  --sidebar-bg:          #f8f9fa;
  --sidebar-border:      #dee2e6;
  --sidebar-active-bg:   #e7f0ff;
  --site-blue:           #0d6efd;
  --site-indigo:         #5b50c8;
  --transition-speed:    0.15s;
}

/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }


/* ════════════════════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════════════════════ */
.site-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 200;
  background: #ffffff;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  text-decoration: none;
  flex: 1;
  white-space: nowrap;
}
.site-title:hover { color: #212529; text-decoration: none; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* hamburger — mobile only */
.sidebar-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 6px 0 0;
  color: #212529;
  line-height: 1;
}

/* desktop collapse toggle */
.sidebar-collapser {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #6c757d;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition-speed);
}
.sidebar-collapser:hover { color: var(--site-blue); }
/* flip arrow when collapsed */
.sidebar-collapsed .sidebar-collapser .collapser-icon::before { content: '›'; }
.site-topbar .collapser-icon { font-style: normal; }

/* language selector */
.lang-selector { position: relative; font-size: 0.875rem; cursor: pointer; }
.lang-dropdown {
  display: none;
  position: absolute;
  right: 0; top: 100%;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  padding: 4px 0;
  list-style: none;
  min-width: 120px;
  z-index: 300;
}
.lang-selector:hover .lang-dropdown { display: block; }
.lang-dropdown li a { display: block; padding: 4px 12px; font-size: 0.8rem; color: #212529; text-decoration: none; }
.lang-dropdown li a:hover { background: var(--sidebar-active-bg); }


/* ════════════════════════════════════════════════════════════
   LAYOUT WRAPPER — three-column flex
════════════════════════════════════════════════════════════ */
.layout-wrapper {
  display: flex;
  margin-top: var(--topbar-h);   /* push below fixed topbar */
  min-height: calc(100vh - var(--topbar-h));
}


/* ════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════ */
.site-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-speed);

  /* stick to viewport while content scrolls */
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

/* collapsed desktop state */
.sidebar-collapsed .site-sidebar {
  width: var(--sidebar-collapsed-w);
}

/* ── Sidebar search ───────────────────────────────────────
   Nikola search plugin renders {{ search_form }}.
   We style the generated <form> and <input> here.
──────────────────────────────────────────────────────────── */
.sidebar-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--sidebar-border);
  background: #fff;
}
.sidebar-search-wrap form { margin: 0; }
.sidebar-search-wrap input[type="text"],
.sidebar-search-wrap input[type="search"] {
  width: 100%;
  border: 1.5px solid #ced4da;
  border-radius: 4px;
  padding: 4px 8px 4px 28px;
  font-size: 0.875rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 8px center;
  transition: border-color 0.1s;
}
.sidebar-search-wrap input:focus {
  outline: none;
  border-color: var(--site-blue);
}
.sidebar-search-wrap button[type="submit"] {
  display: none; /* icon in input is enough; submit on Enter */
}

/* collapsed: hide search */
.sidebar-collapsed .sidebar-search-wrap { display: none; }

/* ── Sidebar navigation list ─────────────────────────────── */
.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

/* Category row */
.nav-cat-label {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
  cursor: pointer;
  text-decoration: none;
  color: #212529;
  font-weight: 600;
  font-size: 0.875rem;
  gap: 4px;
  transition: background var(--transition-speed);
}
.nav-cat-label:hover { background: #e9ecef; color: #212529; text-decoration: none; }
.nav-cat.active > .nav-cat-label { background: var(--sidebar-active-bg); color: var(--site-blue); }

.nav-cat-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-cat-count {
  font-size: 0.7rem;
  background: #dee2e6;
  border-radius: 10px;
  padding: 0 6px;
  color: #6c757d;
  font-weight: 400;
  white-space: nowrap;
}
.nav-cat.active .nav-cat-count { background: #c5d7ff; color: var(--site-blue); }

.nav-cat-arrow {
  font-size: 0.7rem;
  color: #6c757d;
  transition: transform var(--transition-speed);
  display: inline-block;
}
.nav-cat.active .nav-cat-arrow { transform: rotate(0deg); }
.nav-cat:not(.active) .nav-cat-arrow { transform: rotate(-90deg); }

/* Sub-list (tools under each category) */
.nav-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
.nav-sub-list.open { display: block; }

/* Sub-group label (e.g. "IP Addressing") */
.nav-subgroup-label {
  display: block;
  padding: 3px 10px 2px 14px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #6c757d;
  background: #e9ecef;
  border-bottom: 1px solid var(--sidebar-border);
}

/* Individual tool links */
.nav-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-tool a {
  display: block;
  padding: 4px 14px 4px 22px;
  font-size: 0.8rem;
  color: #212529;
  text-decoration: none;
  border-bottom: 1px solid var(--sidebar-border);
  border-left: 3px solid transparent;
  transition: background var(--transition-speed), border-left-color var(--transition-speed);
}
.nav-tool a:hover { background: #f0f4ff; color: var(--site-blue); text-decoration: none; }
.nav-tool.active a {
  background: var(--sidebar-active-bg);
  color: var(--site-blue);
  border-left-color: var(--site-blue);
  font-weight: 600;
}

/* Collapsed: hide labels, show category initials */
.sidebar-collapsed .nav-cat-label {
  justify-content: center;
  padding: 7px 0;
}
.sidebar-collapsed .nav-cat-name,
.sidebar-collapsed .nav-cat-count,
.sidebar-collapsed .nav-cat-arrow { display: none; }
.sidebar-collapsed .nav-cat-label::before {
  content: attr(data-initial);
  font-weight: 700;
  font-size: 0.9rem;
  color: #6c757d;
}
.sidebar-collapsed .nav-cat.active .nav-cat-label::before { color: var(--site-blue); }
.sidebar-collapsed .nav-sub-list { display: none !important; }


/* ════════════════════════════════════════════════════════════
   CONTENT AREA
════════════════════════════════════════════════════════════ */
.content-area {
  flex: 1;
  min-width: 0;          /* prevent flex blowout */
  padding: 0;
  overflow: auto;
}

/* ── Full-width app mode (page meta: full_width) ───────────────
   Interactive "app" tools (RF/survey) break out to viewport width and
   use viewport-fixed menus. base.tmpl drops the sidebar + ad column for
   these pages so the content area spans the full viewport, restoring the
   width those tools were designed for. */
.layout-wrapper--full .content-area {
  overflow-x: hidden;    /* tools manage their own horizontal scroll */
}

/* Top-anchored fixed panels/menus inside full-width app tools must clear the
   sticky topbar (.site-topbar is position:fixed, height var(--topbar-h),
   z-index 200). These panels sit at top:0 with a lower z-index, so the topbar
   would otherwise cover their headers/close buttons. The tool CSS is inline
   (per-translation), so this theme-level override (2-class specificity beats the
   inline top:0) fixes every language in one place. Class names below belong to
   the mobile WiFi survey tool. */
.layout-wrapper--full .signal-modal-overlay,
.layout-wrapper--full .settings-panel,
.layout-wrapper--full .points-panel {
  top: var(--topbar-h);
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-bar {
  padding: 5px 16px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  font-size: 0.8rem;
  color: #6c757d;
}
.breadcrumb-bar a { color: var(--site-blue); text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 4px; color: #ced4da; }


/* ════════════════════════════════════════════════════════════
   CATEGORY HUB PAGE LAYOUT
   (used by category_hub.html template)
════════════════════════════════════════════════════════════ */
.hub-page { padding: 16px 20px; }
.hub-title { font-size: 1.6rem; color: var(--site-blue); margin: 0 0 2px; }
.hub-subtitle { color: #6c757d; font-size: 0.9rem; margin: 0 0 20px; }

.hub-subgroup { margin-bottom: 22px; }
.hub-subgroup-title {
  font-size: 1rem;
  font-weight: 700;
  border-left: 4px solid var(--site-blue);
  padding-left: 10px;
  margin: 0 0 10px;
  color: #212529;
}

.hub-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.hub-tool-card {
  border: 1.5px solid var(--sidebar-border);
  border-radius: 5px;
  padding: 10px 12px;
  background: #fff;
  text-decoration: none;
  display: block;
  transition: border-color var(--transition-speed), background var(--transition-speed);
}
.hub-tool-card:hover {
  border-color: var(--site-blue);
  background: #f0f5ff;
  text-decoration: none;
}
.hub-tool-card-name {
  display: block;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--site-blue);
  margin-bottom: 3px;
}
.hub-tool-card-desc {
  display: block;
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.35;
}

.hub-related { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--sidebar-border); }
.hub-related-label { font-size: 0.75rem; color: #6c757d; margin-bottom: 6px; }
.hub-related-links { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-related-links a {
  font-size: 0.8rem;
  color: var(--site-blue);
  border: 1.5px solid var(--site-blue);
  border-radius: 3px;
  padding: 1px 8px;
  background: #e7f0ff;
  text-decoration: none;
}
.hub-related-links a:hover { background: var(--site-blue); color: #fff; text-decoration: none; }


/* ════════════════════════════════════════════════════════════
   TOOL / CALCULATOR PAGE
   Existing tool HTML/CSS is UNCHANGED.
   This only provides the page wrapper padding.
════════════════════════════════════════════════════════════ */
.tool-page { padding: 16px 20px; }
.tool-page h1 { font-size: 1.6rem; color: var(--site-blue); }


/* ════════════════════════════════════════════════════════════
   RIGHT AD COLUMN
════════════════════════════════════════════════════════════ */
.ad-column {
  width: var(--ad-col-width);
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sticky wrapper for the 300×600 unit */
.ad-300x600-sticky {
  position: sticky;
  top: calc(var(--topbar-h) + 270px); /* clear the 300×250 above + spacing */
}


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  padding: 10px 20px;
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════
   MOBILE BACKDROP
════════════════════════════════════════════════════════════ */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 149;
}
.sidebar-backdrop.visible { display: block; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════════════ */

/* ── Tablet: 768px–1199px ─────────────────────────────────
   Sidebar visible but collapsed to icons.
   Ad column hidden.
──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .ad-column { display: none; }
  .site-sidebar { width: var(--sidebar-collapsed-w); }
  /* apply collapsed rules without body class */
  .site-sidebar .sidebar-search-wrap { display: none; }
  .site-sidebar .nav-cat-name,
  .site-sidebar .nav-cat-count,
  .site-sidebar .nav-cat-arrow { display: none; }
  .site-sidebar .nav-cat-label {
    justify-content: center;
    padding: 7px 0;
  }
  .site-sidebar .nav-cat-label::before {
    content: attr(data-initial);
    font-weight: 700;
    font-size: 0.9rem;
    color: #6c757d;
  }
  .site-sidebar .nav-cat.active .nav-cat-label::before { color: var(--site-blue); }
  .site-sidebar .nav-sub-list { display: none !important; }
  .sidebar-collapser { display: none; }
}

/* ── Mobile: < 768px ──────────────────────────────────────
   Sidebar is a full-height drawer, hidden off-screen.
   Hamburger button visible in topbar.
   No ad column.
──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-hamburger { display: flex; }
  .sidebar-collapser  { display: none; }

  .site-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform var(--transition-speed);
    /* restore full sidebar on mobile drawer */
    border-right: 1px solid var(--sidebar-border);
  }
  /* override collapsed styles forced at tablet breakpoint */
  .site-sidebar .sidebar-search-wrap { display: block !important; }
  .site-sidebar .nav-cat-name,
  .site-sidebar .nav-cat-count,
  .site-sidebar .nav-cat-arrow { display: inline !important; }
  .site-sidebar .nav-cat-label { justify-content: flex-start !important; padding: 7px 10px !important; }
  .site-sidebar .nav-cat-label::before { display: none !important; }

  /* Open state — toggled by sidebar.js adding .sidebar-open to <body> */
  .sidebar-open .site-sidebar {
    transform: translateX(0);
  }
  .sidebar-open .sidebar-backdrop { display: block; }

  .ad-column { display: none; }
}