/*
Theme Name: Stumate
Theme URI: https://bullioninfo.co.uk
Author: Stuart
Author URI: https://bullioninfo.co.uk
Description: A stylish, fully-customisable Gutenberg magazine theme with light/dark modes, carousel, ticker, breadcrumbs, sidebar layouts, and advanced header options.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stumate
Tags: magazine, news, blog, gutenberg, dark-mode, customizer, two-columns, three-columns, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, sticky-post, translation-ready
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (overridden by Customizer JS)
   ============================================================ */
:root {
  /* Light Mode – red, white and black */
  --sm-bg:             #ffffff;
  --sm-surface:        #f5f5f5;
  --sm-surface2:       #ebebeb;
  --sm-text:           #111111;
  --sm-text-muted:     #555555;
  --sm-accent:         #e63946;
  --sm-accent2:        #c0202e;
  --sm-border:         #dddddd;
  --sm-header-bg:      #111111;
  --sm-header-text:    #ffffff;
  --sm-nav-bg:         #e63946;
  --sm-nav-text:       #ffffff;
  --sm-nav-hover:      #c0202e;
  --sm-ticker-bg:      #d8d8d8;
  --sm-ticker-text:    #444444;
  --sm-ticker-label:   #e63946;
  --sm-footer-bg:      #f1f1f1;
  --sm-footer-text:    #444444;
  --sm-footer-heading: #111111;
  --sm-card-shadow:    0 4px 24px rgba(0,0,0,.22);
}

/* Dark Mode – black, greys, red and white */
body.sm-dark {
  --sm-bg:             #333333;
  --sm-surface:        #2a2a2a;
  --sm-surface2:       #1a1a1a;
  --sm-text:           #e8e8f0;
  --sm-text-muted:     #9ca3af;
  --sm-border:         #2a2a2a;
  --sm-card-bg:        #111111;
  --sm-card-shadow:    0 2px 12px rgba(0,0,0,.5);
  --sm-link:           #7bbfea;
  --sm-link-hover:     #a8d4f5;
  --sm-accent:         #e63946;
  --sm-header-bg:      #111111;
  --sm-header-text:    #ffffff;
  --sm-nav-bg:         #e63946;
  --sm-nav-text:       #ffffff;
  --sm-ticker-bg:      #9b9292;
  --sm-ticker-text:    #ffffff;
  --sm-ticker-label:   #e63946;
  --sm-footer-bg:      #0a0a0a;
  --sm-footer-text:    #aaaaaa;
  --sm-footer-heading: #ffffff;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  background: var(--sm-bg);
  color: var(--sm-text);
  font-family: var(--sm-font-body);
  line-height: 1.7;
  transition: background var(--sm-transition), color var(--sm-transition);
  width: 100%;
  overflow-x: hidden;
}

a {
  color: var(--sm-link);
  text-decoration: none;
  transition: color var(--sm-transition);
}
a:hover { color: var(--sm-link-hover); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sm-font-heading);
  line-height: 1.25;
  color: var(--sm-text);
}

ul { list-style: none; }

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
.sm-site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: var(--sm-footer-bg);
}

.sm-container {
  width: 100%;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   HEADER
   ============================================================ */
#sm-header {
  background: var(--sm-header-bg);
  color: var(--sm-header-text);
  position: relative;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
  transition: background var(--sm-transition);
}
body.sm-sticky-header #sm-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sm-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  position: relative;
}
.sm-logo-wrap { justify-self: start; }
.sm-site-identity { justify-self: center; text-align: center; }
.sm-header-controls { justify-self: end; }

/* Logo */
.sm-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sm-logo-wrap img {
  width: 128px;
  height: 128px;
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
  border-radius: var(--sm-radius);
  /* Use high-quality downscaling so the displayed logo is crisp and
     zooming in remains sharp because the source image is full-res. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}
.sm-logo-text {
  display: none;
}
.sm-logo-text .site-name {
  font-family: var(--sm-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sm-header-text);
  letter-spacing: -0.02em;
}
.sm-logo-text .site-tagline {
  font-size: 0.75rem;
  color: rgba(255,255,255,.65);
  letter-spacing: 0.05em;
}

/* Site identity – middle (always shown, centred via grid) */
.sm-site-identity {
  text-align: center;
  pointer-events: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2;
  min-width: 0;
}
/* Override any WordPress hiding when custom logo is set */
.wp-custom-logo .sm-site-identity { display: block !important; }
.wp-custom-logo .sm-site-title { display: block !important; }
.wp-custom-logo .sm-tagline { display: block !important; }
/* Customiser toggles */
.sm-hide-title .sm-site-title { display: none !important; }
.sm-hide-tagline .sm-tagline { display: none !important; }
.sm-site-identity a { pointer-events: all; }
/* Force title colour with maximum specificity */
body #sm-header .sm-header-inner .sm-site-identity .sm-site-title,
body #sm-header .sm-header-inner .sm-site-identity .sm-site-title a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  font-family: var(--sm-font-heading);
  font-size: clamp(1rem, 2.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}
body #sm-header .sm-header-inner .sm-site-identity .sm-tagline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

@media (min-width: 769px) {
  body #sm-header .sm-header-inner .sm-site-identity .sm-site-title,
  body #sm-header .sm-header-inner .sm-site-identity .sm-site-title a {
    font-size: clamp(1.8rem, 3vw, 3.2rem);
  }
  body #sm-header .sm-header-inner .sm-site-identity .sm-tagline {
    font-size: clamp(0.8rem, 1.2vw, 1.05rem);
  }
}

/* Right controls */
.sm-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Search toggle */
.sm-search-toggle,
.sm-dark-toggle,
.sm-burger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sm-header-text);
  padding: 8px;
  border-radius: var(--sm-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sm-transition);
  font-size: 1.1rem;
}
.sm-search-toggle:hover,
.sm-dark-toggle:hover,
.sm-burger:hover {
  background: rgba(255,255,255,.15);
}
.sm-search-toggle:active,
.sm-dark-toggle:active,
.sm-burger:active {
  background: rgba(255,255,255,.15);
}


/* Inline search bar (header) */
.sm-header-search {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--sm-surface2);
  padding: 14px 20px;
  display: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sm-header-search.open { display: flex; gap: 10px; }
.sm-header-search input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-bg);
  color: var(--sm-text);
  font-size: 1rem;
}
.sm-header-search button {
  padding: 10px 18px;
  background: var(--sm-accent);
  color: #fff;
  border: none;
  border-radius: var(--sm-radius);
  cursor: pointer;
  font-weight: 700;
}

/* Dark mode toggle icon */
.sm-dark-toggle .sm-icon-sun  { display: none; }
.sm-dark-toggle .sm-icon-moon { display: block; }
body.sm-dark .sm-dark-toggle .sm-icon-sun  { display: block; }
body.sm-dark .sm-dark-toggle .sm-icon-moon { display: none; }

/* Hamburger */
.sm-burger svg { width: 24px; height: 24px; }

/* ============================================================
   NAVIGATION BAR (desktop)
   ============================================================ */
#sm-navbar {
  background: var(--sm-nav-bg);
  color: var(--sm-nav-text);
  position: relative;
  transition: background var(--sm-transition);
}
.sm-nav-inner {
  display: flex;
  align-items: stretch;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 0 20px 0 0;
  position: relative;
}

/* Horizontal scroll wrapper for menu */
.sm-nav-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  position: relative;
}
.sm-nav-scroll::-webkit-scrollbar { display: none; }

/* Left fade — appears when scrolled past the start so content fades into
   the left edge instead of being abruptly cut off */
.sm-nav-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, var(--sm-nav-bg) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.sm-nav-inner.has-scroll-left::before { opacity: 1; }

/* Right-pointing scroll hint */
.sm-nav-scroll-hint {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--sm-nav-text);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sm-nav-inner.has-scroll-right .sm-nav-scroll-hint { opacity: 0.85; }
.sm-nav-inner.has-scroll-right .sm-nav-scroll-hint svg {
  animation: sm-nav-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes sm-nav-hint-pulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* Top-level UL: single line, no wrap */
#sm-navbar > .sm-nav-inner .sm-nav-scroll > ul,
#sm-navbar > .sm-nav-inner > ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}
#sm-navbar ul li {
  flex-shrink: 0;
  position: relative;
}

/* Leaf links (top-level items without children) */
#sm-navbar ul li > a {
  display: block;
  padding: 13px 18px;
  color: var(--sm-nav-text);
  text-decoration: none;
  font-family: var(--sm-font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background var(--sm-transition);
}
#sm-navbar ul li > a:hover,
#sm-navbar ul li.current-menu-item > a {
  background: rgba(0,0,0,.2);
}

