/* Layout primitives — keeps within WP theme but improves spacing */

/* Orbit Theme layout system */
.shiftcontrol-app{
  --sc-shell-max: 1320px;
  --sc-left-w: 248px;
  --sc-right-w: 304px;
  --sc-gap: 18px;
  --sc-pad-x: 18px;
  --sc-pad-y: 18px;
  --sc-widget-radius: 18px;
  --sc-widget-pad: 16px;
  --sc-widget-bg: rgba(255,255,255,0.035);
  --sc-widget-border: rgba(255,255,255,0.08);
  --sc-widget-shadow: 0 10px 26px rgba(0,0,0,0.14);
}

/* SCC-TOPBAR-LAYOUT-HOTFIX-V1 (Orbit)
 * Prevent nav wrapping and ensure all topbar regions share one consistent row.
 */
.shiftcontrol-app .sc-topbar-inner{ justify-content: space-between !important; }
.shiftcontrol-app .sc-topbrand{ flex: 0 0 auto; }
.shiftcontrol-app .sc-topnav{
  flex: 1 1 auto !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden;
}
.shiftcontrol-app .sc-topbar-widgets{ flex: 0 0 auto !important; overflow: visible !important; min-width: auto !important; }

.scc-feed,
.scc-profile,
.scc-profile-feed,
.scc-notifications {
  margin: 22px auto;
  max-width: 860px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255,255,255,0.06);
}


/* When ShiftControl is rendered inside the Theme Controller shell, the main column must control width.
   The global page wrappers above provide a nice fallback for non-templated views, but within sc-shell they
   would incorrectly constrain the main feed into a narrow centered column. */
.shiftcontrol-app .sc-main-content .scc-feed,
.shiftcontrol-app .sc-main-content .scc-profile,
.shiftcontrol-app .sc-main-content .scc-profile-feed,
.shiftcontrol-app .sc-main-content .scc-notifications,
.shiftcontrol-app .sc-main-content .scc-settings {
  margin: 0;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.scc-feed-toolbar,
.scc-composer {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.scc-feed-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.scc-feed-sort-label {
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  margin-right: 6px;
}

.scc-feed-mode,
.scc-feed-sort {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
}

.scc-post-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.scc-comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

/* Theme Controller scaffold */
.shiftcontrol-app {
  margin: 0 auto;
  padding: 18px 16px 26px;
}

.shiftcontrol-app .sc-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 6px 16px;
  box-sizing: border-box;
}

.shiftcontrol-app .sc-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--sc-left-w) minmax(0, 1fr) var(--sc-right-w);
  gap: var(--sc-gap);
  max-width: var(--sc-shell-max);
  margin: 0 auto;
  align-items: start;
}

.shiftcontrol-app .sc-shell.sc-no-right { grid-template-columns: var(--sc-left-w) minmax(0, 1fr); }

.shiftcontrol-app .sc-shell.sc-no-left { grid-template-columns: minmax(0, 1fr) var(--sc-right-w); }

.shiftcontrol-app .sc-shell.sc-no-left.sc-no-right {
  grid-template-columns: minmax(0, 1fr);
}

.shiftcontrol-app .sc-col {
  min-width: 0;
}

.shiftcontrol-app .sc-main-content {
  margin: 0;
}

.shiftcontrol-app .sc-footer {
  max-width: 1240px;
  margin: 16px auto 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.shiftcontrol-app .sc-region {
  margin-bottom: 14px;
}

.shiftcontrol-app .sc-region-widget {
  background: var(--sc-widget-bg);
  border: 1px solid var(--sc-widget-border);
  border-radius: var(--sc-widget-radius);
  padding: var(--sc-widget-pad);
  box-shadow: var(--sc-widget-shadow);
}

.shiftcontrol-app .sc-widget-title {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.82);
}

.shiftcontrol-app .sc-navlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.shiftcontrol-app .sc-navlist li {
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: rgba(34, 211, 238, 0.06);
  color: rgba(255,255,255,0.88);
}

.shiftcontrol-app .sc-muted { color: rgba(255,255,255,0.62); }

