/* ===== Rec Shelf shell (non-invasive) ===== */
:root{
  --rec-header-h: 56px;
  --rec-sidebar-w: clamp(220px, 17vw, 280px);
  --rec-sidebar-w-collapsed: 72px;
  --rec-sidebar-w-current: var(--rec-sidebar-w);
  --admin-offset: 0px;
  --rec-header-h: 74px;
  --rec-content-gap: 10px;   /* adjust to match the “currently reading” gap */
  --rail-w: clamp(260px, 24vw, 420px);         /* width of the “Currently Reading” rail */
  --frame-gap: 24px;        /* gap between the main column and the rail */
  --rec-content-max: 1200px;/* max width of the center column */
  --author-gap: 24px; 

  /* No gap between sidebar and page canvas */
  --rec-canvas-gap: 0px;

    /* an upper bound the main column can grow to (optional, can tweak) */
  --rec-content-max: 1200px;

  --rec-bg: #202020; --rec-bg-soft:#242424; --rec-fg:#e9edf4; --rec-fg-dim:#9aa3af;
  --rec-border: 1px solid rgba(255,255,255,.07);
  --admin-offset: 0px;
}

/* Elementor header: fixed, full-bleed, above the sidebar */
body.rec-shell-on .elementor-location-header{
  position: fixed !important;
  top: var(--admin-offset, 0px);
  left: 0; right: 0;
  z-index: 60;                           /* above the sidebar (z 30) */
  min-height: var(--rec-header-h, 56px);
  display: grid; align-items: center;
  background: rgba(11,13,18,.95);        /* match your header tone */
  backdrop-filter: blur(10px);
  border-bottom: var(--rec-border);
}
body.rec-shell-off #rec-sidebar { display: none !important; }
body.rec-shell-off #page { margin-left: 0 !important; width: 100% !important; }
body.rec-shell-off #rec-header { left: 0 !important; }



/* Optional: keep the inner container centered with some breathing room */
body.rec-shell-on .elementor-location-header .elementor-container{
  margin: 0 auto;
  padding: 0 16px;
}

/* rail column has a fixed width driven by --rail-w */
.rec-rail { width: var(--rail-w); }

/* Admin bar offsets */
body.admin-bar { --admin-offset: 32px; }
@media (max-width: 782px){ body.admin-bar { --admin-offset: 46px; } }

/* Collapse switches the width variable */
body.rec--collapsed { --rec-sidebar-w-current: var(--rec-sidebar-w-collapsed); }

/* ===== Shell positions (scoped) ===== */
body.rec-shell-on header.site-header,     /* Hide Astra header to avoid double header */
body.rec-shell-on #masthead.site-header { display:none !important; }

body.rec-shell-on #rec-sidebar{
  position: fixed; z-index: 30;
  left: 0;
  /* start BELOW header (+ admin bar if present) */
  top: calc(var(--admin-offset, 0px) + var(--rec-header-h, 56px));

  width: var(--rec-sidebar-w-current);
  /* subtract header height too so the sidebar fills the remaining viewport */
  height: calc(100vh - var(--admin-offset, 0px) - var(--rec-header-h, 56px));

  background: var(--rec-bg); color: var(--rec-fg);
  border-right: var(--rec-border);
  display: flex; flex-direction: column;
  overflow: hidden; /* inner scroller handles scroll */
}

/* Inner scroll; expands as the sidebar grows */
.rec-sidebar__scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}


body.rec-shell-on #rec-header{
  position: fixed; z-index: 40;
  left: var(--rec-sidebar-w-current); right: 0;
  top: var(--admin-offset);
  height: var(--rec-header-h);
  display: grid; grid-template-columns: 1fr minmax(340px,700px) auto; align-items: center; gap: 12px;
  padding: 0 0; background: rgba(11,13,18,.85); backdrop-filter: blur(10px);
  border-bottom: var(--rec-border);
}




body.rec-shell-on #page {
  margin-left: var(--rec-sidebar-w-current);
  width: calc(100% - var(--rec-sidebar-w-current));
  box-sizing: border-box;
  padding-top: var(--rec-header-h);
}