/* Parent items: label span + toggle button (mobile pattern) */
#sm-navbar .sm-nav-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 18px;
}
#sm-navbar .sm-nav-label {
  color: var(--sm-nav-text);
  font-family: var(--sm-font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 13px 0;
}
#sm-navbar .sm-nav-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--sm-nav-text);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 12px 0 4px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
#sm-navbar .sm-nav-toggle:hover {
  border-color: var(--sm-nav-text);
  background: rgba(0,0,0,0.2);
}
#sm-navbar .sm-nav-toggle[aria-expanded="true"] {
  border-color: var(--sm-nav-text);
}
#sm-navbar .sm-nav-toggle:active { transform: scale(0.92); }
#sm-navbar .sm-nav-chevron {
  transition: transform 0.25s ease;
}
#sm-navbar ul > li.is-open > .sm-nav-parent .sm-nav-chevron {
  transform: rotate(-180deg);
}

/* Highlight open parent row */
#sm-navbar ul li.is-open > .sm-nav-parent {
  background: rgba(0,0,0,.2);
}


/* Nav extras (search, dark, bookmark) */
.sm-nav-extras {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sm-nav-search,
.sm-nav-bookmark,
#sm-navbar .sm-dark-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--sm-nav-text);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--sm-transition);
}
.sm-nav-search:hover,
.sm-nav-bookmark:hover,
#sm-navbar .sm-dark-toggle:hover {
  background: rgba(0,0,0,0.2);
}
#sm-navbar .sm-dark-toggle .sm-icon-sun { display: none; }
body.sm-dark #sm-navbar .sm-dark-toggle .sm-icon-sun { display: inline; }
body.sm-dark #sm-navbar .sm-dark-toggle .sm-icon-moon { display: none; }


/* Mobile menu overlay */
#sm-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 1100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Hide back-to-top button while menu is open */
body.sm-mobile-menu-open #sm-stt {
  display: none !important;
}
#sm-mobile-menu.open { display: flex; }

/* ── Dropdown style mobile menu ── */
.sm-mobile-panel {
  width: min(340px, 90vw);
  height: 100%;
  background: var(--sm-mobile-menu-bg, var(--sm-surface));
  color: var(--sm-mobile-menu-text, var(--sm-text));
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease;
  position: relative;
}
.sm-mobile-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Extra bottom padding so the visible area effectively shows one fewer
     row than the maximum that would fit. Auto-scroll then lands on a row
     boundary cleanly — no half-cut last row, no fitting adjustment. */
  padding: 24px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sm-mobile-scroll::-webkit-scrollbar {
  display: none;
}
.sm-mobile-panel::-webkit-scrollbar {
  display: none;
}

/* "Scroll for more" text indicator */
.sm-mobile-more-hint {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  text-align: center;
  font-family: var(--sm-font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sm-mobile-hint-text, var(--sm-text-muted));
  pointer-events: none;
  z-index: 2;
}
/* Show hint only if customiser allows it */
body.sm-mobile-overflow-hint .sm-mobile-more-hint.is-visible,
body.sm-mobile-overflow-both .sm-mobile-more-hint.is-visible {
  display: block;
  animation: smMoreHintBounce 1.6s ease-in-out infinite;
}
.sm-mobile-more-hint::after {
  content: ' ⌄';
  display: inline-block;
  margin-left: 4px;
  transform: translateY(-3px);
  font-size: 1.2rem;
  line-height: 0;
}
@keyframes smMoreHintBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* Fade at bottom of mobile menu - absolute overlay at panel bottom */
.sm-mobile-fade {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--sm-mobile-menu-bg, var(--sm-surface)) 100%);
  z-index: 1;
  transition: opacity 0.4s ease;
}
body.sm-mobile-overflow-fade #sm-mobile-menu.open .sm-mobile-fade,
body.sm-mobile-overflow-both #sm-mobile-menu.open .sm-mobile-fade {
  display: block;
  opacity: 0;
}
body.sm-mobile-overflow-fade #sm-mobile-menu.open.show-fade .sm-mobile-fade,
body.sm-mobile-overflow-both #sm-mobile-menu.open.show-fade .sm-mobile-fade {
  opacity: 1;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── Centre Modal Mobile Menu ── */
body.sm-mobile-menu-centre #sm-mobile-menu {
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body.sm-mobile-menu-centre .sm-mobile-panel {
  width: min(480px, 92vw);
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--sm-radius);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: smCentreModalIn 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
body.sm-mobile-menu-centre .sm-mobile-scroll {
  padding: 32px 28px;
  max-height: 90vh;
}
@keyframes smCentreModalIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
body.sm-mobile-menu-centre #sm-mobile-menu.open { display: flex; }

/* ── Full Screen Takeover ── */
body.sm-mobile-menu-fullscreen #sm-mobile-menu {
  background: var(--sm-bg);
  backdrop-filter: none;
}
body.sm-mobile-menu-fullscreen .sm-mobile-panel {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  animation: smFullscreenIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: center;
  --sm-mobile-menu-bg: var(--sm-bg);
}
body.sm-mobile-menu-fullscreen .sm-mobile-scroll {
  padding: 60px 40px 40px;
  gap: 32px;
  text-align: center;
}
body.sm-mobile-menu-fullscreen .sm-mobile-scroll #sm-mobile-nav {
  align-self: center;
}
body.sm-mobile-menu-fullscreen .sm-mobile-panel #sm-mobile-nav,
body.sm-mobile-menu-fullscreen .sm-mobile-panel .menu {
  width: 100%;
}
body.sm-mobile-menu-fullscreen .sm-mobile-panel a {
  font-family: var(--sm-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
@keyframes smFullscreenIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Bottom Sheet ── */
body.sm-mobile-menu-bottom #sm-mobile-menu {
  align-items: flex-end;
}
body.sm-mobile-menu-bottom .sm-mobile-panel {
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 20px 20px 0 0;
  padding: 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  animation: smBottomSheetIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
body.sm-mobile-menu-bottom .sm-mobile-scroll {
  max-height: 80vh;
  padding: 12px 24px 32px;
}
@keyframes smBottomSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Glassmorphism Panel ── */
body.sm-mobile-menu-glass #sm-mobile-menu {
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
}
body.sm-mobile-menu-glass .sm-mobile-panel {
  width: min(380px, 92vw);
  margin-left: auto;
  background: rgba(20, 20, 28, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
}
body:not(.sm-dark).sm-mobile-menu-glass .sm-mobile-panel {
  background: rgba(245, 245, 250, 0.55);
  border-left: 1px solid rgba(255,255,255,0.4);
}
body.sm-mobile-menu-glass .sm-mobile-panel a {
  color: var(--sm-text);
}
.sm-mobile-close {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--sm-mobile-menu-text, var(--sm-text));
}
.sm-mobile-search input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-bg);
  color: var(--sm-text);
  font-size: 0.95rem;
}
.sm-mobile-dark-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
}
/* In the mobile panel the bg is --sm-surface not the header, so override colour */
.sm-mobile-dark-row .sm-dark-toggle { color: var(--sm-text); }
.sm-mobile-dark-row .sm-dark-toggle:hover { background: rgba(128,128,128,0.15); }

.sm-mobile-dark-row .sm-mobile-bookmark {
  color: var(--sm-text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sm-radius);
  transition: background var(--sm-transition), color var(--sm-transition);
}
.sm-mobile-dark-row .sm-mobile-bookmark,
.sm-mobile-dark-row .sm-mobile-bookmark:visited,
.sm-mobile-dark-row .sm-mobile-bookmark:hover,
.sm-mobile-dark-row .sm-mobile-bookmark:active { color: var(--sm-text) !important; }
.sm-mobile-dark-row .sm-mobile-bookmark:hover { background: rgba(128,128,128,0.15); }
.sm-mobile-bookmark { color: var(--sm-text) !important; }
.sm-mobile-bookmark:hover { color: var(--sm-accent) !important; background: rgba(128,128,128,0.15); }
#sm-mobile-nav ul { display: flex; flex-direction: column; }

/* Parent row: label + plus button */
#sm-mobile-nav .sm-mob-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sm-border);
  padding: 0;
  min-height: 48px;
  box-sizing: border-box;
}
#sm-mobile-nav .sm-mob-label {
  font-family: var(--sm-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sm-mobile-menu-text, var(--sm-text));
  padding: 0;
  flex: 1;
  letter-spacing: 0.02em;
}
/* Subtle toggle - bordered circle with darker grey fill */
#sm-mobile-nav .sm-mob-toggle {
  background: rgba(128, 128, 128, 0.25);
  border: 1px solid var(--sm-border);
  color: var(--sm-text-muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
}
#sm-mobile-nav .sm-mob-toggle:hover {
  border-color: var(--sm-mobile-menu-accent, var(--sm-accent));
  color: var(--sm-mobile-menu-accent, var(--sm-accent));
}
#sm-mobile-nav .sm-mob-toggle[aria-expanded="true"] {
  border-color: var(--sm-mobile-menu-accent, var(--sm-accent));
  color: var(--sm-mobile-menu-accent, var(--sm-accent));
}
#sm-mobile-nav .sm-mob-toggle[aria-expanded="true"] .sm-mob-plus {
  transform: rotate(135deg);
}
#sm-mobile-nav .sm-mob-plus {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#sm-mobile-nav .sm-mob-toggle {
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
#sm-mobile-nav .sm-mob-toggle:active {
  transform: scale(0.92);
}