.shiftcontrol-app .sc-hero h2 { margin: 0 0 8px 0; font-size: 22px; }
.shiftcontrol-app .sc-hero p { margin: 0 0 12px 0; color: rgba(255,255,255,0.72); }
.shiftcontrol-app .sc-cta {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(34,211,238,0.35);
  background: rgba(34,211,238,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 650;
}


/* De-WP the look of core blocks when they appear inside ShiftControl widgets */
.shiftcontrol-app .sc-region-widget .wp-block-heading{
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}
.shiftcontrol-app .sc-region-widget ul,
.shiftcontrol-app .sc-region-widget ol{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.78);
}
.shiftcontrol-app .sc-region-widget li{ margin: 6px 0; }
.shiftcontrol-app .sc-region-widget a{ color: rgba(255,255,255,0.88); text-decoration: none; }
.shiftcontrol-app .sc-region-widget a:hover{ text-decoration: underline; }
.shiftcontrol-app .sc-muted{ color: rgba(255,255,255,0.70); }


/* SCC-STICKY-RAILS-V1 */
/* Sticky navigation + rails (keeps social actions accessible) */
.shiftcontrol-app { --sc-sticky-top: 14px; --sc-topbar-h: 48px; padding-top: calc(var(--sc-topbar-h) + 18px); }

.shiftcontrol-app .sc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  padding: 0;
  background: rgba(11, 18, 32, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.shiftcontrol-app .sc-col.sc-left,
.shiftcontrol-app .sc-col.sc-right {
  position: sticky;
  top: var(--sc-sticky-top);
  align-self: start;
  max-height: calc(100vh - (var(--sc-sticky-top) * 2));
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 12px;
  z-index: 5;
  pointer-events: auto;
}

/* Avoid “scroll fade” feel by keeping rails fully opaque */
.shiftcontrol-app .sc-col.sc-left,
.shiftcontrol-app .sc-col.sc-right,
.shiftcontrol-app .sc-region-widget { opacity: 1 !important; transform: none !important; }

/* Subtle scrollbar (optional) */
.shiftcontrol-app .sc-col.sc-left::-webkit-scrollbar,
.shiftcontrol-app .sc-col.sc-right::-webkit-scrollbar { width: 8px; }
.shiftcontrol-app .sc-col.sc-left::-webkit-scrollbar-thumb,
.shiftcontrol-app .sc-col.sc-right::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}
.shiftcontrol-app .sc-col.sc-left::-webkit-scrollbar-track,
.shiftcontrol-app .sc-col.sc-right::-webkit-scrollbar-track { background: transparent; }

/* SCC-READABILITY-BUMP-V1 */
/* Readability bump (free must look premium) */
.shiftcontrol-app {
  --sc-widget-bg: rgba(255,255,255,0.055);
  --sc-widget-border: rgba(255,255,255,0.10);
  --sc-widget-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.shiftcontrol-app .sc-widget-title { color: rgba(255,255,255,0.82); }
.shiftcontrol-app .sc-region-widget { background: var(--sc-widget-bg); }


/* SCC-LAYOUT-REBALANCE-V1 */
/* Desktop grid dimensions (Facebook-style): strong left rail, readable feed, optional right rail */
.shiftcontrol-app {
  --sc-gap: 12px;
  --sc-left-w: 260px;
  --sc-main-w: 680px;
  --sc-right-w: 320px;
  --sc-shell-max: 1360px;
}

/* Make the main column a stable readable width, not a shrinking 1fr */
.shiftcontrol-app .sc-shell {
  grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w)) var(--sc-right-w);
}

/* When right rail is hidden, reclaim space */
.shiftcontrol-app .sc-shell.sc-no-right {
  grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w));
}

/* When left rail is hidden, reclaim space */
.shiftcontrol-app .sc-shell.sc-no-left {
  grid-template-columns: minmax(0, var(--sc-main-w)) var(--sc-right-w);
}

/* When both rails hidden */
.shiftcontrol-app .sc-shell.sc-no-left.sc-no-right {
  grid-template-columns: minmax(0, var(--sc-main-w));
}

/* Topbar: full width bar, centered inner content aligned to shell */
.shiftcontrol-app .sc-topbar { height: auto; min-height: var(--sc-topbar-h, 48px); }
.shiftcontrol-app .sc-topbar-inner {
  max-width: var(--sc-shell-max);
  margin: 0 auto;
  padding: 6px 16px;
  display: grid;
  grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w)) var(--sc-right-w);
  gap: var(--sc-gap);
  box-sizing: border-box;
}

/* If rails are suppressed for a view, keep topbar aligned */
.shiftcontrol-app .sc-no-right ~ .sc-topbar .sc-topbar-inner,
.shiftcontrol-app .sc-topbar-inner.sc-no-right {
  grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w));
}
.shiftcontrol-app .sc-no-left ~ .sc-topbar .sc-topbar-inner,
.shiftcontrol-app .sc-topbar-inner.sc-no-left {
  grid-template-columns: minmax(0, var(--sc-main-w)) var(--sc-right-w);
}

