/* =========================================================
   Rockaden Theme – custom.css
   Dark mode, fixed header, navigation, cards, footer
   ========================================================= */

/* --- Dark mode overrides --- */
html.dark {
  --wp--preset--color--surface: #121212;
  --wp--preset--color--surface-dim: #1f2937;
  --wp--preset--color--on-surface: #e5e7eb;
  --wp--preset--color--on-surface-muted: #9ca3af;
  --wp--preset--color--primary: #60a5fa;
  --wp--preset--color--primary-light: #93c5fd;
  --wp--preset--color--border: #374151;
  color-scheme: dark;
}

html.dark img {
  opacity: 0.9;
}

/* --- Header height + font size custom properties (density) --- */
:root {
  --rc-header-height: 3.5rem;
  --rc-header-font-size: 0.875rem;
  --rc-header-border-width: 1px;
}

html[data-header-density="compact"] { --rc-header-height: 3rem;  --rc-header-font-size: 0.875rem; }
html[data-header-density="normal"]  { --rc-header-height: 3.5rem; --rc-header-font-size: 0.9375rem; }
html[data-header-density="large"]   { --rc-header-height: 4rem;  --rc-header-font-size: 1rem; }

/* Mobile: always use compact height */
@media screen and (max-width: 767px) {
  :root {
    --rc-header-height: 3rem;
    --rc-header-font-size: 0.875rem;
  }
}

/* --- Sticky footer layout --- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--rc-header-height);
}

body > .wp-site-blocks {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - var(--rc-header-height));
}

body > .wp-site-blocks > main:not(.rockaden-landing),
body > .wp-site-blocks > .wp-block-group:not(.rockaden-header):not(.rockaden-footer):not(.rockaden-landing) {
  flex: 1;
  padding: 1.5rem 1rem;
}

/* --- Fixed header --- */
.rockaden-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--rc-header-height);
  background-color: var(--wp--preset--color--surface);
  border-bottom: var(--rc-header-border-width) solid var(--wp--preset--color--border);
}

.rockaden-header .rockaden-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--rc-header-height);
  padding: 0 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .rockaden-header .rockaden-header-inner {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
  }
}

/* WP admin-bar offset */
.admin-bar .rockaden-header {
  top: 32px;
}

.admin-bar body {
  padding-top: calc(var(--rc-header-height) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .rockaden-header {
    top: 46px;
  }
  .admin-bar body {
    padding-top: calc(var(--rc-header-height) + 46px);
  }
}

/* --- Brand --- */
.rockaden-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.rockaden-brand-logo {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  background-image: var(--rockaden-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.rockaden-brand-text {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 300;
  font-size: var(--rc-header-font-size);
  line-height: 1.15;
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
}

.rockaden-brand-text:hover {
  text-decoration: none;
  color: var(--wp--preset--color--on-surface);
}

/* --- Center navigation (desktop) --- */
.rockaden-nav {
  display: flex;
  justify-content: center;
  gap: 0;
}

.rockaden-nav-link {
  font-weight: 500;
  font-size: var(--rc-header-font-size);
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-nav-link:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  text-decoration: none;
}

/* Header without border (controlled by settings) */
.rockaden-header--no-border {
  border-bottom: none !important;
}

/* --- Contrast header style (light mode) --- */
html[data-header-style="contrast"] .rockaden-header {
  background-color: var(--wp--preset--color--on-surface);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

html[data-header-style="contrast"] .rockaden-brand-text {
  color: #ffffff;
}

html[data-header-style="contrast"] .rockaden-nav-link {
  color: rgba(255, 255, 255, 0.7);
}

html[data-header-style="contrast"] .rockaden-nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

html[data-header-style="contrast"] .rockaden-more-btn {
  color: rgba(255, 255, 255, 0.7);
}

html[data-header-style="contrast"] .rockaden-more-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

html[data-header-style="contrast"] .rockaden-hamburger-btn {
  color: rgba(255, 255, 255, 0.7);
}

html[data-header-style="contrast"] .rockaden-hamburger-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Contrast style in dark mode — lift header from page background */
html.dark[data-header-style="contrast"] .rockaden-header {
  background-color: #1e293b;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark[data-header-style="contrast"] .rockaden-brand-text {
  color: #f1f5f9;
}

html.dark[data-header-style="contrast"] .rockaden-nav-link {
  color: rgba(241, 245, 249, 0.7);
}

html.dark[data-header-style="contrast"] .rockaden-nav-link:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.08);
}

html.dark[data-header-style="contrast"] .rockaden-more-btn {
  color: rgba(241, 245, 249, 0.7);
}

html.dark[data-header-style="contrast"] .rockaden-more-btn:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.08);
}