/* Keep inner wrappers clean but allow them to center */
body.rec-shell-on #content,
body.rec-shell-on .site-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* Elementor: only center the outer document wrapper; don't kill inner paddings */
body.rec-shell-on .elementor {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* (intentionally no padding resets here) */


.rec-pin-btn.is-pinned i{ color:#ffd166; transform: rotate(-20deg); }


/* ===== Sidebar internals (unchanged visuals) ===== */
.rec-sidebar__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
.rec-brand{
  display:inline-flex;
  flex:0 0 40px;              /* <- lock width so it never squishes */
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
}
.rec-brand img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rec-toggle{
  margin-left:auto;
  flex:0 0 40px;              /* <- lock width so it can’t grow */
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  padding:0;                  /* <- remove padding that created a rectangle */
  background:transparent;
  line-height:1;
  font-size:18px;
  color:var(--rec-toggle-fg, #cfd8e3);
  border-radius:8px;          /* square with slightly rounded corners */
  cursor:pointer;
}
.rec-toggle:hover{
  background:rgba(255,255,255,.08);
}


.rec-sec{padding:10px 8px}
.rec-sec__title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rec-fg-dim);margin:6px 6px 8px}
.rec-list{list-style:none;margin:0;padding:0}
.rec-item a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--rec-fg);text-decoration:none}
.rec-item a:hover{background:var(--rec-bg-soft)}
.icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.04)}
.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--rec-fg-dim)}

.rec-nav{padding:8px}
.rec-menu{list-style:none;margin:0;padding:0}
.rec-menu > li > a{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--rec-fg);text-decoration:none}
.rec-menu > li > a:hover{background:var(--rec-bg-soft)}


/* Current page chip — grid: title row, then link + pin (fixed under top row) */
.rec-current{
  position: relative; top: 0; z-index: 2;
  margin: 8px; padding: 12px 12px;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 10px;
}
.rec-current .rec-sec__title{ grid-column: 1 / -1; margin: 0; white-space: nowrap; }
.rec-current__link{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--rec-fg); }
.rec-pin-btn { grid-column: 2; grid-row: 2; align-self: center; }



/* Unpin button (shows on hover) */
.rec-item { position: relative; }
.rec-unpin {
  position: absolute; top: 6px; right: 6px;
  border: 0; background: transparent; color: var(--rec-fg-dim);
  font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.rec-item:hover .rec-unpin { opacity: 1; }
body.rec--collapsed .rec-unpin, body.rec--collapsed .rec-pin-btn { display:none; } /* simplify mini mode */


/* Collapsed mini-rail: icons + section headings only */
body.rec--collapsed #rec-sidebar { width: var(--rec-sidebar-w-collapsed); }
body.rec--collapsed .label { display: none; }
body.rec--collapsed .rec-item a { justify-content: center; padding: 9px 8px; }
body.rec--collapsed .rec-menu > li > a { display: flex; justify-content: center; padding: 10px 8px; }

/* Keep section headings visible when collapsed */
body.rec--collapsed .rec-sec__title { display: block; }

.rec-sec__title{ 
  white-space: nowrap;           /* keep on one line in expanded mode */
}

/* Pin / Unpin buttons — bigger, centered, with subtle tooltip */
.rec-pin-btn,
.rec-unpin,
.rec-pin-mini{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--rec-fg);
  border: none; cursor: pointer;
}
.rec-pin-btn i,
.rec-unpin i,
.rec-pin-mini i{ font-size: 18px; line-height: 1; }

.rec-unpin{ position:absolute; top:6px; right:6px; }
.rec-pin-mini{ position:absolute; right:6px; top:50%; transform: translateY(-50%); opacity:0; }
.rec-item:hover .rec-pin-mini{ opacity:1; }

.rec-pin-btn:hover,
.rec-unpin:hover,
.rec-pin-mini:hover{ background: rgba(255,255,255,.12); }

/* Tooltip (uses aria-label text) */
.rec-pin-btn[aria-label]:hover::after,
.rec-unpin[aria-label]:hover::after,
.rec-pin-mini[aria-label]:hover::after{
  content: attr(aria-label);
  position: absolute;
  white-space: nowrap;
  top: -32px; right: 0;
  background: rgba(0,0,0,.85);
  color: #fff; font-size: 11px; line-height: 1;
  padding: 6px 8px; border-radius: 6px;
  pointer-events: none;
}


/* Tooltip (uses aria-label text) */
.rec-pin-btn[aria-label]:hover::after,
.rec-unpin[aria-label]:hover::after,
.rec-pin-mini[aria-label]:hover::after{
  content: attr(aria-label);
  position: absolute;
  white-space: nowrap;
  top: -32px; right: 0;
  background: rgba(0,0,0,.85);
  color: #fff; font-size: 11px; line-height: 1;
  padding: 6px 8px; border-radius: 6px;
  pointer-events: none;
}


/* Collapsed: show short heading + center the icon */
body.rec--collapsed .rec-current { padding: 8px; }
body.rec--collapsed .rec-current__row { justify-content: center; }
body.rec--collapsed .rec-pin-btn { display:none; }

/* Collapsed mini-rail labels (short, 1 word) */
body.rec--collapsed .rec-sec__title{
  position: relative;
  color: var(--rec-fg-dim);
  text-indent: -9999px; /* hide original text */
  height: 14px; line-height: 14px;
  margin: 6px 6px 8px;
}

