/*
Theme Name: Blockbase Child
Template: blockbase
*/

/* =========================================================
   GLOBAL NOTES
   - Classic theme approach (no FSE headers/menus).
   - Your header.php outputs:
       <nav class="main-menu">
         wp_nav_menu( menu_class => 'menu' )  --> UL has class "menu"
       </nav>
   - So we style both: nav.main-menu > ul  and  ul.menu
   - All comments use proper CSS syntax (/* ... */).
   ========================================================= */

/* 1) Global box sizing and small reset // NOT WORKING???*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #111;
  background: #fff;
}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.wp-site-blocks {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important; /* fixed scrollbar issue */
  box-sizing: border-box;
}

.wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* =========================================================
   HEADER + MAIN MENU
   ========================================================= */
.site-header { position: relative; z-index: 1000; }
nav.main-menu  { position: relative; z-index: 1001; }

.site-header {
  background: #fafafa;
  border-bottom: 1px solid #e6e6e6;
  padding: 12px 20px;
}

nav.main-menu > ul,
ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav.main-menu li {
  position: relative;
}

nav.main-menu a,
ul.menu a {
  display: block;
  text-decoration: none;
  color: #111;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}

nav.main-menu a:hover,
nav.main-menu a:focus,
ul.menu a:hover,
ul.menu a:focus {
  background: #eee;
  outline: none;
}

nav.main-menu .current-menu-item > a,
nav.main-menu .current_page_item > a,
ul.menu .current-menu-item > a,
ul.menu .current_page_item > a {
  background: #111;
  color: #fff;
}

/* Submenu dropdowns */
nav.main-menu li ul.sub-menu,
ul.menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 8px;
  min-width: 180px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 9999;
}

nav.main-menu li:hover > ul.sub-menu,
ul.menu li:hover > ul.sub-menu,
nav.main-menu li:focus-within > ul.sub-menu,
ul.menu li:focus-within > ul.sub-menu {
  display: block;
}

nav.main-menu li ul.sub-menu a,
ul.menu li ul.sub-menu a {
  display: block;
  padding: 8px 10px;
  white-space: nowrap;
  border-radius: 6px;
}

/* ===== Mobile-only behaviour for the existing header ===== */
.menu-toggle { display: none; } /* keep hidden on desktop */

@media (max-width: 820px) {
  /* show the button on small screens */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #ddd;
    padding: 8px 10px;
    border-radius: 8px;
  }

  /* collapse the nav by default (so the toggle can open it) */
  nav.main-menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);  /* just below header */
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 12px;
    z-index: 9999;          /* above page content */
  }

  /* when JS toggles the class, reveal the nav */
  nav.main-menu.is-open { display: block; }

  /* stack items vertically on mobile (keeps your styles otherwise) */
  nav.main-menu > ul,
  ul.menu {
    flex-direction: column;
    gap: 8px;
  }

  /* submenus on mobile flow in the document instead of absolute */
  nav.main-menu li ul.sub-menu,
  ul.menu li ul.sub-menu {
    position: static;
    display: none;       /* hidden until parent gets .open (via JS) */
    margin-left: 12px;   /* subtle indent */
    padding-top: 4px;
    border: 0; box-shadow: none;
    min-width: 0;
  }
  nav.main-menu li.open > ul.sub-menu,
  ul.menu li.open > ul.sub-menu { display: block; }
}


/* =========================================================
   GRID FOR SONG CARDS
   ========================================================= */
.song-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.song-tile {
  background: #fff;
  text-align: center;
  transition: transform 0.2s ease;
  position: relative; /* anchor overlay */
}

.song-tile:hover {
  transform: scale(1.02);
}

.song-tile img {
  display: block; /* removes image gaps */
  max-width: 100%;
  height: auto;
  border: none;
}

/* =========================================================
   FILTER FORM STYLES
   ========================================================= */

   /* Filter field labels above inputs */
.filter-form { align-items: flex-start; }           /* let columns stack label+control */
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-label { font-size: 0.78rem; font-weight: 600; color: #555; margin-left: 2px; }

/* keep widths tidy */
.filter-field select,
.filter-field input[type="text"] { min-width: 140px; }

/* mobile keeps wrapping as before */
@media (max-width: 768px) {
  .filter-field { min-width: 140px; }
}


.filter-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 0.75rem 20px;
  background: #f5f5f5;
  box-sizing: border-box;
  align-items: center;
}