/* Responsive: collapse right rail earlier, keep feed comfortable */
@media (max-width: 1180px) {
  .shiftcontrol-app { --sc-right-w: 0px; --sc-shell-max: 980px; }
  .shiftcontrol-app .sc-shell { grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w)); }
  .shiftcontrol-app .sc-topbar-inner { grid-template-columns: var(--sc-left-w) minmax(0, var(--sc-main-w)); }
  .shiftcontrol-app .sc-col.sc-right { display: none; }
}

/* Responsive: collapse left rail on smaller screens */
@media (max-width: 920px) {
  .shiftcontrol-app { --sc-left-w: 0px; --sc-shell-max: 760px; --sc-main-w: min(680px, 100vw); }
  .shiftcontrol-app .sc-shell { grid-template-columns: minmax(0, 1fr); }
  .shiftcontrol-app .sc-topbar-inner { grid-template-columns: 1fr; }
  .shiftcontrol-app .sc-col.sc-left { display: none; }
}


/* SCC-TOPBAR-SPACING-V1 */
.shiftcontrol-app .sc-shell { margin-top: 8px; }

/* SCC-TOPNAV-STYLES-V1 */
.shiftcontrol-app .sc-topnav {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.shiftcontrol-app .sc-topnav-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1;
}
.shiftcontrol-app .sc-topnav-link:hover {
  background: rgba(255,255,255,0.08);
}

/* SCC-ADMINBAR-OFFSET-V1 */
body.admin-bar .shiftcontrol-app .sc-topbar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .shiftcontrol-app .sc-topbar { top: 46px; }
}

/* SCC-PADDING-TOP-V2 */
.shiftcontrol-app { --sc-adminbar-h: 0px; }
body.admin-bar .shiftcontrol-app { --sc-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar .shiftcontrol-app { --sc-adminbar-h: 46px; } }
.shiftcontrol-app { padding-top: calc(var(--sc-topbar-h, 48px) + var(--sc-adminbar-h) + 18px); }

/* SCC-TOPBAR-VISIBILITY-V1 */
.shiftcontrol-app .sc-topbar {
  background: rgba(17, 24, 39, 0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.shiftcontrol-app .sc-topbar-inner {
  align-items: center;
}
.shiftcontrol-app .sc-topbar-widgets {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}


/* SCC-TOPBAR-VISIBILITY-V2 */
.shiftcontrol-app { --sc-topbar-h: 48px; padding-top: calc(var(--sc-topbar-h) + 18px); }
.shiftcontrol-app .sc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sc-topbar-h);
  z-index: 240;
  background: rgba(17, 24, 39, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.shiftcontrol-app .sc-topbar-inner {
  height: 100%;
  max-width: var(--sc-shell-max, 1360px);
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}
.shiftcontrol-app .sc-topnav { display: flex; align-items: center; gap: 14px; height: 100%; }
.shiftcontrol-app .sc-topnav-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.86);
  font-weight: 650;
  font-size: 13px;
}
.shiftcontrol-app .sc-topnav-link:hover { background: rgba(255,255,255,0.08); }
.shiftcontrol-app .sc-topbar-widgets { display: flex; align-items: center; gap: 10px; }

/* SCC-ADMINBAR-STICKY-OFFSET-V1 */
/* Ensure sticky rails and content never sit under WP admin bar or ShiftControl topbar */
.shiftcontrol-app {
  --sc-adminbar-h: 0px;
  --sc-topbar-h: 48px;
  --sc-topbar-gap: 18px;
  --sc-sticky-top: calc(var(--sc-adminbar-h) + var(--sc-topbar-h) + var(--sc-topbar-gap));
  padding-top: calc(var(--sc-adminbar-h) + var(--sc-topbar-h) + var(--sc-topbar-gap));
}

body.admin-bar .shiftcontrol-app { --sc-adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar .shiftcontrol-app { --sc-adminbar-h: 46px; }
}

.shiftcontrol-app .sc-topbar {
  top: var(--sc-adminbar-h) !important;
  height: var(--sc-topbar-h);
}

.shiftcontrol-app .sc-col.sc-left,
.shiftcontrol-app .sc-col.sc-right {
  top: calc(var(--sc-sticky-top) + 8px) !important;
  max-height: calc(100vh - (var(--sc-sticky-top) + 18px)) !important;
}

/* Ensure topbar never crowds the first row */
.shiftcontrol-app .sc-shell { margin-top: 10px !important; }