body.rec--collapsed .rec-sec__title[data-key="current"]::after  { content: "Now"; }
body.rec--collapsed .rec-sec__title[data-key="pinned"]::after   { content: "Pins"; }
body.rec--collapsed .rec-sec__title[data-key="main"]::after     { content: "Main"; }
body.rec--collapsed .rec-sec__title[data-key="recent"]::after   { content: "Recent"; }
body.rec--collapsed .rec-sec__title[data-key="trending"]::after { content: "Trend"; }


/* Collapsed: short centered headings */
body.rec--collapsed .rec-sec__title{
  position:relative;
  color:var(--rec-fg-dim);
  text-indent:-9999px;
  height:14px; line-height:14px;
  margin:6px 0 8px;
}
body.rec--collapsed .rec-sec__title::after{
  position:absolute; left:50%; transform:translateX(-50%);
  text-indent:0; content:"";
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

/* Collapsed current chip: center icon only (already in your file, keep) */
body.rec--collapsed .rec-current .label{ display:none; }
body.rec--collapsed .rec-current__link{ justify-content:center; }



/* Keep content centered in collapsed; icons only, no overflow */
body.rec--collapsed .label{ display:none; }
body.rec--collapsed .rec-item a{ justify-content:center; padding:9px 8px; }
body.rec--collapsed .rec-menu > li > a{ display:flex; justify-content:center; padding:10px 8px; }


/* Emphasize MAIN menu */
.rec-sec[data-key="main"] .rec-menu > li > a{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
}
.rec-sec[data-key="main"] .rec-menu > li > a:hover{
  background: rgba(255,255,255,.10);
}

/* De-emphasize recent links slightly */
.rec-sec[data-key="recent"] .rec-item a{
  opacity: .85;
}
/* Top row fits logo + toggle inside the collapsed width */
body.rec--collapsed .rec-sidebar__top{ padding:0 6px; }
body.rec--collapsed .rec-brand__mark{ width:28px; height:28px; }
body.rec--collapsed .rec-toggle{
  width:28px; height:28px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}



/* Short, left-aligned section headings in collapsed */
body.rec--collapsed .rec-sec__title{
  position: relative;
  color: var(--rec-fg-dim);
  text-indent: -9999px;
  height: 14px; line-height: 14px;
  margin: 6px 6px 8px;
}

body.rec--collapsed .rec-sec__title[data-key="current"]::after  { content: "Now"; }
body.rec--collapsed .rec-sec__title[data-key="pinned"]::after   { content: "Pins"; }
body.rec--collapsed .rec-sec__title[data-key="main"]::after     { content: "Main"; }
body.rec--collapsed .rec-sec__title[data-key="recent"]::after   { content: "Recent"; }
body.rec--collapsed .rec-sec__title[data-key="trending"]::after { content: "Soon"; }

/* Hide long trending content in collapsed */
body.rec--collapsed .rec-sec[data-key="trending"] .rec-list{ display:none; }

/* Collapsed current chip: center icon only (no overflow) */
body.rec--collapsed .rec-current{ padding:8px; }
body.rec--collapsed .rec-current .label{ display:none; }
body.rec--collapsed .rec-current__link{ justify-content:center; }
body.rec--collapsed .rec-pin-btn{ display:none; }



/* Sleek custom scrollbar for the sidebar column */
.rec-sidebar__scroll{
  scrollbar-width: thin;                               /* Firefox */
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.rec-sidebar__scroll::-webkit-scrollbar{ width: 10px; } /* WebKit */
.rec-sidebar__scroll::-webkit-scrollbar-track{ background: transparent; }
.rec-sidebar__scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rec-sidebar__scroll::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
.rec-sidebar__scroll::-webkit-scrollbar-button{ display:none; }
.rec-pin-btn, .rec-unpin, .rec-pin-mini{ padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.rec-pin-btn i, .rec-unpin i, .rec-pin-mini i{ display:block; }
.rec-pin-btn{ justify-self:end; } /* keeps it snug on the right of the card */


/* === PROFILE (author) — equal gaps; main column grows with sidebar === */
body.rec-shell-on.author {
  /* Visual gaps you approved */
  --author-gap: 2px;  /* left gap next to the sidebar */
  --frame-gap: 2px;   /* gap between main column and the rail */
}

/* The page canvas already moves with the sidebar because #page uses
   margin-left: var(--rec-sidebar-w-current). From there we build a simple
   two-column grid: [main][rail], with a fixed rail width and equal gaps. */
body.rec-shell-on.author .rec-page-frame {
  display: grid;
  align-items: start;

  /* keep a constant left gap next to the sidebar */
  padding-left: var(--author-gap);
  padding-right: 0;

  /* two columns: main track + fixed rail */
  grid-template-columns:
    minmax(0, calc(100% - var(--rail-w) - var(--frame-gap)))
    var(--rail-w);

  gap: var(--frame-gap);

  /* we’re explicitly sizing tracks; don’t push grid around */
  justify-content: initial;
}

/* Don’t recenter/translate the inner box on profile – it causes the “hard
   up against the rail” look and fights the grid math. */
body.rec-shell-on.author .rec-page-inner {
  transform: none !important;
  max-width: var(--rec-content-max); /* optional cap so it doesn’t become too wide on huge screens */
}

/* The right rail lives in the second column. (The markup already matches,
   this line just makes the intent explicit and future-proof.) */
body.rec-shell-on.author .rec-rail-outside {
  grid-column: 2;
}
/* === PROFILE: responsive rail behavior (no overlap, consistent gap) === */
@media (max-width: calc(var(--rec-content-max) + var(--rail-w) + var(--frame-gap))) {
  /* One-column stack: main first, rail second */
  body.rec-shell-on.author .rec-page-frame {
    grid-template-columns: 1fr;
    /* keep the small left/right breathing room that matches your design */
    padding-left: max(8px, var(--author-gap));
    padding-right: max(8px, var(--author-gap));
  }

  /* Center column should not be translated at this breakpoint */
  body.rec-shell-on.author .rec-page-inner {
    max-width: 100%;
    transform: none !important;
  }

  /* Rail becomes a normal block below the main; never overlaps */
  body.rec-shell-on.author .rec-rail-outside {
    display: block !important;   /* override any earlier display:none */
    grid-column: 1;
    position: static;            /* drop sticky on small screens */
    top: auto;
    width: 100%;
    margin: 16px 0 0;            /* same visual gap as desktop */
  }

  /* Keep the rail card visually contained on phones */
  body.rec-shell-on.author .rec-rail-outside .rec-reading-card {
    max-width: 680px;
    margin: 0 auto;
    padding-inline: 12px;
  }
}
/* ====== SMART SIDEBAR UPGRADE ====== */

/* Drawer behavior on small screens */
@media (max-width:1100px){
  body.rec-shell-on #rec-sidebar{
    position: fixed;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
  }
  body.rec-shell-on.rec--drawer-open #rec-sidebar{
    transform: translateX(0);
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
  }
  /* Dim behind the drawer */
  body.rec-shell-on.rec--drawer-open::after{
    content:"";
    position: fixed;
    inset: var(--admin-offset,0) 0 0 0;
    background: rgba(0,0,0,.45);
    z-index: 25;
  }
  /* Content should span full width when the sidebar is a drawer */
  body.rec-shell-on #page{ margin-left:0; width:100%; }
  body.rec-shell-on #rec-header{ left:0; }
}

/* Collapsible sidebar sections (remembered in JS) */
.rec-sec__title{
  cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px;
}
.rec-sec__title::before{
  content:"▾"; font-size:12px; opacity:.6; transform:translateY(-1px);
}
.rec-sec[data-collapsed="1"] .rec-sec__title::before{ transform:rotate(-90deg); }
.rec-sec[data-collapsed="1"] .rec-list,
.rec-sec[data-collapsed="1"] .rec-nav{ display:none; }

/* Badges/counters (use data-count on <a>) */
#rec-sidebar a .badge{
  margin-left:auto;
  background:#ff7b72; color:#000;
  border-radius:999px; padding:0 8px;
  font-weight:700; font-size:11px; line-height:18px;
}