html.dark[data-header-style="contrast"] .rockaden-hamburger-btn {
  color: rgba(241, 245, 249, 0.7);
}

html.dark[data-header-style="contrast"] .rockaden-hamburger-btn:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.08);
}

/* --- Actions (right side) --- */
.rockaden-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* CTA button (always visible, including mobile) */
.rockaden-cta-btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--rc-header-font-size);
  font-weight: 500;
  color: var(--wp--preset--color--on-surface-muted);
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  text-decoration: none;
  padding: 0.3rem 0.875rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.rockaden-cta-btn:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  border-color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
}

/* Contrast header: light text/border on dark background */
html[data-header-style="contrast"] .rockaden-cta-btn {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}

html[data-header-style="contrast"] .rockaden-cta-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

html.dark[data-header-style="contrast"] .rockaden-cta-btn {
  color: rgba(241, 245, 249, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark[data-header-style="contrast"] .rockaden-cta-btn:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* "Mer" button */
.rockaden-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--rc-header-font-size);
  font-weight: 500;
  color: var(--wp--preset--color--on-surface-muted);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-more-btn:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
}

/* Hamburger button (mobile only) */
.rockaden-hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--on-surface-muted);
  padding: 0.375rem;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-hamburger-btn:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
}

/* --- More dropdown --- */
.rockaden-more-dropdown {
  position: absolute;
  top: var(--rc-header-height);
  right: 1.5rem;
  width: 13rem;
  margin: 0;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
  padding: 0.25rem 0;
  z-index: 60;
}

html.dark .rockaden-more-dropdown {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}

.rockaden-more-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-more-dropdown a:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  text-decoration: none;
}

.rockaden-dropdown-divider {
  border-top: 1px solid var(--wp--preset--color--border);
  margin: 0.25rem 0;
}

.rockaden-dropdown-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--on-surface-muted);
}

/* --- Toggle switch (dark mode) --- */
.rockaden-toggle-switch {
  position: relative;
  background: var(--wp--preset--color--border);
  border: none;
  border-radius: 999px;
  width: 2.25rem;
  height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
}

html.dark .rockaden-toggle-switch {
  background: var(--wp--preset--color--on-surface-muted);
}

.rockaden-toggle-knob {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

html.dark .rockaden-toggle-knob {
  transform: translateX(1rem);
  background: var(--wp--preset--color--on-surface);
}

/* --- Mobile overlay & drawer --- */
.rockaden-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 55;
  opacity: 0;
  transition: opacity 0.2s;
}

.rockaden-mobile-overlay.is-open {
  opacity: 1;
}

.rockaden-mobile-drawer {
  position: fixed;
  top: var(--rc-header-height);
  right: 0;
  width: 14rem;
  height: calc(100vh - var(--rc-header-height));
  background-color: var(--wp--preset--color--surface);
  border-left: 1px solid var(--wp--preset--color--border);
  box-shadow: -4px 0 12px rgb(0 0 0 / 0.08);
  z-index: 56;
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

html.dark .rockaden-mobile-drawer {
  box-shadow: -4px 0 12px rgb(0 0 0 / 0.3);
}

.rockaden-mobile-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
}

.admin-bar .rockaden-mobile-overlay {
  top: 0;
}

.admin-bar .rockaden-mobile-drawer {
  top: calc(var(--rc-header-height) + 32px);
  height: calc(100vh - var(--rc-header-height) - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .rockaden-mobile-drawer {
    top: calc(var(--rc-header-height) + 46px);
    height: calc(100vh - var(--rc-header-height) - 46px);
  }
}

.rockaden-drawer-link {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-drawer-link:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  text-decoration: none;
}

.rockaden-drawer-divider {
  border-top: 1px solid var(--wp--preset--color--border);
  margin: 0.25rem 1rem;
}

.rockaden-drawer-label {
  display: block;
  padding: 0.5rem 1.25rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--on-surface-muted);
  opacity: 0.6;
}