.filter-form select {
  min-width: 140px;
  padding: 4px;
  font-size: 14px;
}

.filter-form button {
  padding: 8px 16px;
  background-color: #222;
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 6px;
}

.filter-form button:hover {
  background-color: #444;
}


/* Make the search live on the far right on wide screens */
.filter-form .filter-search {
  min-width: 220px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;

  /* Push to the far right */
  margin-left: auto;
  order: 99; /* ensure it's last even if DOM is earlier */
}

@media (max-width: 768px) {
  .filter-form {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .filter-form .filter-search {
    order: 0;
    margin-left: 0;
    flex: 1 1 100%;
  }
}


/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 1024px) {
  .song-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .song-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .song-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE NAV: TOGGLE BUTTON
   ========================================================= */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.menu-toggle-box {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.menu-toggle-line {
  width: 22px;
  height: 2px;
  background: #111;
}
.menu-toggle-text {
  font-size: 14px;
}

@media (max-width: 768px) {
  .menu-toggle { display: inline-flex; }

  nav.main-menu > ul,
  ul.menu {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-top: 10px;
  }

  nav.main-menu.is-open > ul,
  nav.main-menu.is-open > ul.menu {
    display: flex;
  }

  nav.main-menu li ul.sub-menu,
  ul.menu li ul.sub-menu {
    display: none;
    position: static;
    padding-left: 12px;
    margin: 6px 0 8px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  nav.main-menu li.open > ul.sub-menu,
  ul.menu li.open > ul.sub-menu {
    display: block;
  }

  nav.main-menu a,
  ul.menu a {
    padding: 10px 8px;
    border-radius: 6px;
  }
}

/* =========================================================
   CATALOG TILE PLAYER OVERLAY
   ========================================================= */
.video-card-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  margin-bottom: 6px;
}

.video-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  z-index: 2;
  display: block;
  text-indent: -9999px;
}

.song-tile-title {
  font-size: 0.95rem;
  margin: 6px 0 0;
}

.song-tile-title a {
  color: #111;
  text-decoration: none;
}
.song-tile-title a:hover,
.song-tile-title a:focus {
  text-decoration: underline;
}

/* Action row under the video: Favorite + Download side by side */
.video-actions--player{
  max-width: 1100px;        /* same width as your player */
  margin: 10px auto 0;      /* center container, sit tight under player */
  display: flex;            /* put items on one line */
  justify-content: flex-end;/* align to the right edge */
  align-items: center;
  gap: 10px;                /* space between buttons */
  flex-wrap: wrap;          /* allows wrap on small screens if needed */
  text-align: initial;      /* override any inherited right-align */
}

/* Ensure buttons behave as tidy pills (optional; keep if you like) */
.video-actions--player > * {
  flex: 0 0 auto;           /* don’t stretch */
}


/* Button look + ensure no legacy float interferes */
.video-actions--player .btn-download{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #e0e0e0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  float: none !important;
}

.video-actions--player .btn-download:hover,
.video-actions--player .btn-download:focus{
  background: #d5d5d5;
  border-color: #bbb;
  color: #000;
}


/* Keep tile box 16:9, crop from top like video thumbs */
.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.pdf-viewer {
  max-width: 1100px;
  margin: 1rem auto;
}

/* Song tile titles: smaller + no underline */
.song-grid .video-card__title {
  font-size: 0.9rem;      /* ~14–15px; tweak as you like (e.g., 0.85rem) */
  line-height: 1.2;
  font-weight: 600;       /* or 500 for lighter */
  margin-top: 6px;
}

.song-grid .video-card__title a {
  text-decoration: none;  /* remove underline */
  color: #2563eb;         /* keep the same text color as parent */
}

/* keep it off on hover/focus too (some themes re-add it) */
.song-grid .video-card__title a:hover,
.song-grid .video-card__title a:focus {
  text-decoration: none;
}

/* Optional: clamp to 2 lines so long titles don’t wrap the tile */
.song-grid .video-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-item {
  display: grid;
  grid-template-columns: 1fr 2fr; /* image 1/3, text 2/3 */
  gap: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  align-items: start;
}

/* Image: no aspect-ratio, no object-fit */
.news-thumb-wrap { display: block; width: 100%; max-width: 640px; }
.news-thumb {
  display: block;
  width: 100%;
  height: auto;      /* preserves your 16:9, no crop */
  border-radius: 12px;
}

/* Text: always show everything */
.news-body { overflow: visible; overflow-wrap: anywhere; }

/* Title: smaller, tighter spacing */
.news-title {
  margin: 0 0 4px;        /* less space above and below */
  font-size: 1.05rem;     /* smaller than 1.25rem */
  line-height: 1.3;
  font-weight: 600;       /* slightly bolder if you want emphasis */
}

/* Date: very small, subtle */
.news-meta {
  font-size: 0.75rem;     /* smaller text */
  color: #999;            /* lighter grey */
  margin-bottom: 8px;     /* just a bit of breathing room */
}

/* ===========================
   NEWS: body text refinements
   =========================== */
.news-content,
.news-excerpt {
  font-size: 1rem;   /* default body ~14–15px */
  line-height: 1.2;    /* good readability */
  color: #333;         /* softer than pure black */
}

.news-content p,
.news-excerpt p {
  margin: 0 0 0.4em;
  line-height: 1.35;
}


/* Reduce spacing around each home section */
.home-section {
  margin: 1rem 0;    /* much smaller vertical gap between sections */
  padding: 0;
}

/* Header row */
.home-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;         /* remove extra bottom gap */
  padding: 0.25rem 0;/* just a tiny bit of breathing room */
}