/* Glass mode — toggles need solid contrast against the blurred photo */
body.sm-mobile-menu-glass #sm-mobile-nav .sm-mob-toggle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.2);
  color: #222;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.sm-mobile-menu-glass.sm-dark #sm-mobile-nav .sm-mob-toggle {
  background: rgba(20, 20, 28, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
body.sm-mobile-menu-glass #sm-mobile-nav .sm-mob-toggle[aria-expanded="true"] {
  background: var(--sm-mobile-menu-accent, var(--sm-accent));
  border-color: var(--sm-mobile-menu-accent, var(--sm-accent));
  color: #fff;
}

/* Sub-menus at all depths: hidden by default */
#sm-mobile-nav ul li > ul {
  display: none;
  flex-direction: column;
  padding-left: 0;
}
#sm-mobile-nav ul li.sm-mob-open > ul { display: flex; }

/* Depth 1 sub-items — very slight bg tint */
#sm-mobile-nav ul li > ul {
  background: rgba(0,0,0,0.04);
}
body.sm-dark #sm-mobile-nav ul li > ul {
  background: rgba(255,255,255,0.04);
}
/* Depth 1: plain link styling */
#sm-mobile-nav ul li > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 32px 0 20px;
  min-height: 44px;
  color: var(--sm-text);
  font-family: var(--sm-font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--sm-border);
  box-sizing: border-box;
}
#sm-mobile-nav ul li > ul > li > a:hover { color: var(--sm-accent); }
/* Depth 1: parent row (keeps flex from base rule) — indent the LABEL only */
#sm-mobile-nav ul li > ul > li > .sm-mob-parent {
  min-height: 44px;
}
#sm-mobile-nav ul li > ul > li > .sm-mob-parent .sm-mob-label {
  padding-left: 20px;
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Depth 2 sub-items — slightly more bg tint */
#sm-mobile-nav ul li > ul > li > ul {
  background: rgba(0,0,0,0.06);
}
body.sm-dark #sm-mobile-nav ul li > ul > li > ul {
  background: rgba(255,255,255,0.06);
}
/* Depth 2: plain link styling */
#sm-mobile-nav ul li > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 32px 0 32px;
  min-height: 40px;
  color: var(--sm-text);
  font-family: var(--sm-font-heading);
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--sm-border);
  box-sizing: border-box;
}
#sm-mobile-nav ul li > ul > li > ul > li > a:hover { color: var(--sm-accent); }
#sm-mobile-nav ul li > ul > li > ul > li:last-child > a { border-bottom: none; }
/* Depth 2: parent row (keeps flex) — indent the LABEL only */
#sm-mobile-nav ul li > ul > li > ul > li > .sm-mob-parent {
  min-height: 40px;
}
#sm-mobile-nav ul li > ul > li > ul > li > .sm-mob-parent .sm-mob-label {
  padding-left: 32px;
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
}

/* All toggles same size, sit at the right edge consistently */
#sm-mobile-nav ul li .sm-mob-toggle {
  width: 24px;
  height: 24px;
}

/* Regular (non-parent) top-level links */
#sm-mobile-nav ul li > a {
  display: flex;
  align-items: center;
  padding: 0 32px 0 0;
  min-height: 48px;
  color: var(--sm-text);
  border-bottom: 1px solid var(--sm-border);
  font-family: var(--sm-font-heading);
  font-weight: 600;
  box-sizing: border-box;
}
#sm-mobile-nav ul li > a:hover { color: var(--sm-accent); }

/* ─────────────────────────────────────────────────────────
   DEEP NESTING (depths 3+) — applies to the mobile menu.
   Depths 0/1/2 keep their existing chain rules above. From
   depth 3 onwards, indent grows linearly with --sm-depth
   which is set inline on each <li>. Type softens once at
   depth 3 and stays there.
   Formula: padding-left = 20px + (depth * 12px).
   Examples: d3=56px, d4=68px, d5=80px, d10=140px, etc.
   ───────────────────────────────────────────────────────── */
#sm-mobile-nav li:not(.sm-mob-depth-0):not(.sm-mob-depth-1):not(.sm-mob-depth-2) > a {
  padding-left: calc(20px + var(--sm-depth, 0) * 12px);
  min-height: 38px;
  font-weight: 400;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}
#sm-mobile-nav li:not(.sm-mob-depth-0):not(.sm-mob-depth-1):not(.sm-mob-depth-2) > .sm-mob-parent {
  min-height: 38px;
}
#sm-mobile-nav li:not(.sm-mob-depth-0):not(.sm-mob-depth-1):not(.sm-mob-depth-2) > .sm-mob-parent .sm-mob-label {
  padding-left: calc(20px + var(--sm-depth, 0) * 12px);
  font-weight: 400;
  font-size: 0.82rem;
}

/* ============================================================
   NAVBAR DROPDOWN MENU
   Standard accordion menu attached to the navbar. Top-level
   sub-menus drop down anchored to their parent <li>. Nested
   sub-menus expand inline within the dropdown to handle
   infinite depth without flyouts. Uses page surface colours
   (--sm-bg, --sm-text, --sm-border) so it reads as a content
   panel in light and dark mode.
   ============================================================ */

/* Make the navbar li the positioning anchor for its dropdown.
   The dropdown uses position: fixed (anchored via JS) to escape
   the navbar's overflow-x: auto, which silently forces
   overflow-y to behave like 'auto' and clips dropdowns. */
#sm-navbar ul > li.menu-item-has-children { position: relative; }

/* Hide the chevron-down by default; show only at depth 0 visually,
   nested toggles get their own treatment in the dropdown. */
#sm-navbar .sm-nav-chevron {
  transition: transform 0.25s ease;
}
#sm-navbar ul > li.is-open > .sm-nav-parent .sm-nav-chevron {
  transform: rotate(-180deg);
}

/* ── Top-level dropdown panel ──
   Positioned fixed; JS sets top/left from the parent li's
   getBoundingClientRect each time it opens. Uses page surface
   colours (--sm-bg / --sm-text) so it reads as a content panel
   in both light and dark mode, not as an extension of the
   red navbar. */
#sm-navbar ul > li > ul.sub-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: 70vh;
  max-height: 70dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--sm-bg);
  color: var(--sm-text);
  border: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
#sm-navbar ul > li.is-open > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* ── Nested sub-menus (inline accordion inside the dropdown) ──
   No absolute positioning — they push siblings down within the
   panel. Hidden until their parent li has .is-open. */
#sm-navbar ul > li > ul.sub-menu ul.sub-menu {
  position: static;
  display: none;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  background: rgba(0, 0, 0, 0.04);
  color: var(--sm-text);
  border: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  padding: 0;
  list-style: none;
  margin: 0;
  pointer-events: auto;
}
body.sm-dark #sm-navbar ul > li > ul.sub-menu ul.sub-menu {
  background: rgba(255, 255, 255, 0.04);
}
#sm-navbar ul > li > ul.sub-menu li.is-open > ul.sub-menu {
  display: block;
}

/* ── Items inside the dropdown ── */
#sm-navbar ul > li > ul.sub-menu li {
  position: relative;
  list-style: none;
}
#sm-navbar ul > li > ul.sub-menu li > a,
#sm-navbar ul > li > ul.sub-menu .sm-nav-parent > .sm-nav-label {
  display: block;
  padding: 10px 14px;
  padding-left: calc(14px + var(--sm-depth, 1) * 12px);
  color: var(--sm-text);
  text-decoration: none;
  font-family: var(--sm-font-heading);
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: normal;
  transition: background 0.15s ease, color 0.15s ease;
}
#sm-navbar ul > li > ul.sub-menu li > a:hover,
#sm-navbar ul > li > ul.sub-menu .sm-nav-parent:hover > .sm-nav-label {
  background: transparent;
  color: var(--sm-text);
}
body.sm-dark #sm-navbar ul > li > ul.sub-menu li > a:hover,
body.sm-dark #sm-navbar ul > li > ul.sub-menu .sm-nav-parent:hover > .sm-nav-label {
  background: transparent;
}

/* ── Parent rows inside the dropdown ── */
#sm-navbar ul > li > ul.sub-menu .sm-nav-parent {
  display: flex;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
#sm-navbar ul > li > ul.sub-menu .sm-nav-parent > .sm-nav-label {
  flex: 1;
  padding: 10px 14px;
  padding-left: calc(14px + var(--sm-depth, 1) * 12px);
}
#sm-navbar ul > li > ul.sub-menu .sm-nav-toggle {
  background: transparent;
  border: none;
  color: var(--sm-text);
  width: 36px;
  height: auto;          /* override the 22px top-level rule so the
                            button stretches to the row height and
                            its centred icon sits in the middle even
                            when the label wraps to multiple lines */
  align-self: stretch;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 0;
  transition: color 0.15s ease;
}
#sm-navbar ul > li > ul.sub-menu .sm-nav-toggle:hover {
  background: transparent;
  color: var(--sm-text);
}
body.sm-dark #sm-navbar ul > li > ul.sub-menu .sm-nav-toggle:hover {
  background: transparent;
  color: var(--sm-text);
}
#sm-navbar ul > li > ul.sub-menu .sm-nav-toggle .sm-nav-chevron {
  display: block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#sm-navbar ul > li > ul.sub-menu li.is-open > .sm-nav-parent > .sm-nav-toggle .sm-nav-chevron {
  transform: rotate(180deg);
}

