/* =========================================================
   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;
}

/* --- Core block palette fixes ---
   Some built-in blocks hardcode light greys instead of using the palette, so
   they don't follow dark mode. Point them at the palette tokens so they adapt
   in both light and dark. */

/* Table → Stripes: core paints odd rows + the bottom border #f0f0f0 (unreadable
   in dark). Use the palette instead. (A per-table background still wins via
   core's .has-background rule.) */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--wp--preset--color--surface-dim);
}

.wp-block-table.is-style-stripes {
  border-bottom-color: var(--wp--preset--color--border);
}

/* Code / Preformatted: no background by default — give them a subtle surface
   box so they read as code in both modes. */
.wp-block-code,
.wp-block-preformatted {
  background-color: var(--wp--preset--color--surface-dim);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.25rem;
  padding: 1rem;
}

/* Search input: core gives it a hardcoded grey border; follow the palette. */
.wp-block-search__input {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-surface);
  border-color: var(--wp--preset--color--border);
}

/* --- 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;
}

/* Per-page opt-out: rc_remove_top_padding meta → rc-no-top-padding body class.
   Zeros both the local padding-top AND WP's global block-gap margin
   (:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }), which is the
   same treatment .rockaden-landing gets at line 1033. */
body.rc-no-top-padding > .wp-site-blocks > main:not(.rockaden-landing),
body.rc-no-top-padding > .wp-site-blocks > .wp-block-group:not(.rockaden-header):not(.rockaden-footer):not(.rockaden-landing) {
  padding-top: 0;
  margin-block-start: 0;
}

/* --- 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;
  }
}

/* --- Feedback form (rockaden/feedback-form) --- */
/* The block is a normal content-width block (so it doesn't fight the constrained
   layout's centring). The form column is capped + left-aligned via this inner
   wrapper — a plain block-level div left-aligns by default — so it lines up with
   the page heading and body text instead of floating in the middle. */
.rockaden-feedback__inner {
  max-width: 36rem;
}

/* Optional centering (block sidebar → Form alignment: Center). */
.rockaden-feedback__inner--center {
  margin-inline: auto;
}

/* Wide / Full alignment widens the block — let the form use the extra space. */
.rockaden-feedback-block.alignwide .rockaden-feedback__inner,
.rockaden-feedback-block.alignfull .rockaden-feedback__inner {
  max-width: none;
}

.rockaden-feedback__intro {
  color: var(--wp--preset--color--on-surface-muted);
}

.rockaden-feedback__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.rockaden-feedback__field label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}

.rockaden-feedback__field input,
.rockaden-feedback__field 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);
  width: 100%;
}

.rockaden-feedback__field textarea {
  max-height: 14rem;
}

.rockaden-feedback__hint {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--on-surface-muted);
}

/* Honeypot: visually + interaction hidden, but not display:none (bots skip those). */
.rockaden-feedback__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rockaden-feedback__submit {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  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;
}

.rockaden-feedback__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);
}

.rockaden-feedback__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.rockaden-feedback__status {
  margin-top: 0.75rem;
  font-size: var(--wp--preset--font-size--small);
  min-height: 1.25rem;
}

.rockaden-feedback__status.is-success {
  color: #1a7f37;
}

.rockaden-feedback__status.is-error {
  color: var(--wp--preset--color--error, #dc2626);
}

/* --- 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;
}

/* --- 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;
}

/* 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 {
  margin: 0;
  display: block;
  aspect-ratio: 1 / 1;
}

.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;
  color: var(--wp--preset--color--on-surface);
}

.rockaden-shop-card__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--wp--preset--color--on-surface-muted, #6b7280);
}

.rockaden-shop-card__desc > :first-child {
  margin-top: 0;
}

.rockaden-shop-card__desc > :last-child {
  margin-bottom: 0;
}

/* Condensed display: image + title only — tighter, centered cards. */
.rockaden-shop-grid--condensed .rockaden-shop-card__body {
  padding: 0.5rem 0.625rem;
}

.rockaden-shop-grid--condensed .rockaden-shop-card__title {
  text-align: center;
}

.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__stock {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: #fee2e2;
  color: #991b1b;
}

html.dark .rockaden-shop-card__stock {
  background-color: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

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

.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 used by the shop grid. (The latest-news and upcoming-events
   blocks ship their own copy of this utility from the plugin.) */
.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-shop-grid__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;
}