/* Section titles */
.home-section__title {
  font-size: 1.25rem;   /* ~20px, smaller than before */
  font-weight: 600;
  margin: 0;            /* kill top/bottom margins completely */
  line-height: 1.2;
}

/* "View all" link */
.home-section__link {
  font-size: 0.8rem;   /* ~13px */
  font-weight: 400;
  text-decoration: none;
  color: #0073aa;
  margin: 0;           /* no extra spacing */
  padding: 0;          /* no padding */
}
.home-section__link:hover {
  text-decoration: underline;
}

.news-excerpt {
  font-size: 1rem;      /* adjust between 0.95–1.1rem to taste */
  line-height: 1.4;     /* a bit more breathing room */
  margin: 0 0 .5rem;
  color: #444;
}
.news-meta {
  font-size: 0.8rem;
  color: #777;
}

/* Use the same edge gutter as your tiles */
:root{
  --edge-gutter: clamp(16px, 1.2vw, 32px); /* adjust if your tiles use a different inset */
}

/* Home: latest news block */
.home-news .news-list,
.home-news .latest-news{
  padding-left: var(--edge-gutter);
  padding-right: var(--edge-gutter);
}

/* News page: full list */
.page-template-page-news .news-list,
.page-template-page-news .latest-news{
  padding-left: var(--edge-gutter);
  padding-right: var(--edge-gutter);
}

/* If the very first image still kisses the edge due to full-bleed styles: */
.home-news .news-thumb-wrap img,
.page-template-page-news .news-thumb-wrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px; /* optional, matches your tiles */
}


/* Ensure BOTH section headers use the same gutter as the tiles */
.home-section__header {
  padding-left: var(--edge-gutter);
  padding-right: var(--edge-gutter);
}

/* If New Videos still ignores it due to some theme rule, force it */
.home-new-videos .home-section__header {
  padding-left: var(--edge-gutter) !important;
  padding-right: var(--edge-gutter) !important;
}

/* Also make the grid in New Videos use the same gutter (matches song tiles) */
.home-new-videos .song-grid.song-grid--home-row {
  padding-left: var(--edge-gutter);
  padding-right: var(--edge-gutter);
  margin-left: 0;
  margin-right: 0;
}

.home-section.home-news,
.home-section.home-new-videos {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
}