.rockaden-drawer-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
  color: var(--wp--preset--color--on-surface-muted);
}

/* --- Responsive: mobile breakpoint (768px) --- */
@media screen and (max-width: 767px) {
  .rockaden-header .rockaden-header-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
  }

  .rockaden-nav {
    display: none;
  }

  .rockaden-more-btn {
    display: none;
  }

  .rockaden-hamburger-btn {
    display: flex;
  }

  .rockaden-more-dropdown {
    display: none;
  }
}

/* Desktop: hide hamburger, show nav */
@media screen and (min-width: 768px) {
  .rockaden-hamburger-btn {
    display: none;
  }

  .rockaden-mobile-overlay,
  .rockaden-mobile-drawer {
    display: none;
  }
}

/* --- Cards --- */
.rockaden-card {
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
  transition: box-shadow 0.2s;
}

.rockaden-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}

html.dark .rockaden-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}

/* --- Footer --- */
.rockaden-footer {
  border-top: 1px solid var(--wp--preset--color--border);
  margin-top: auto;
}

.rockaden-footer a {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.rockaden-footer a:hover {
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
}

/* --- Sidebar navigation --- */
.rockaden-sidebar-nav {
  border-right: 1px solid var(--wp--preset--color--border);
  padding-right: 1.5rem;
}

.rockaden-sidebar-nav .wp-block-navigation-item a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-sidebar-nav .wp-block-navigation-item a:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
}

/* --- Language switcher --- */
.rockaden-lang-switcher {
  display: inline-flex;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.25rem;
  overflow: hidden;
}

.rockaden-lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  color: var(--wp--preset--color--on-surface-muted);
  transition: color 0.15s, background-color 0.15s;
}

.rockaden-lang-btn:hover {
  color: var(--wp--preset--color--on-surface);
}

.rockaden-lang-btn.is-active {
  background-color: var(--wp--preset--color--primary);
  color: #ffffff;
}