/* No active-row highlight — keep it clean per design preference */

/* Scrollbar styling for the dropdown */
#sm-navbar ul > li > ul.sub-menu::-webkit-scrollbar { width: 6px; }
#sm-navbar ul > li > ul.sub-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
body.sm-dark #sm-navbar ul > li > ul.sub-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Below the desktop nav breakpoint, the dropdown is hidden — the
   mobile glass menu takes over. */
@media (max-width: 768px) {
  #sm-navbar ul > li > ul.sub-menu {
    display: none !important;
  }
}

/* ============================================================
   NEWS TICKER
   ============================================================ */
#sm-ticker {
  background: var(--sm-ticker-bg);
  color: var(--sm-ticker-text);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 38px;
  transition: background var(--sm-transition);
}
.sm-ticker-label {
  background: var(--sm-ticker-label);
  color: #fff;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--sm-font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}
.sm-ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.sm-ticker-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}
.sm-ticker-track:hover { animation-play-state: paused; }
.sm-ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  font-size: 0.85rem;
  font-weight: 500;
}
.sm-ticker-item::after {
  content: '•';
  margin-left: 24px;
  opacity: 0.5;
}
.sm-ticker-item a { color: inherit; }
.sm-ticker-item a:hover { text-decoration: underline; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   CAROUSEL / HERO SLIDER
   ============================================================ */
#sm-carousel {
  position: relative;
  overflow: hidden;
}
#sm-carousel::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--sm-accent);
  border-radius: 0 0 var(--sm-radius) var(--sm-radius);
}
.sm-carousel-inner {
  display: flex;
  transition: transform 0.6s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}
.sm-slide {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
}
/* All media links inside slides must be block with no gaps */
.sm-slide > a {
  display: block;
  line-height: 0;
  font-size: 0;
}
.sm-slide img {
  width: 100%;
  height: clamp(280px, 50vw, 520px);
  object-fit: cover;
  display: block;
}
/* Video slides */
.sm-slide-video-link {
  display: block;
  line-height: 0;
  font-size: 0;
}
.sm-slide-video .sm-slide-video-el {
  width: 100%;
  height: clamp(280px, 50vw, 520px);
  object-fit: cover;
  display: block;
}
/* Reset font-size for caption text */
.sm-slide-caption {
  font-size: 1rem;
  line-height: 1.4;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  padding: 40px 32px 28px;
  color: var(--sm-carousel-text, #ffffff);
}
.sm-slide-caption .cat-label {
  display: inline-block;
  background: var(--sm-accent);
  color: #fff;
  font-family: var(--sm-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.sm-slide-caption h2,
.sm-slide-caption h2 a {
  font-family: var(--sm-font-heading);
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--sm-carousel-title, #000000) !important;
  line-height: 1.2;
  margin-bottom: 8px;
}
.sm-slide-caption p {
  font-size: 0.9rem;
  color: var(--sm-carousel-excerpt, rgba(255,255,255,.9));
  max-width: 600px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-slide-caption p a {
  color: var(--sm-carousel-excerpt, rgba(255,255,255,.9)) !important;
}

/* Carousel controls */
.sm-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.sm-carousel-btn:hover { background: rgba(0,0,0,.8); }
.sm-carousel-prev { left: 16px; }
.sm-carousel-next { right: 16px; }

.sm-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.sm-carousel-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.sm-carousel-dots button.active {
  background: #fff;
  transform: scale(1.3);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
#sm-breadcrumbs {
  background: var(--sm-surface);
  border-bottom: 1px solid var(--sm-border);
  padding: 10px 0;
}
.sm-breadcrumbs-inner {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--sm-text-muted);
}
.sm-breadcrumbs-inner a { color: var(--sm-link); }
.sm-breadcrumbs-inner .sep { opacity: 0.5; }
.sm-breadcrumbs-inner .current { color: var(--sm-text); font-weight: 600; }

/* ============================================================
   MAIN CONTENT AREA & SIDEBAR LAYOUTS
   ============================================================ */
#sm-content-area {
  flex: 1;
  padding: 32px 0 0;
  background: var(--sm-bg);
}

.sm-main-wrap {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 0 20px 32px;
  display: grid;
  gap: 32px;
  align-content: start;
  align-items: start;
}
.sm-main-wrap > *:last-child { margin-bottom: 0; }

/* Default: sidebar right */
.sm-layout-sidebar-right  { grid-template-columns: 1fr var(--sm-sidebar-width); }
.sm-layout-sidebar-left   { grid-template-columns: var(--sm-sidebar-width) 1fr; }
.sm-layout-sidebar-both   { grid-template-columns: var(--sm-sidebar-width) 1fr var(--sm-sidebar-width); }
.sm-layout-full-width     { grid-template-columns: 1fr; }

/* On small screens, always single column */
@media (max-width: 600px) {
  .sm-main-wrap { grid-template-columns: 1fr !important; }
  .sm-sidebar   { order: 999; }
}

/* Primary content */
#sm-primary { min-width: 0; align-self: start; }

/* ============================================================
   SIDEBAR
   ============================================================ */
/* Narrow sidebar on smaller landscape screens */
@media (max-width: 900px) and (orientation: landscape) {
  :root { --sm-sidebar-width: 200px; }
}

.sm-sidebar {
  min-width: 0;
}
.sm-sidebar .widget {
  background: var(--sm-card-bg);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--sm-card-shadow);
}
.sm-sidebar .widget-title {
  font-family: var(--sm-font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sm-text);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--sm-accent);
}
/* Tighten calendar widget dead space */
.sm-sidebar .widget_calendar .wp-calendar-nav,
.sm-sidebar .calendar_wrap,
.sm-sidebar .wp-block-calendar {
  margin-bottom: 0;
  padding-bottom: 0;
}
.sm-sidebar table#wp-calendar { width: 100%; margin-bottom: 0; }
.sm-sidebar .wp-calendar-nav { padding: 6px 0 0; }

/* ============================================================
   POST CARDS
   ============================================================ */
.sm-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  align-content: start;
}

.sm-card {
  background: var(--sm-card-bg);
  border-radius: var(--sm-radius);
  overflow: hidden;
  box-shadow: var(--sm-card-shadow);
  border: 1px solid var(--sm-border);
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sm-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.sm-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.sm-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.sm-card:hover .sm-card-thumb img { transform: scale(1.05); }
.sm-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.sm-card-cat {
  font-family: var(--sm-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sm-accent);
  margin-bottom: 6px;
}
body.sm-dark .sm-card-cat { color: var(--sm-ticker-bg, #9b9292); }
.sm-card-title {
  font-family: var(--sm-font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}
.sm-card-title a { color: var(--sm-text); }
.sm-card-title a:hover { color: var(--sm-accent); }
.sm-card-meta {
  font-size: 0.75rem;
  color: var(--sm-text-muted);
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sm-border);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.sm-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.sm-card-excerpt .read-more {
  color: var(--sm-accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.sm-card-excerpt .read-more:hover { color: var(--sm-accent2); }
.sm-card-readmore {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sm-accent);
  text-decoration: none;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.sm-card-readmore:hover { color: var(--sm-accent2); }
.sm-card-excerpt {
  font-size: 0.87rem;
  color: var(--sm-text-muted);
  margin-bottom: 0;
  overflow: hidden;
  flex: 1;
}
.sm-card-excerpt p { margin: 0; }
.sm-card-footer {
  margin-top: auto;
  padding-top: 10px;
  flex-shrink: 0;
}

/* Magazine card accent bar (optional, toggled via Customiser) */
/* card accent toggle removed */

/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */
.sm-category-section {
  margin-bottom: 48px;
}
.sm-category-section:last-of-type {
  margin-bottom: 0;
}

.sm-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--sm-section-color, var(--sm-accent));
  padding-bottom: 10px;
}
.sm-section-header h2 {
  font-family: var(--sm-font-heading);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sm-section-color, var(--sm-accent));
}
.sm-section-header a.see-all {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sm-section-color, var(--sm-accent));
}

/* ============================================================
   MAGAZINE HERO
   ============================================================ */
.sm-editors-pick-badge--hero {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.sm-editors-pick-badge--carousel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font-size: 0.65rem;
  line-height: 1.2;
}

/* ============================================================
   CINEMATIC HERO STYLE
   ============================================================ */
.sm-mag-hero-wrap--cinematic {
  border-radius: var(--sm-radius);
  margin-bottom: 48px;
  position: relative;
}
.sm-mag-hero-wrap--cinematic::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--sm-accent);
  border-radius: 0 0 var(--sm-radius) var(--sm-radius);
}
.sm-mag-hero--cinematic {
  position: relative;
  width: 100%;
  min-height: 540px;
  background: var(--sm-cine-bg, #0a0a0f);
  border-radius: var(--sm-radius) var(--sm-radius) 0 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media ( min-width: 768px ) {
  .sm-mag-hero--cinematic {
    grid-template-columns: 1fr 1fr;
    min-height: 580px;
  }
}
/* Image side with ken burns slow zoom */
.sm-mag-hero-cine-img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  animation: smCineKenBurns 22s ease-in-out infinite alternate;
  filter: contrast(1.05) saturate(1.1);
}
.sm-mag-hero-cine-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0) 50%, var(--sm-cine-fade, rgba(10,10,15,0.95)) 100%);
  pointer-events: none;
}
@media ( min-width: 768px ) {
  .sm-mag-hero-cine-img::after {
    background: linear-gradient(90deg, rgba(0,0,0,0) 60%, var(--sm-cine-bg, rgba(10,10,15,1)) 100%);
  }
}
@keyframes smCineKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}
/* Film grain overlay */
.sm-mag-hero-cine-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  animation: smCineGrain 0.8s steps(4) infinite;
  z-index: 1;
}
@keyframes smCineGrain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3%, 2%); }
  50%      { transform: translate(2%, -3%); }
  75%      { transform: translate(-2%, -2%); }
}
/* Floating particles */
.sm-mag-hero-cine-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.sm-particle {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: 3px;
  height: 3px;
  background: var(--sm-accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px var(--sm-accent);
  animation: smCineParticle var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes smCineParticle {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-110vh) scale(0.3); opacity: 0; }
}