/* SCC-GEOMETRY-SAFETY-V1 */
.shiftcontrol-app * { box-sizing: border-box; }
.shiftcontrol-app .sc-region-widget { overflow: hidden; }
.shiftcontrol-app .sc-topbar-inner { overflow: visible; }
.shiftcontrol-app .sc-topnav { flex-wrap: wrap; }
.shiftcontrol-app .sc-topbar-widgets { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.shiftcontrol-app .sc-topbar-widgets > * { min-width: 0; }
.shiftcontrol-app button, .shiftcontrol-app .button, .shiftcontrol-app a.sc-topnav-link { max-width: 100%; }

/* SCC-TOPBRAND-V1 */
.shiftcontrol-app .sc-topbar-inner { justify-content: flex-start; }
.shiftcontrol-app .sc-topbrand { display:flex; align-items:center; gap: 10px; margin-right: 14px; flex: 0 0 auto; }
.shiftcontrol-app .sc-topbrand a { color: rgba(255,255,255,0.90); text-decoration:none; }
.shiftcontrol-app .sc-topbrand img { max-height: 28px; width:auto; display:block; }
.shiftcontrol-app .sc-topbrand .custom-logo-link { display:inline-flex; align-items:center; }
.shiftcontrol-app .sc-topbrand-text { font-weight: 750; letter-spacing: 0.2px; }
.shiftcontrol-app .sc-topnav { margin-right: auto; }


/* SCC_TOPBRAND_LOGO_SLOT_V1: reserve visual space for a logo/wordmark */
.shiftcontrol-app .sc-topbrand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  overflow: hidden;
}
.shiftcontrol-app .sc-topbrand .custom-logo-link,
.shiftcontrol-app .sc-topbrand a.custom-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.shiftcontrol-app .sc-topbrand .custom-logo {
  max-height: 28px;
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}
.shiftcontrol-app .sc-topbrand-text {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
}
.shiftcontrol-app .sc-topbrand-text::before {
  content: "SC";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}


/* SCC_TOPBAR_LOGO_SLOT_V2: branded logo/wordmark slot */
.shiftcontrol-app .sc-topbrand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width: 200px;
  max-width: 100%;
}
.shiftcontrol-app .sc-topbrand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.90);
  flex: 0 0 auto;
}
.shiftcontrol-app .sc-topbrand-word{
  font-weight: 750;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* SCC-TOPBAR-STABLE-GRID-V1
   Keep top navigation perfectly stable between pages by using equal-width side columns.
   Prevents perceived "toolbar shift" when page content/rails change. */
.shiftcontrol-app { --sc-topbar-side-w: 260px; }

.shiftcontrol-app .sc-topbar-inner{
  display: grid !important;
  grid-template-columns: var(--sc-topbar-side-w) minmax(0, 1fr) var(--sc-topbar-side-w) !important;
  align-items: center;
}

.shiftcontrol-app .sc-topbrand{
  width: 100%;
  justify-self: start;
}

.shiftcontrol-app .sc-topnav{
  position: static !important;
  transform: none !important;
  left: auto !important;
  justify-self: center;
  justify-content: center;
}

.shiftcontrol-app .sc-topbar-widgets{
  width: 100%;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
}

/* Narrow screens: allow natural flow */
@media (max-width: 920px){
  .shiftcontrol-app .sc-topbar-inner{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .shiftcontrol-app .sc-topbar-widgets{
    justify-content: flex-start;
  }
}

/* SCC-PROFILE-SHELL-COVER-V1
   Full-shell cover that spans left/main/right columns on Profile.
   Height target: ~1/3 of width (aspect 3:1), bounded for usability.
*/
.shiftcontrol-app[data-sc-shell-cover="1"] .sc-shell-cover{
  pointer-events: none;
  z-index: 0;
  grid-column: 1 / -1;
  width: 100%;
  background: linear-gradient(135deg, rgba(9,18,33,0.85), rgba(17,32,68,0.55));
  aspect-ratio: 3 / 1;
  min-height: 160px;
  max-height: 360px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  margin-bottom: var(--sc-gap);
}
.shiftcontrol-app[data-sc-shell-cover="1"] .sc-shell-cover::after{
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0.25), rgba(11,18,32,0.70));
}
/* Hide the inline profile cover when the shell cover is present */
.shiftcontrol-app[data-sc-shell-cover="1"] .scc-profile__cover,
.shiftcontrol-app[data-sc-shell-cover="1"] .scc-cover{
  display: none !important;
}