/* --- Info panel --- */
.rockaden-info-panel {
  background-color: var(--wp--preset--color--surface-dim);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

/* --- Post item layout (shared by post list + single post) --- */
/*
 * Sidebar uses flex layout with blockGap in the template. display:contents
 * on the author block lets avatar and name be separate flex children.
 * Avatar is pushed to its own line via order + flex-basis.
 */
.rockaden-post-sidebar {
  width: 100%;
}

.rockaden-post-sidebar .wp-block-post-author__content {
  flex-grow: 0;
  flex-basis: auto;
}

.rockaden-post-sidebar .wp-block-post-author {
  display: contents;
}

.rockaden-post-sidebar .wp-block-post-author__avatar {
  order: 10;
  flex-basis: 100%;
}

.rockaden-post-sidebar .wp-block-post-terms a,
.rockaden-post-sidebar .wp-block-post-author a {
  color: var(--wp--preset--color--on-surface-muted);
}

.rockaden-post-sidebar .wp-block-post-terms a:hover,
.rockaden-post-sidebar .wp-block-post-author a:hover {
  color: var(--wp--preset--color--on-surface);
}

.rockaden-post-sidebar .wp-block-post-terms:empty {
  display: none;
}

.rockaden-post-content {
  flex: 1;
  min-width: 0;
}

/* Featured image thumbnail in post listings — mobile: stacked */
.rockaden-post-item {
  flex-direction: column;
}

.rockaden-post-thumb {
  align-self: center;
  max-width: 70%;
}

.rockaden-post-thumb img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

/* Desktop: restore full thumbnail sizing */
@media (min-width: 768px) {
  .rockaden-post-thumb img {
    max-height: none;
    aspect-ratio: 4 / 3;
  }
}

/* Desktop: side-by-side columns */
@media (min-width: 768px) {
  .rockaden-post-item {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .rockaden-post-sidebar {
    flex-shrink: 0;
    width: 9rem;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
  }

  .rockaden-post-sidebar .wp-block-post-author {
    display: flex;
  }

  .rockaden-post-sidebar .wp-block-post-author__avatar {
    order: unset;
    flex-basis: auto;
  }

  .rockaden-post-thumb {
    align-self: auto;
    flex-shrink: 0;
    width: 13rem;
    max-width: none;
  }
}

/* --- Comments --- */
.rockaden-post-content .wp-block-comments {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.wp-block-post-comments-form {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.wp-block-post-comments-form .comment-reply-title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 300;
}

.wp-block-post-comments-form .comment-form label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}

.wp-block-post-comments-form .comment-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form .comment-form textarea {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.25rem;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-surface);
}

.wp-block-post-comments-form .comment-form textarea {
  max-height: 10rem;
}

.wp-block-post-comments-form .logged-in-as {
  display: none;
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .comment-form-cookies-consent label {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--on-surface-muted);
}

/* Outlined button style — shared by submit, "Läs mer", comment links */
.wp-block-post-comments-form .form-submit input[type="submit"] {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--wp--preset--color--on-surface-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.wp-block-post-comments-form .form-submit input[type="submit"]:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  border-color: var(--wp--preset--color--on-surface-muted);
}

/* --- Comment button in post list (outlined, injected by JS) --- */
.rockaden-comment-btn {
  margin-left: 0.5rem;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--wp--preset--color--on-surface-muted);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.rockaden-comment-btn:hover {
  color: var(--wp--preset--color--on-surface);
  background-color: var(--wp--preset--color--surface-dim);
  border-color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
}

/* --- Card meta links (news-grid) --- */
.rockaden-card-meta a {
  color: var(--wp--preset--color--on-surface-muted);
}

.rockaden-card-meta a:hover {
  color: var(--wp--preset--color--on-surface);
}

/* --- Author header (author.html) --- */
.rockaden-author-header {
  align-items: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.rockaden-author-header .wp-block-avatar img {
  border-radius: 50%;
}

.rockaden-author-header .wp-block-query-title {
  margin: 0;
  font-weight: 300;
}

.wp-block-post-author-biography:empty {
  display: none;
}

/* --- Pagination (query + comments) --- */
.wp-block-query-pagination,
.wp-block-comments-pagination {
  gap: 0.25rem;
  margin-top: 2rem;
}

.wp-block-query-pagination-numbers,
.wp-block-comments-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-comments-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
  transition: background-color 0.15s;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-comments-pagination-numbers .page-numbers:hover {
  background-color: var(--wp--preset--color--surface-dim);
  text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-comments-pagination-numbers .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  color: #fff;
  font-weight: 500;
}

.wp-block-query-pagination-numbers .page-numbers.current:hover,
.wp-block-comments-pagination-numbers .page-numbers.current:hover {
  background-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .page-numbers.dots,
.wp-block-comments-pagination-numbers .page-numbers.dots {
  color: var(--wp--preset--color--on-surface-muted);
  cursor: default;
}

.wp-block-query-pagination-numbers .page-numbers.dots:hover,
.wp-block-comments-pagination-numbers .page-numbers.dots:hover {
  background: none;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-comments-pagination-previous,
.wp-block-comments-pagination-next {
  font-size: 1.25rem;
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-comments-pagination-previous:hover,
.wp-block-comments-pagination-next:hover {
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
}

/* --- Right sidebar panel --- */
.rc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rc-sidebar .rc-sidebar-card {
  background-color: var(--wp--preset--color--surface-dim);
  border-radius: 0.5rem;
  padding: 0.75rem;
  align-self: stretch;
  font-size: var(--wp--preset--font-size--small);
}

.rc-sidebar-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

.rc-sidebar-card img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.rc-sidebar .rc-sidebar-card.rc-sidebar-card--full-bleed {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.rc-sidebar-card--full-bleed img {
  border-radius: 0;
}

/* Collapse sidebar column when panel is hidden */
.rc-sidebar-column:has(.rc-sidebar-panel--hidden) {
  display: none;
}

.rc-content-columns:has(.rc-sidebar-panel--hidden) > .wp-block-column:not(.rc-sidebar-column) {
  flex-basis: 100% !important;
}

/* Mobile: sidebar stacks below content with top separator */
@media screen and (max-width: 767px) {
  .rc-sidebar-column {
    border-top: 1px solid var(--wp--preset--color--border);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
  }
}

/* =========================================================
   Landing page — full-bleed sections, tightened typography
   ========================================================= */

:root {
  --rockaden-cta-yellow: #f7c948;
  --rockaden-cta-yellow-hover: #e0b03a;
  --rockaden-landing-max: 1280px;
}

/* Landing main has no default padding (the rule above excludes
   .rockaden-landing). margin-block-start zeroes WP's global block-gap rule
   that adds 1.5rem to any non-first child of .wp-site-blocks; the global
   rule is `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }` with
   specificity 0, so this selector (22) wins without !important.
   overflow-x:clip prevents the hero's 100vw negative-margin breakout from
   triggering a horizontal scrollbar. */
body > .wp-site-blocks > main.rockaden-landing {
  overflow-x: clip;
  margin-block-start: 0;
}

/* Section headings: smaller and tighter than the global h2 (2.25rem). */
.rockaden-landing-why__heading,
.rockaden-landing-news-shop__heading {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-why__heading,
  .rockaden-landing-news-shop__heading {
    font-size: 1.375rem;
  }
}

/* --- Hero ---
   Full-bleed breakout: WP's layout cascade may keep the cover constrained
   to its parent (post-content / main) even with alignfull, especially when
   global `:where(.is-layout-constrained)` rules win over our overrides.
   The negative-margin trick forces the hero to span 100vw regardless of
   what any parent's max-width says. */
.rockaden-landing-hero {
  position: relative;
  color: #ffffff;
  min-height: 0;
}

.rockaden-landing-hero.wp-block-cover {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  padding: 2.5rem 1.5rem;
  align-items: flex-start;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-hero.wp-block-cover {
    padding: 3.5rem 2rem;
  }
}

/* Override the default 50% black dim with our on-surface theme color so
   the hero matches the rest of the dark UI without needing overlayColor
   in block attributes (which causes save/reparse class mismatches). */
.rockaden-landing-hero .wp-block-cover__background {
  background-color: var(--wp--preset--color--on-surface);
}

.rockaden-landing-hero .wp-block-cover__inner-container {
  max-width: var(--rockaden-landing-max);
  margin: 0 auto;
  width: 100%;
}

.rockaden-landing-hero__title {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1.15;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-hero__title {
    font-size: 2.25rem;
  }
}

.rockaden-landing-hero__subtitle {
  color: #ffffff;
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
  max-width: 36rem;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-hero__subtitle {
    font-size: 1.0625rem;
  }
}

.rockaden-landing-hero__buttons {
  margin-top: 1.25rem !important;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rockaden-landing-hero .rockaden-cta-primary .wp-block-button__link {
  background-color: var(--rockaden-cta-yellow);
  color: #1a1a1a;
  border: 1px solid var(--rockaden-cta-yellow);
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background-color 0.15s, border-color 0.15s;
}

.rockaden-landing-hero .rockaden-cta-primary .wp-block-button__link:hover {
  background-color: var(--rockaden-cta-yellow-hover);
  border-color: var(--rockaden-cta-yellow-hover);
  color: #1a1a1a;
}

.rockaden-landing-hero .rockaden-cta-outline .wp-block-button__link {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background-color 0.15s, border-color 0.15s;
}

.rockaden-landing-hero .rockaden-cta-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* --- Section wrappers (Why / Upcoming / News-Shop) ---
   Tight padding + zero block-gap between sections so the page fits more on
   one screen. WP's global rule `:root :where(.is-layout-constrained) > * {
   margin-block-start: 1.5rem }` would otherwise add 24px between each
   section; same specificity (10) as our class selector means our later rule
   wins without !important. A 1px border separates Why from Upcoming since
   they share the same gray background. */
.rockaden-landing-why,
.rockaden-landing-news-shop {
  padding: 1rem 1rem;
  margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-why,
  .rockaden-landing-news-shop {
    padding: 1.25rem 1.5rem;
  }
}


/* --- Why section ---
   Layout is native wp:columns (60/40). align-items: stretch is the column
   default, so both columns share the taller column's height. Heading sits
   inside the left column above the cards (so the image's top edge lines
   up with the heading). On mobile (≤782px), wp:columns stacks naturally. */
.rockaden-landing-why {
  /* No section background — sits on the body (white). A hairline at the
     bottom separates it from the next white section (News+Shop). */
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 0.75rem 1rem;
}

@media screen and (min-width: 768px) {
  .rockaden-landing-why {
    padding: 1rem 1.5rem;
  }
}

/* Tight sibling spacing inside the cards column (heading + 3 cards). WP's
   global block-gap is 1.5rem; same selector specificity (10) as our
   rule means our later rule wins without !important. */
.rockaden-landing-why__cards-col > * + * {
  margin-block-start: 0.5rem;
}

/* Right column is a flex container so the image figure can stretch
   vertically to match the column height (which equals the cards column). */
.rockaden-landing-why__media-col {
  display: flex;
  flex-direction: column;
}

.rockaden-landing-why__media-col > .rockaden-landing-why__image {
  flex: 1;
  margin: 0;
  min-height: 0;
}

.rockaden-landing-why__media-col > .rockaden-landing-why__image img {
  width: 100%;
  height: 100%;
  /* Cap the image height so the section doesn't grow unboundedly on very
     wide viewports (where 40% of the section becomes a tall image due to
     the natural aspect ratio). object-fit: cover crops the rest. If the
     editor sets an explicit aspect-ratio in the image inspector, that
     applies up to this max-height cap. */
  max-height: 240px;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

.rockaden-feature-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
}

.rockaden-feature-card__icon {
  font-size: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  line-height: 1;
}

.rockaden-feature-card__body {
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.rockaden-feature-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
}

.rockaden-feature-card__text {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--on-surface-muted);
  margin: 0;
  line-height: 1.4;
}

/* --- Upcoming events --- */
.rockaden-upcoming-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media screen and (min-width: 640px) {
  .rockaden-upcoming-events__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .rockaden-upcoming-events__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rockaden-event-card {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.5rem 0.625rem;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
}

.rockaden-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  padding: 0.375rem 0;
  background-color: var(--wp--preset--color--surface-dim);
  border-radius: 0.375rem;
  line-height: 1.1;
}

.rockaden-event-card__day {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface);
}

.rockaden-event-card__month {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--on-surface-muted);
}

.rockaden-event-card__body {
  flex: 1;
  min-width: 0;
}

.rockaden-event-card__title {
  margin: 0 0 0.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.rockaden-event-card__time {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wp--preset--color--on-surface-muted);
}

.rockaden-event-card__link {
  display: inline-block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.rockaden-event-card--training { border-left: 3px solid var(--wp--preset--color--cat-training); }
.rockaden-event-card--tournament { border-left: 3px solid var(--wp--preset--color--cat-tournament); }
.rockaden-event-card--junior { border-left: 3px solid var(--wp--preset--color--cat-junior); }
.rockaden-event-card--allsvenskan { border-left: 3px solid var(--wp--preset--color--cat-allsvenskan); }
.rockaden-event-card--skolschack { border-left: 3px solid var(--wp--preset--color--cat-skolschack); }

/* --- News + Shop two-column ---
   Layout is native wp:columns (50/50, stacks below 782px by default). */
.rockaden-landing-news-shop {
  background-color: var(--wp--preset--color--surface);
}

/* Tight sibling spacing inside each column (heading + content blocks).
   Default WP block-gap (1.5rem) is too loose for the section padding we
   use; same specificity wins via source order. */
.rockaden-landing-news-shop__news > * + *,
.rockaden-landing-news-shop__shop > * + * {
  margin-block-start: 0.75rem;
}

/* Calendar nested inside the news-shop right column: force a vertical stack
   regardless of viewport (the global events rule otherwise switches to 4
   columns at ≥1024px, which is too cramped inside a half-width container). */
.rockaden-landing-news-shop__shop .rockaden-upcoming-events__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Extra breathing room before the secondary heading ("Kommande aktiviteter")
   that follows the shop grid in the same column. Higher specificity (20)
   than the > * + * override (10) so this beats it cleanly. */
.rockaden-landing-news-shop__shop > .rockaden-landing-news-shop__heading--secondary {
  margin-block-start: 1.25rem;
}

/* News list */
.rockaden-latest-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Flex (not grid) so cards without an image don't squeeze the body into a
   narrow column; the body just claims the whole row. With media, the image
   becomes a fixed-width sibling and body fills the rest. */
.rockaden-news-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
  transition: box-shadow 0.2s;
}

@media screen and (min-width: 480px) {
  .rockaden-news-card {
    flex-direction: row;
    align-items: stretch;
    gap: 0.875rem;
  }
  .rockaden-news-card__media {
    flex-shrink: 0;
    width: 6.5rem;
    align-self: flex-start;
  }
}

.rockaden-news-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
}

html.dark .rockaden-news-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}

.rockaden-news-card__media {
  display: block;
}

.rockaden-news-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.375rem;
  display: block;
}

.rockaden-news-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.rockaden-news-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.rockaden-news-card__title a {
  color: var(--wp--preset--color--on-surface);
}

.rockaden-news-card__title a:hover {
  color: var(--wp--preset--color--primary);
}

.rockaden-news-card__date {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wp--preset--color--on-surface-muted);
}

/* Clamp visible excerpt to 3 lines; the full text remains in the DOM for SEO. */
.rockaden-news-card__excerpt {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--wp--preset--color--on-surface-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rockaden-news-card__more {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.rockaden-news-card__more::after {
  content: " →";
}

.rockaden-news-card__more:hover {
  text-decoration: underline;
}

/* Shop list */
.rockaden-shop-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.rockaden-shop-grid--grid .rockaden-shop-grid__list {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 768px) {
  .rockaden-shop-grid--grid .rockaden-shop-grid__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Column variant always single column — cards become horizontal (image
   left, info right) so the image stays small relative to the card and
   the section doesn't blow up vertically. Used on the landing page's
   right-side shop list. */
.rockaden-shop-grid--column .rockaden-shop-grid__list {
  grid-template-columns: 1fr;
}

.rockaden-shop-card {
  display: flex;
  flex-direction: column;
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.rockaden-shop-grid--column .rockaden-shop-card {
  flex-direction: row;
  align-items: stretch;
}

.rockaden-shop-card__media {
  /* Element is an <a> linking to the single page; needs display:block
     so width / aspect-ratio apply (anchors are inline by default). */
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--wp--preset--color--surface-dim);
}

.rockaden-shop-grid--column .rockaden-shop-card__media {
  flex-shrink: 0;
  width: 5rem;
}

.rockaden-shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rockaden-shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem 0.75rem;
}

.rockaden-shop-grid--column .rockaden-shop-card__body {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
}

.rockaden-shop-card__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}

.rockaden-shop-card__title a {
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
}

.rockaden-shop-card__title a:hover {
  color: var(--wp--preset--color--primary);
}

.rockaden-shop-card__price {
  margin: 0;
  font-size: 0.875rem;
}

.rockaden-shop-card__price-original {
  color: var(--wp--preset--color--on-surface-muted);
  margin-right: 0.35rem;
  font-weight: 400;
}

.rockaden-shop-card__price-sale {
  color: var(--wp--preset--color--on-surface);
  font-weight: 600;
}

.rockaden-shop-card__buy {
  align-self: flex-start;
  background-color: var(--rockaden-cta-yellow);
  color: #1a1a1a;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s;
}

.rockaden-shop-card__buy:hover {
  background-color: var(--rockaden-cta-yellow-hover);
  color: #1a1a1a;
  text-decoration: none;
}

/* "More" link shared by all three blocks */
.rockaden-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.rockaden-more-link::after {
  content: "→";
  transition: transform 0.15s;
}

.rockaden-more-link:hover::after {
  transform: translateX(2px);
}

.rockaden-latest-news__more,
.rockaden-shop-grid__more,
.rockaden-upcoming-events__more {
  margin-top: 0.625rem;
  margin-bottom: 0;
}

/* =========================================================
   Shop archive + single page
   ========================================================= */

.rockaden-archive-shop {
  padding: 1.5rem 1rem 2rem;
}

@media screen and (min-width: 768px) {
  .rockaden-archive-shop {
    padding: 2rem 1.5rem 3rem;
  }
}

.rockaden-archive-shop__heading {
  margin: 0 0 1.25rem;
}

.rockaden-single-shop {
  padding: 1.5rem 1rem 2rem;
  max-width: 720px;
}

.rockaden-single-shop__back {
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.rockaden-single-shop__back a {
  color: var(--wp--preset--color--on-surface-muted);
  text-decoration: none;
}

.rockaden-single-shop__back a:hover {
  color: var(--wp--preset--color--primary);
}

.rockaden-single-shop__title {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 1rem;
}

.rockaden-single-shop__image {
  margin: 0 0 1.5rem;
}

.rockaden-single-shop__image img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  border-radius: 0.5rem;
}