/* ============ FOG ============ */
.sm-mag-hero-cine-fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  mix-blend-mode: screen;
}
.sm-fog {
  position: absolute;
  width: 90%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(220,220,235,0.55) 0%, rgba(220,220,235,0.25) 35%, rgba(220,220,235,0.08) 60%, transparent 80%);
  filter: blur(40px);
  border-radius: 50%;
  opacity: 0;
}
.sm-fog-1 { top: 5%;  left: -90%; animation: smCineFog 40s linear infinite; --max-o: 0.7; }
.sm-fog-2 { top: 30%; left: -90%; animation: smCineFog 55s linear infinite; animation-delay: -25s; --max-o: 0.55; }
.sm-fog-3 { top: 50%; left: -90%; animation: smCineFog 48s linear infinite; animation-delay: -38s; --max-o: 0.65; }
.sm-fog-4 { top: 70%; left: -90%; animation: smCineFog 60s linear infinite; animation-delay: -10s; --max-o: 0.5; }
@keyframes smCineFog {
  0%   { transform: translateX(0);    opacity: 0; }
  20%  { opacity: var(--max-o, 0.6); }
  80%  { opacity: var(--max-o, 0.6); }
  100% { transform: translateX(220%); opacity: 0; }
}

/* Body content */
.sm-mag-hero-cine-body {
  position: relative;
  z-index: 2;
  padding: 40px 32px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--sm-cine-text, #ffffff);
}
@media ( min-width: 768px ) {
  .sm-mag-hero-cine-body {
    padding: 56px 48px;
  }
}
.sm-mag-hero-cat--cinematic {
  display: inline-block;
  font-family: var(--sm-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--sm-accent);
  text-decoration: none;
  margin-bottom: 18px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--sm-accent);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.sm-mag-hero-cat--cinematic::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--sm-cine-shimmer, rgba(255,255,255,0.3)), transparent);
  animation: smCineShimmer 3s ease-in-out infinite;
}
@keyframes smCineShimmer {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}
.sm-mag-hero-title--cinematic {
  font-family: var(--sm-font-heading);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--sm-cine-text, #ffffff);
  text-shadow: 0 0 40px var(--sm-cine-title-glow, rgba(230, 57, 70, 0.4)), 0 4px 20px var(--sm-cine-title-shadow, rgba(0,0,0,0.6));
  letter-spacing: -0.01em;
}
.sm-mag-hero-title--cinematic a {
  color: inherit;
  text-decoration: none;
}
.sm-mag-hero-title--cinematic a:hover { color: var(--sm-accent); }
.sm-mag-hero-excerpt--cinematic {
  font-size: 1rem;
  color: var(--sm-cine-excerpt, rgba(255,255,255,0.78));
  margin-bottom: 24px;
  line-height: 1.7;
  max-width: 540px;
}
.sm-mag-hero-excerpt--cinematic p { margin: 0; }
.sm-mag-hero-cta {
  display: inline-block;
  font-family: var(--sm-font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 28px;
  background: var(--sm-accent);
  border-radius: 2px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 20px var(--sm-cine-cta-shadow, rgba(230, 57, 70, 0.35));
}
.sm-mag-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--sm-cine-cta-shadow-hover, rgba(230, 57, 70, 0.5));
  color: #ffffff;
}
.sm-mag-hero--cinematic .sm-editors-pick-badge--hero {
  z-index: 3;
}

/* Light mode variables for cinematic hero */
body:not(.sm-dark) {
  --sm-cine-bg: #1a1a24;
  --sm-cine-fade: rgba(26,26,36,0.95);
  --sm-cine-text: #ffffff;
  --sm-cine-excerpt: rgba(255,255,255,0.82);
  --sm-cine-title-glow: rgba(230, 57, 70, 0.5);
  --sm-cine-title-shadow: rgba(0,0,0,0.7);
  --sm-cine-shimmer: rgba(255,255,255,0.4);
  --sm-cine-cta-shadow: rgba(230, 57, 70, 0.4);
  --sm-cine-cta-shadow-hover: rgba(230, 57, 70, 0.6);
}
body.sm-dark {
  --sm-cine-bg: #0a0a0f;
  --sm-cine-fade: rgba(10,10,15,0.95);
  --sm-cine-text: #ffffff;
  --sm-cine-excerpt: rgba(255,255,255,0.78);
  --sm-cine-title-glow: rgba(230, 57, 70, 0.4);
  --sm-cine-title-shadow: rgba(0,0,0,0.6);
  --sm-cine-shimmer: rgba(255,255,255,0.3);
  --sm-cine-cta-shadow: rgba(230, 57, 70, 0.35);
  --sm-cine-cta-shadow-hover: rgba(230, 57, 70, 0.5);
}


/* ============================================================
   SECTION COLOUR CODING
   ============================================================ */
.sm-category-section .sm-card-cat a {
  color: var(--sm-section-color, var(--sm-accent));
}

/* ============================================================
   SECTION LAYOUT VARIANTS
   Section 1: Featured left (large) + stack right
   Section 2: Equal 3-column row
   Section 3: Full-width featured + row below
   Section 4: Alternating large/small pairs
   ============================================================ */

/* --- Section 1: Same as section 3 — full-width featured top + row below --- */
/* --- Section 1: Wider cards with 4:3 ratio (same as section 4) --- */
.sm-section-layout-1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.sm-section-layout-1 .sm-card .sm-card-thumb {
  aspect-ratio: 4/3;
}
.sm-section-layout-1 .sm-card-title { font-size: 1.05rem; }

/* --- Section 2: Equal columns, no featured card --- */
.sm-section-layout-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* --- Section 3: Top row of 2 standard cards + bottom row of 3 smaller cards --- */
.sm-section-layout-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.sm-section-layout-3 .sm-card {
  flex-direction: column;
}
.sm-section-layout-3 .sm-card .sm-card-thumb {
  aspect-ratio: 4/3;
}
.sm-section-layout-3 .sm-card-title {
  font-size: 1.05rem;
}

@media ( min-width: 640px ) {
  .sm-section-layout-3 {
    grid-template-columns: repeat(6, 1fr);
  }
  /* Top row: 2 standard cards, each spans 3 columns */
  .sm-section-layout-3 > .sm-card:nth-child(1),
  .sm-section-layout-3 > .sm-card:nth-child(2) {
    grid-column: span 3;
  }
  /* Bottom row: 3 smaller cards, each spans 2 columns */
  .sm-section-layout-3 > .sm-card:nth-child(3),
  .sm-section-layout-3 > .sm-card:nth-child(4),
  .sm-section-layout-3 > .sm-card:nth-child(5) {
    grid-column: span 2;
  }
  /* Smaller styling for the bottom row */
  .sm-section-layout-3 > .sm-card:nth-child(n+3) .sm-card-title {
    font-size: 0.95rem;
  }
  .sm-section-layout-3 > .sm-card:nth-child(n+3) .sm-card-body {
    padding: 14px 16px;
  }
}

/* --- Section 4: Two larger cards side by side --- */
.sm-section-layout-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.sm-section-layout-4 .sm-card .sm-card-thumb {
  aspect-ratio: 4/3;
}
.sm-section-layout-4 .sm-card-title { font-size: 1.05rem; }

/* ============================================================
   EDITOR'S PICK BADGE
   ============================================================ */