/* Tighten vertical spacing ONLY for the two home sections */
.home-section.home-news,
.home-section.home-new-videos {
  /* kill theme’s vertical block gap inside these sections */
  --wp--style--block-gap: 0 !important;

  /* nuke section margins/padding */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* WordPress core adds top margin between siblings via .wp-site-blocks > * + * */
.wp-site-blocks > * + .home-section.home-news,
.wp-site-blocks > * + .home-section.home-new-videos {
  margin-top: 0 !important;
}

/* If your section is the last item, remove bottom gap too */
.home-section.home-news:last-child,
.home-section.home-new-videos:last-child {
  margin-bottom: 0 !important;
}

/* Header row: remove default spacing */
.home-section.home-news .home-section__header,
.home-section.home-new-videos .home-section__header {
  margin: 0 !important;
  padding-top: .25rem !important;   /* tiny breathing room */
  padding-bottom: .25rem !important;
}

/* Title itself: no extra margin */
.home-section.home-news .home-section__title,
.home-section.home-new-videos .home-section__title {
  margin: 0 !important;
  line-height: 1.2;
}

/* The lists/grids inside: no extra top/bottom spacing */
.home-section.home-news .news-list,
.home-section.home-news .latest-news,
.home-section.home-new-videos .song-grid.song-grid--home-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Make the header a flex container */
.site-header {
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: space-between; /* logo left, menu right */
  background: #fafafa;
  border-bottom: 1px solid #e6e6e6;
  padding: 12px 20px;
}

/* Logo sizing */
.site-branding {
  flex: 0 0 auto; /* don't stretch */
}
.site-logo {
  height: 40px;  /* fits into strip */
  width: auto;
  display: block;
}

/* Nav alignment */
.main-menu {
  flex: 1;               /* take remaining space */
  display: flex;
  justify-content: flex-end; /* push menu to right edge */
}
.main-menu ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

/* ==========================
   FILTERS: responsive toggle
   ========================== */

/* Desktop: filters always visible */
@media (min-width: 769px) {
  .filters-toggle { display: none; }
  .filters-panel { display: block; }
}

/* Mobile: collapsed until button is clicked */
@media (max-width: 768px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    border: 0;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin: 10px 20px;
  }

  .filters-panel { display: none; }
  .filters-panel.is-open { display: block; }
}

/* Landing preview grid: 5 columns (→ 2 rows with 10 items) on desktop */
.preview-grid.video-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .preview-grid.video-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .preview-grid.video-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .preview-grid.video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .preview-grid.video-grid { grid-template-columns: 1fr; } }