/* Flyout panel: when collapsed, hovering a section shows full content */
body.rec--collapsed .rec-flyout{
  position: fixed; z-index:50;
  min-width: 240px; max-width: 360px;
  background: var(--rec-bg);
  border: var(--rec-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  padding: 6px 6px 8px;
}
body.rec--collapsed .rec-flyout .rec-sec__title{
  margin: 4px 8px;
}
body.rec--collapsed .rec-flyout .rec-menu,
body.rec--collapsed .rec-flyout .rec-list{
  max-height: 60vh; overflow:auto;
}

/* Quick switcher (⌘/Ctrl-K) */
.rec-cmd{ position:fixed; inset:0; z-index:80; display:none; }
.rec-cmd.open{ display:block; }
.rec-cmd .shade{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.rec-cmd .panel{
  position:absolute; left:50%; top:15vh; transform:translateX(-50%);
  width:min(720px,92vw);
  background: var(--rec-bg); border: var(--rec-border); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.rec-cmd .search{
  width:100%; border:0; outline:0; background:transparent;
  padding:16px; color:var(--rec-fg); font-size:16px;
  border-bottom: var(--rec-border);
}
.rec-cmd ul{ list-style:none; margin:0; padding:6px; max-height:60vh; overflow:auto; }
.rec-cmd li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--rec-fg); text-decoration:none;
}
.rec-cmd li.is-active a{ background: var(--rec-bg-soft); }