.sm-editors-pick-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--sm-accent);
  color: #ffffff;
  font-family: var(--sm-font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}
.sm-single .entry-header { margin-bottom: 28px; }
.sm-single .entry-title {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
}
.sm-single .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--sm-text-muted);
  padding: 14px 0;
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
}
/* Meta items with icons */
.sm-single .entry-meta span,
.sm-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sm-single .entry-meta span svg,
.sm-card-meta span svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Footer centre align */

/* Footer nav accordion - reuses mobile menu styles but adapted for footer bar */
.sm-footer-nav ul { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.sm-footer-nav .sm-mob-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sm-footer-nav .sm-mob-label {
  font-family: var(--sm-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sm-footer-text);
  padding: 8px 0;
  flex: 1;
  letter-spacing: 0.04em;
}
.sm-footer-nav .sm-mob-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.5);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.sm-footer-nav .sm-mob-toggle:hover { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-footer-nav .sm-mob-toggle[aria-expanded="true"] { border-color: var(--sm-accent); color: var(--sm-accent); }
.sm-footer-nav .sm-mob-toggle[aria-expanded="true"] .sm-mob-plus { transform: rotate(45deg); }
.sm-footer-nav ul li > a {
  display: block;
  padding: 8px 0;
  color: var(--sm-footer-text);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color 0.2s;
}
.sm-footer-nav ul li > a:hover { color: var(--sm-accent); }
.sm-footer-nav ul li > ul {
  display: none;
  flex-direction: column;
  padding-left: 12px;
}
.sm-footer-nav ul li.sm-mob-open > ul { display: flex; }
.sm-footer-nav ul li > ul > li > a {
  font-size: 0.8rem;
  color: rgba(255,255,255,.6);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sm-footer-nav ul li > ul > li > a:hover { color: var(--sm-accent); }
.sm-single .entry-thumbnail {
  margin-bottom: 28px;
  border-radius: var(--sm-radius);
  overflow: hidden;
}
.sm-single .entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 72ch;
}
.sm-single .entry-content p { margin-bottom: 1.4em; }
.sm-single .entry-content h2,
.sm-single .entry-content h3 { margin: 1.8em 0 0.8em; }

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.sm-social-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sm-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform 0.15s, opacity 0.2s;
  flex-shrink: 0;
}
.sm-social-icon:hover { transform: translateY(-2px); opacity: 0.85; }