/* Tile basics if you need them */
.video-tile .tile-media { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #111; }
.video-tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-tile .tile-thumb { display:block; aspect-ratio:16/9; background:#111; border-radius:14px; overflow:hidden; }
.video-tile .tile-thumb img { width:100%; height:100%; object-fit:cover; }
.video-tile .tile-title { font-size:1rem; margin:.5rem 2px 0; }
.video-tile .tile-title a { color:#111; text-decoration:none; }
.video-tile .tile-title a:hover { text-decoration:underline; }

/* ===========================
   Landing banner
   =========================== */
.landing-banner {
  position: relative;
  margin: 0;             /* flush under header */
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

/* Full-bleed image, tall enough to feel “banner” */
.landing-banner__img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Optional overlay if you uncomment it in the PHP */
.landing-banner__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
}
.landing-banner__overlay h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  margin: 0 0 10px;
}
.landing-banner__overlay .btn { box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* ===========================
   Landing Hero (cleaned)
   =========================== */

/* Tweak overall spacing here */
:root { --hero-gap: 6px; }

/* Even spacing around hero + avoid double gap before previews */
.landing-banner { margin-bottom: var(--hero-gap); }
.landing-hero { padding-block: var(--hero-gap); }
.landing-hero + .landing-previews { margin-top: var(--hero-gap); }
.landing-hero + .landing-previews .landing-section-head { margin-top: 0; }

/* Base (mobile-first): allow wrap, smaller size */
.landing-hero .landing-title {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 490;
  text-align: center;
  letter-spacing: -0.01em;
  white-space: normal;                    /* can wrap on small screens */
  font-size: clamp(12px, 6vw, 20px);      /* smaller on phones */
  line-height: 1.15;
}

/* Desktop/tablet: keep on one line, scale up */
@media (min-width: 700px) {
  .landing-hero .landing-title {
    white-space: nowrap;                  /* one line */
    font-size: clamp(16px, 3vw, 26px);    /* adjust to taste */
    line-height: 1.1;
  }
}

/* Registered mark / superscripts inside the title */
.landing-hero .landing-title sup,
.landing-hero .landing-title .mark-r {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: text-top;
  vertical-align: 0.8em;  /* ↓ negative lowers it (tweak: -0.12em to -0.25em) */
  margin-left: 0.06em;
}

/* Optional: a touch less side padding on very small screens */
@media (max-width: 480px) {
  .landing-hero .landing-container { padding-inline: 12px; }
}

/* Center the CTA and give the button a clean, modern look */
.landing-cta--under-grid {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.landing-cta--under-grid .btn.btn-primary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;         /* pill; change to 10px for rounded rectangle */
  background: #1277ff;
  color: #fff;
  border: 1px solid #0f69e6;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.landing-cta--under-grid .btn.btn-primary:hover {
  background: #0f69e6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18,119,255,.30);
}

.landing-cta--under-grid .btn.btn-primary:active {
  transform: translateY(0);
  background: #0d5bcc;                 /* ← changed (pressed state) */
  box-shadow: 0 2px 6px rgba(18,119,255,.20);  /* ← changed (optional) */
}

.landing-cta--under-grid .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18,119,255,.35);
}

@media (prefers-reduced-motion: reduce) {
  .landing-cta--under-grid .btn.btn-primary { transition: none; }
}

/* ===========================
   Landing: Features
   =========================== */
.landing-features {
  padding-block: 18px;                  /* small vertical breathing room */
}

.landing-features .features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.landing-features .feature {
  text-align: center;
  background: linear-gradient(180deg, #fff, #fafcff);
  border: 1px solid #e9eef5;
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.landing-features .feature h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.landing-features .feature p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;                    /* compact line spacing */
  color: #444;
  max-width: 38ch;                      /* keeps lines readable */
  margin-inline: auto;
}

/* Responsive columns */
@media (max-width: 980px) {
  .landing-features .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .landing-features .features-grid { grid-template-columns: 1fr; }
}

/* ===========================
   Landing: Pricing
   =========================== */

.landing-pricing {
  padding-block: 24px 36px;
  background: #fff;
}

.landing-pricing .landing-h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 14px auto 0;
  padding: 0 12px;
}

@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* Card */
.price-card {
  background: linear-gradient(180deg, #fff, #fafafa);
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Featured (One-Year Plan) */
.price-card--featured {
  border-color: #cfe0ff;
  box-shadow: 0 6px 24px rgba(18,119,255,.08), inset 0 0 0 1px #d9e6ff;
  background: linear-gradient(180deg, #f6faff, #eef4ff);
  position: relative;
}

.price-card--featured::after {
  content: "Best value";
  position: absolute;
  top: -10px; right: 12px;
  background: #1277ff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(18,119,255,.25);
}

/* Head row */
.price-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.price-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.price-amount {
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.price-amount span {
  font-size: .9rem;
  font-weight: 500;
  color: #555;
  margin-left: 4px;
}

/* Features list */
.price-features {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.price-features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 8px;
  font-size: .95rem;
  line-height: 1.35;
  color: #333;
}

.price-features li::before {
  content: "✓";
  display: inline-block;
  width: 18px;
  text-align: center;
  font-weight: 700;
  color: #1a7bff; /* subtle check colour */
}

.price-note,
.pricing-note {
  margin: 2px 0 0;
  text-align: center;
  font-size: .9rem;
  color: #555;
}

/* A small emphasis tag for special terms */
.price-disclaimer {
  margin-top: 2px;
  font-size: .9rem;
  color: #8a5200;
  background: #fff7e6;
  border: 1px solid #ffe4b3;
  border-radius: 10px;
  padding: 8px 10px;
}

/* Pricing buttons: clean + centered + no underline */
.price-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* center text */
  width: 100%;              /* keep full-width "btn-block" look */
  padding: 12px 18px;
  border-radius: 12px;      /* modern rounded rectangle; use 9999px for pill */
  text-align: center;       /* center text inside */
  text-decoration: none !important;   /* no underline */
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Primary colour variant */
.price-card .btn.btn-primary {
  background: #1277ff;
  color: #fff;
  border: 1px solid #0f69e6;
  box-shadow: 0 2px 6px rgba(18,119,255,.20);
}
.price-card .btn.btn-primary:hover,
.price-card .btn.btn-primary:focus {
  background: #0f69e6;
  text-decoration: none;                 /* no underline on hover */
  box-shadow: 0 6px 16px rgba(18,119,255,.30);
  transform: translateY(-1px);
}
.price-card .btn.btn-primary:active {
  background: #0d5bcc;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(18,119,255,.20);
}
.price-card .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(18,119,255,.35),
    0 2px 6px rgba(18,119,255,.20);
}

/* Remove underline on any anchor inside pricing cards */
.price-card a.btn { text-decoration: none !important; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .price-card .btn { transition: none; }
}

/* PMPro Log In → compact CTA and non–full-width button */
:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta { 
  margin-top: 8px;                  /* smaller gap above */
  max-width: fit-content;           /* container only as wide as its contents */
}

/* Compact, centered CTA under the PMPro login form */
:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta {
  /* smaller gap + centered block */
  margin-top: 8px;
  max-width: 420px;           /* keep it from spanning the whole form */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 1) Pull the CTA up tight under the login form */
.pmpro_card.pmpro_login_wrap,
.pmpro_login_wrap {
  padding-bottom: 8px !important;   /* reduce inner padding */
  margin-bottom: 8px !important;    /* reduce outer margin */
}
.pmpro_login_wrap form { margin-bottom: 0 !important; }  /* many themes add form margin */

/* Gutenberg block gap often adds the large space between blocks.
   Nuke the gap ONLY for the block right after the login form. */
.pmpro_login_wrap + .wp-block-shortcode,
.pmpro_login_wrap + .wp-block-group,
.pmpro_login_wrap + .wp-block-paragraph,
.pmpro_login_wrap + * {
  margin-top: 8px !important;       /* was ~1.5–2em by default */
}

/* 2) Center the CTA and keep the nice full-width button inside a narrow column */
:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta {
  margin-top: 8px;                  /* compact gap */
  max-width: 420px;                 /* keep it neat */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Button look (your previous “nice” style) */
:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta .join-btn {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #0ea5e9 !important;
  background: #0ea5e9 !important;
  color: #fff !important;
  text-decoration: none;
  line-height: 1;
}
:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta .join-btn:hover { opacity: .95; }

:where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login, .pmpro)
  #bt-login-join-cta .cta-sub {
  font-size: .9rem;
  color: #555;
  margin-top: 6px;
}

/* Trim PMPro's action links spacing just in case */
.pmpro_login_wrap .pmpro_actions_nav { margin: 8px 0 0 !important; padding: 0 !important; }
.pmpro_login_wrap .pmpro_actions_nav p { margin: 0 !important; }

/* Centered card for PMPro login — scoped ONLY to the wrapper you added */
.bt-login-card {
  display: flex;
  justify-content: center;   /* center the card horizontally */
}

/* The card itself */
.bt-login-card :where(.pmpro_login_wrap, .pmpro_card.pmpro_login_wrap, .pmpro-login, .pmpro-block-login) {
  width: 100%;
  max-width: 420px;          /* compact width */
  margin: 40px 0;            /* space above/below the card only */
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Fields fit the card neatly */
.bt-login-card input[type="text"],
.bt-login-card input[type="email"],
.bt-login-card input[type="password"] {
  width: 100%;
  max-width: 100%;
}

/* Tidy small bits under the form */
.bt-login-card .pmpro_actions_nav,
.bt-login-card .pmpro_actionlinks { margin-top: 10px !important; }


/* Sticky footer: header + main + footer as flex column */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wp-site-blocks { /* your <main> */
  flex: 1 0 auto;
}
.site-footer {
  margin-top: auto; /* pushes footer to the bottom */
}

/* === NEWS: mobile stack fix (place at very end of style.css) === */
@media (max-width: 700px) {
  /* switch the two-column grid to a single column */
  .news-item {
    grid-template-columns: 1fr !important;
  }

  /* give the image some space above the text and let it span full width */
  .news-thumb-wrap {
    display: block;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }
}