/* Branded — coloured circle, white icon */
.sm-social-icon.sm-social-branded {
  background: var(--si-color, #555);
  color: #fff;
}
.sm-social-icon.sm-social-branded svg { color: #fff; fill: currentColor; }

/* Mono — uses theme surface/text colours */
.sm-social-icon.sm-social-mono {
  background: var(--sm-surface);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
}
.sm-social-icon.sm-social-mono:hover { background: var(--sm-accent); color: #fff; border-color: var(--sm-accent); }

/* Mobile menu social icons — slightly larger, row layout */
.sm-social-icons--mobile .sm-social-icon { width: 36px; height: 36px; }

/* Social icons dropdown toggle in header */
.sm-header-socials {
  display: flex;
  align-items: center;
  position: relative;
}

/* Mobile menu social icons — centred, no separator */
.sm-social-icons--mobile {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
}

/* Desktop social icons dropdown */
.sm-social-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.sm-social-dropdown-toggle svg { transition: transform 0.2s ease; }
.sm-social-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sm-social-dropdown-toggle:hover { background: rgba(128,128,128,0.15); }
.sm-social-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 9999;
  min-width: 160px;
}
.sm-social-dropdown-panel .sm-social-icons {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.sm-social-dropdown-toggle[aria-expanded="true"] + .sm-social-dropdown-panel,
.sm-social-dropdown-panel.sm-open { display: block; }

/* ============================================================
   SHARE BUTTONS
   ============================================================ */
.sm-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 8px;
  padding: 20px 0;
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
}
.sm-share-label {
  font-family: var(--sm-font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sm-text-muted);
  white-space: nowrap;
}
.sm-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sm-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--share-color, #555);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.sm-share-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  color: #fff;
}
.sm-share-btn svg { flex-shrink: 0; }
/* Copy success state */
.sm-share-btn[data-share="copy"].copied { background: #22a06b !important; }

/* Icon only */
.sm-share-btn.sm-share-icon_only { padding: 8px; border-radius: 50%; width: 36px; height: 36px; justify-content: center; }
.sm-share-btn.sm-share-icon_only span { display: none; }

/* Black & white (logo + text) */
.sm-share-btn.sm-share-mono { background: var(--sm-surface); color: var(--sm-text); border: 1px solid var(--sm-border); }
.sm-share-btn.sm-share-mono:hover { background: var(--sm-accent); color: #fff; border-color: var(--sm-accent); }
.sm-share-btn.sm-share-mono svg { color: var(--sm-text); }
.sm-share-btn.sm-share-mono:hover svg { color: #fff; }

/* Black & white (logo only) — circular, no text */
.sm-share-btn.sm-share-mono_logo { background: var(--sm-surface); color: var(--sm-text); border: 1px solid var(--sm-border); padding: 8px; border-radius: 50%; width: 36px; height: 36px; justify-content: center; }
.sm-share-btn.sm-share-mono_logo span { display: none; }
.sm-share-btn.sm-share-mono_logo:hover { background: var(--sm-accent); color: #fff; border-color: var(--sm-accent); }
.sm-share-btn.sm-share-mono_logo svg { color: var(--sm-text); }
.sm-share-btn.sm-share-mono_logo:hover svg { color: #fff; }

/* Text only */
.sm-share-btn.sm-share-text_only { background: transparent; color: var(--sm-accent); border: 1px solid var(--sm-accent); padding: 6px 14px; }
.sm-share-btn.sm-share-text_only:hover { background: var(--sm-accent); color: #fff; }

/* ============================================================
   GDPR COOKIE NOTICE
   ============================================================ */
#sm-gdpr {
  position: fixed;
  left: 0; right: 0;
  z-index: 99999;
  background: var(--gdpr-bg, #1a1a1a);
  color: var(--gdpr-text, #f0f0f0);
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  padding: 16px 20px;
  display: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
#sm-gdpr.sm-gdpr-visible { display: block; }
#sm-gdpr.sm-gdpr-bottom { bottom: 0; }
#sm-gdpr.sm-gdpr-top    { top: 0; box-shadow: 0 4px 24px rgba(0,0,0,.3); }
#sm-gdpr.sm-gdpr-center {
  bottom: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 92vw);
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.5);
}
.sm-gdpr-inner {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
#sm-gdpr.sm-gdpr-center .sm-gdpr-inner { flex-direction: column; align-items: flex-start; }
.sm-gdpr-msg {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
  color: var(--gdpr-text, #f0f0f0);
}
.sm-gdpr-policy {
  color: var(--gdpr-text, #f0f0f0);
  text-decoration: underline;
  opacity: 0.8;
}
.sm-gdpr-policy:hover { opacity: 1; }
.sm-gdpr-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.sm-gdpr-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.sm-gdpr-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.sm-gdpr-accept  { background: var(--gdpr-acc-bg, #cc0000);  color: var(--gdpr-acc-text, #fff); }
.sm-gdpr-decline { background: var(--gdpr-dec-bg, #444444);  color: var(--gdpr-dec-text, #fff); }

/* Overlay for center popup */
#sm-gdpr-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 99998;
  backdrop-filter: blur(2px);
}
#sm-gdpr-overlay.sm-gdpr-visible { display: block; }

/* ============================================================
   PAGINATION
   ============================================================ */
.sm-pagination {
  margin: 32px 0;
}
.sm-pagination .nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sm-pagination a,
.sm-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 2px solid var(--sm-border);
  border-radius: var(--sm-radius);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sm-text);
  transition: all 0.2s;
}
.sm-pagination a:hover,
.sm-pagination .current {
  background: var(--sm-accent);
  border-color: var(--sm-accent);
  color: #fff;
}

/* ============================================================
   FOOTER
   ============================================================ */
.sm-footer-spacer { height: 0; }
#sm-footer {
  background: var(--sm-footer-bg);
  color: var(--sm-footer-text);
  transition: background var(--sm-transition);
  position: relative;
}
/* Extend footer colour below to cover browser safe-area gap */
#sm-footer::after {
  content: '';
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--sm-footer-bg);
  z-index: 0;
}
.sm-footer-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 48px 20px 32px;
}
.sm-footer-widget {}
.sm-footer-widget-title {
  font-family: var(--sm-font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sm-footer-heading);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sm-accent);
}
.sm-footer-widget ul li {
  padding: 5px 0;
  border-bottom: 1px solid var(--sm-border);
  font-size: 0.88rem;
}
.sm-footer-widget ul li a {
  color: var(--sm-footer-text);
  transition: color 0.2s;
}
.sm-footer-widget ul li a:hover { color: var(--sm-accent); }
.sm-footer-widget p { font-size: 0.88rem; line-height: 1.7; }

.sm-footer-bar {
  border-top: none;
  padding: 18px 20px;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--sm-footer-text);
}
.sm-footer-bar a { color: var(--sm-footer-text); opacity: 0.75; }
.sm-footer-bar a:hover { color: var(--sm-accent); opacity: 1; }
.sm-footer-nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   SKIP LINK / ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--sm-accent);
  color: #fff;
  padding: 10px 18px;
  z-index: 9999;
  border-radius: 0 0 var(--sm-radius) 0;
  font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ============================================================
   GUTENBERG BLOCK OVERRIDES
   ============================================================ */
.wp-block-image img { border-radius: var(--sm-radius); }
.wp-block-pullquote {
  border-color: var(--sm-accent);
  background: var(--sm-surface);
  border-radius: var(--sm-radius);
  padding: 24px 28px;
}
.wp-block-quote { border-left: 4px solid var(--sm-accent); padding-left: 20px; }
.wp-block-code {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
}
.wp-block-button__link {
  background: var(--sm-accent) !important;
  border-radius: var(--sm-radius) !important;
}

/* ============================================================
   FORMS & COMMENTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background: var(--sm-surface);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 8px 12px;
  font-family: var(--sm-font-body);
  font-size: 0.95rem;
  width: 100%;
  transition: border-color 0.2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--sm-accent);
}
input[type="submit"],
button[type="submit"],
.submit input,
#respond .submit {
  background: var(--sm-surface2, #e8e8e8);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 10px 24px;
  font-family: var(--sm-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  width: auto;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.submit input:hover,
#respond .submit:hover {
  border-color: var(--sm-accent);
  color: var(--sm-accent);
}
#respond,
.comment-respond {
  margin-top: 32px;
}
.comment-list .comment-body {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 16px;
  margin-bottom: 16px;
}
.comment-list .comment-meta { font-size: 0.85rem; color: var(--sm-text-muted); margin-bottom: 8px; }
.comment-list .comment-content p { margin-bottom: 0.8em; }
.comment-form label { display: block; margin-bottom: 4px; font-size: 0.88rem; color: var(--sm-text-muted); }
.comment-form p { margin-bottom: 16px; }



/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
.sm-toc {
  border-radius: var(--sm-radius);
  padding: 16px 20px;
  margin: 28px 0;
  max-width: 480px;
}
.sm-toc-title {
  font-family: var(--sm-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.sm-toc-title::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.75em;
}
details.sm-toc[open] .sm-toc-title::before { transform: rotate(90deg); }
.sm-toc-title::-webkit-details-marker { display: none; }
.sm-toc-nav { margin-top: 12px; }
.sm-toc-nav ol { margin: 0; padding-left: 20px; }
.sm-toc-nav li { padding: 3px 0; font-size: 0.88rem; line-height: 1.4; }
.sm-toc-nav a { color: var(--sm-link); text-decoration: none; }
.sm-toc-nav a:hover { text-decoration: underline; color: var(--sm-accent); }
/* Offset TOC anchor targets so sticky header doesn't obscure them */
[id^="toc-"] { scroll-margin-top: var(--sm-header-height, 80px); }

/* ============================================================
   RELATED POSTS
   ============================================================ */
.sm-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--sm-border);
}
.sm-related-title {
  font-family: var(--sm-font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  color: var(--sm-text);
  border-bottom: 3px solid var(--sm-accent);
  display: block;
}
.sm-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.sm-related-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--sm-card-bg);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  overflow: hidden;
  box-shadow: var(--sm-card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
/* related card accent border removed */
.sm-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.sm-related-thumb {
  display: block;
  text-decoration: none;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--sm-surface);
}
.sm-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.sm-related-card:hover .sm-related-thumb img { transform: scale(1.05); }
.sm-related-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
  pointer-events: none;
}
.sm-related-thumb-none {
  aspect-ratio: 16/9;
  background: var(--sm-surface);
}
.sm-related-info {
  padding: 12px 14px 14px;
  display: block;
  text-decoration: none;
  color: var(--sm-text);
  flex: 1;
}
.sm-related-info:hover { color: var(--sm-text); }
.sm-related-cat {
  display: inline-block;
  font-family: var(--sm-font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sm-accent);
  margin-bottom: 5px;
}
.sm-related-post-title {
  font-family: var(--sm-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--sm-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-related-date {
  font-size: 0.75rem;
  color: var(--sm-text-muted);
}

/* ============================================================
   UTILITY
   ============================================================ */
.sm-hidden { display: none !important; }
.sm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Visibility helpers for header controls */
@media (max-width: 768px) { .sm-desktop-only { display: none !important; } }
@media (min-width: 769px) { .sm-mobile-only  { display: none !important; } }

/* Smooth dark transition for all coloured elements */
#sm-header, #sm-navbar, #sm-ticker, #sm-footer,
.sm-card, .sm-sidebar .widget {
  transition: background var(--sm-transition), color var(--sm-transition), border-color var(--sm-transition);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sm-logo-wrap img { object-fit: contain; }
  .sm-site-title { font-size: 0.9rem !important; white-space: normal; }
  .sm-tagline { display: none !important; }
  #sm-navbar { display: none; }
  .sm-header-inner { padding: 10px 12px; gap: 8px; }
  .sm-header-controls { gap: 6px; }
}
@media (min-width: 769px) {
  #sm-mobile-menu { display: none !important; }
  .sm-burger { display: none; }
}
@media (min-width: 1024px) {
  .sm-logo-wrap img { object-fit: contain; }
}

/* Print */
@media print {
  #sm-header, #sm-navbar, #sm-ticker, #sm-carousel,
  #sm-breadcrumbs, #sm-footer, .sm-sidebar { display: none; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.smlb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.smlb.smlb-active { display: flex; }
body.smlb-open { overflow: hidden; }

/* Blur the page content — applied to all direct children of body except the lightbox itself */
body.smlb-open > *:not(.smlb) {
  filter: blur(0);
  transition: filter 0.2s ease;
}
body.smlb-open.smlb-blur > *:not(.smlb) {
  filter: blur(8px);
}

/* Overlay dims the screen */
.smlb-overlay {
  position: absolute;
  inset: 0;
  background: var(--smlb-overlay, #000);
  opacity: var(--smlb-opacity, 0.88);
}

/* Light overlays */
[data-overlay="light"] .smlb-overlay,
[data-overlay="light_blur"] .smlb-overlay {
  background: #fff;
  opacity: 0.92;
}

/* Stage — padded flex container so media never touches buttons or info bar */
.smlb-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Image — sized by JS */
.smlb-img {
  object-fit: contain;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  display: block;
}
.smlb-img.smlb-visible { opacity: 1; }
.smlb.smlb-animate .smlb-img.smlb-visible {
  animation: smlb-in 0.22s ease both;
}
@keyframes smlb-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Video — sized by JS */
.smlb-video {
  object-fit: contain;
  border-radius: 3px;
  z-index: 2;
  display: none;
}
.smlb-video.smlb-visible { display: block; }

/* Spinner */
.smlb-spinner {
  display: none;
  position: absolute;
  z-index: 3;
  gap: 5px;
}
.smlb-spinner.smlb-show { display: flex; align-items: center; justify-content: center; }
.smlb-spinner div {
  width: 7px; height: 7px;
  background: var(--smlb-ui, #fff);
  border-radius: 50%;
  opacity: 0.3;
  animation: smlb-dot 1.2s ease-in-out infinite;
}
.smlb-spinner div:nth-child(1) { animation-delay: 0s; }
.smlb-spinner div:nth-child(2) { animation-delay: 0.2s; }
.smlb-spinner div:nth-child(3) { animation-delay: 0.4s; }
.smlb-spinner div:nth-child(4) { animation-delay: 0.6s; }
@keyframes smlb-dot {
  0%,80%,100% { opacity:0.2; transform:scale(0.8); }
  40%         { opacity:1;   transform:scale(1.2); }
}

/* Close / prev / next buttons */
.smlb-close, .smlb-prev, .smlb-next {
  position: fixed;
  z-index: 99999;
  background: rgba(0,0,0,0.38);
  border: none;
  color: var(--smlb-ui, #fff);
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.18s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smlb-close:hover, .smlb-prev:hover, .smlb-next:hover { background: rgba(0,0,0,0.68); }

/* Light mode — darker buttons so they show on white */
[data-overlay="light"] .smlb-close,
[data-overlay="light"] .smlb-prev,
[data-overlay="light"] .smlb-next,
[data-overlay="light_blur"] .smlb-close,
[data-overlay="light_blur"] .smlb-prev,
[data-overlay="light_blur"] .smlb-next {
  background: rgba(0,0,0,0.15);
}

.smlb-close { top:18px; right:18px; width:42px; height:42px; font-size:26px; }
.smlb-prev  { top:50%; left:16px;  transform:translateY(-50%); width:48px; height:48px; font-size:32px; }
.smlb-next  { top:50%; right:16px; transform:translateY(-50%); width:48px; height:48px; font-size:32px; }
.smlb-prev:hover { transform:translateY(-50%) translateX(-2px); }
.smlb-next:hover { transform:translateY(-50%) translateX(2px); }

/* Info bar */
.smlb-info {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events: none;
}
[data-overlay="light"] .smlb-info,
[data-overlay="light_blur"] .smlb-info {
  background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, transparent 100%);
}
.smlb-caption {
  font-size: 0.85rem;
  color: var(--smlb-caption, #e0e0e0);
  line-height: 1.4;
  max-width: 70ch;
}
.smlb-counter {
  font-size: 0.8rem;
  color: var(--smlb-ui, #fff);
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-overlay="light"] .smlb-caption,
[data-overlay="light"] .smlb-counter,
[data-overlay="light_blur"] .smlb-caption,
[data-overlay="light_blur"] .smlb-counter { color: #222; }

/* Zoom cursor */
.entry-content img:not(.smlb-off):not(.emoji) { cursor: zoom-in; }

/* Mobile */
@media (max-width: 600px) {
  .smlb-prev  { left: 4px; }
  .smlb-next  { right: 4px; }
  .smlb-prev, .smlb-next { width:40px; height:40px; font-size:26px; }
  .smlb-close { top:10px; right:10px; width:36px; height:36px; font-size:22px; }
  .smlb-info  { padding: 10px 12px 12px; }
  .sm-footer-bar { flex-direction: column; text-align: center; align-items: center; }
  .sm-footer-nav { justify-content: center; }
  .sm-footer-widgets { grid-template-columns: 1fr !important; }
  .sm-footer-widget { text-align: center; }
  .sm-footer-widget ul { padding: 0; }
  .sm-footer-widget ul li { text-align: center; }
}

/* ============================================================
   AD SLOTS
   ============================================================ */
.sm-ad-slot {
  width: 100%;
  margin: 24px 0;
  text-align: center;
  overflow: hidden;
}
.sm-ad-slot ins {
  display: block;
  margin: 0 auto;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.sm-404-wrap {
  text-align: center;
  padding: 40px 24px 24px;
}
.sm-404-code {
  font-size: clamp(80px, 20vw, 140px);
  font-weight: 900;
  line-height: 1;
  color: var(--sm-accent);
  opacity: 0.15;
  margin-bottom: -8px;
}
.sm-404-title {
  font-size: clamp(24px, 5vw, 36px);
  margin-bottom: 12px;
}
.sm-404-message {
  color: var(--sm-text-muted, #888);
  margin-bottom: 24px;
  font-size: 16px;
}
.sm-404-home-btn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--sm-accent);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}
.sm-404-home-btn:hover { opacity: 0.85; color: #fff; }
.sm-404-recent { margin-top: 40px; padding-bottom: 32px; }
.sm-404-recent .sm-post-grid { margin-bottom: 0; }
.sm-section-title {
  font-family: var(--sm-font-heading);
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--sm-accent);
  display: block;
}
.sm-post-grid { margin-bottom: 0; }
.sm-card:last-child { margin-bottom: 0; }
.sm-404-recent-title {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sm-accent);
  display: inline-block;
}

/* ============================================================
   AFFILIATE DISCLOSURE & LAST UPDATED
   ============================================================ */
.sm-affiliate-notice {
  padding: 10px 16px;
  margin: 0 0 24px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  border-left: 3px solid var(--sm-accent);
  background: #f5f5f5;
  color: #444444;
}
body.sm-dark .sm-affiliate-notice {
  background: #1e1e1e;
  color: #aaaaaa;
}
.sm-last-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 20px;
  background: #f5f5f5;
  color: #444444;
}
body.sm-dark .sm-last-updated {
  background: #1e1e1e;
  color: #aaaaaa;
}

/* ============================================================
   READING LIST / BOOKMARKS
   ============================================================ */
.sm-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--sm-border, #ddd);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--sm-text);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sm-bookmark-btn:hover {
  border-color: var(--sm-accent);
  color: var(--sm-accent);
}
.sm-bookmark-btn.sm-bookmarked {
  background: var(--sm-accent);
  border-color: var(--sm-accent);
  color: #fff;
}
.sm-bookmark-btn svg { flex-shrink: 0; }

/* Reading list page */
.sm-reading-list-wrap { padding: 32px 0; }
.sm-reading-list-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--sm-text-muted, #888);
}
.sm-reading-list-empty svg { margin-bottom: 16px; opacity: 0.3; }
.sm-reading-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.sm-reading-list-clear {
  font-size: 13px;
  color: var(--sm-text-muted, #888);
  background: none;
  border: 1px solid var(--sm-border, #ddd);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
}
.sm-reading-list-clear:hover { border-color: #cc0000; color: #cc0000; }

/* Search input clear button - override browser default blue */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc0000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* Search form on search/404 pages */
.search-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.search-form .search-field {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--sm-border, #ddd);
  border-radius: 4px;
  background: var(--sm-surface, #fff);
  color: var(--sm-text);
  font-size: 15px;
}
.search-form .search-submit {
  padding: 10px 24px;
  background: var(--sm-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: opacity 0.2s;
}
.search-form .search-submit:hover { opacity: 0.85; }

/* ============================================================
   BOOKMARK ICON ON CARDS
   ============================================================ */
.sm-card { position: relative; }
.sm-card-bookmark {
  position: absolute;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 4px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.sm-card-bookmark:hover { background: rgba(0,0,0,0.8); transform: scale(1.1); }
.sm-card-bookmark.sm-bookmarked { background: var(--sm-accent); color: #fff; }
.sm-card-bookmark.sm-pos-top-right    { top: 10px; right: 10px; }
/* If editors pick badge also present, bookmark shifts down */
.sm-card-editors-pick .sm-card-bookmark.sm-pos-top-right { top: 38px; }
.sm-card-bookmark.sm-pos-bottom-right { bottom: 10px; right: 10px; }

/* Header bookmark icon */
/* Header bookmark — matches search/dark toggle style */
.sm-header-bookmark {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sm-header-text) !important;
  padding: 8px;
  border-radius: var(--sm-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sm-transition), color var(--sm-transition);
  text-decoration: none;
  line-height: 0;
}
.sm-header-bookmark:hover { background: rgba(255,255,255,.15); color: var(--sm-header-text) !important; }

.sm-header-bookmark.sm-has-bookmarks { color: var(--sm-header-text) !important; }


/* ─────────────────────────────────────────────────────────
   RIGHT-CLICK DISABLED NOTICE
   Shown briefly when a user attempts to right-click on the site.
   Adapts to light/dark mode via theme variables.
   Centred both horizontally and vertically in the viewport.
   ───────────────────────────────────────────────────────── */
#sm-rclick-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--sm-bg);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  font-family: var(--sm-font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
  max-width: calc(100vw - 32px);
}
#sm-rclick-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media screen and (max-width: 600px) {
  #sm-rclick-notice {
    padding: 12px 18px;
    font-size: 0.9rem;
  }
}


/* ─────────────────────────────────────────────────────────
   FEATURED SLIDER — Netflix-style horizontal carousel
   Shows ~2 cards visible at once, with smooth horizontal
   scroll, scroll-snap, touch swipe, and optional arrows.
   ───────────────────────────────────────────────────────── */
.sm-featured-slider {
  margin: 32px 0;
}
.sm-slider-wrap {
  position: relative;
}
/* Side fades — visible only when scrollable content extends beyond
   the visible area in that direction. JS toggles can-scroll-left/right
   classes on the wrap. */
.sm-slider-wrap::before,
.sm-slider-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.sm-slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--sm-bg), transparent);
}
.sm-slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--sm-bg), transparent);
}
.sm-slider-wrap.can-scroll-left::before { opacity: 1; }
.sm-slider-wrap.can-scroll-right::after { opacity: 1; }
.sm-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sm-slider-track::-webkit-scrollbar { display: none; }

.sm-slider-card {
  flex: 0 0 calc(50% - 8px);
  scroll-snap-align: start;
  background: var(--sm-card-bg);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sm-slider-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.sm-slider-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.sm-slider-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--sm-surface);
  overflow: hidden;
}
.sm-slider-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sm-slider-card-body {
  padding: 14px 16px 16px;
}
.sm-slider-card-cat {
  display: inline-block;
  font-family: var(--sm-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sm-accent);
  margin-bottom: 6px;
}
.sm-slider-card-title {
  font-family: var(--sm-font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--sm-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow buttons — only visible on desktop with hover */
.sm-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sm-border);
  background: var(--sm-bg);
  color: var(--sm-text);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.sm-slider-arrow:hover {
  border-color: var(--sm-accent);
  color: var(--sm-accent);
}
.sm-slider-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.sm-slider-prev { left: -16px; }
.sm-slider-next { right: -16px; }
.sm-slider-arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Show arrows on devices that can hover (mouse-driven) */
@media (hover: hover) and (pointer: fine) {
  .sm-featured-slider.has-arrows .sm-slider-arrow {
    display: flex;
  }
}