/* =========================================================
   NELIA STUDIO — SCOPED ADDITIONAL CSS
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --nelia-red: #e53935;
  --nelia-red-bright: #ff5a50;
  --nelia-bg-dark: #000000;
  --nelia-panel: #111111;
  --nelia-text: #ffffff;
  --nelia-text-dim: #dddddd;
}

/* =========================================================
   1) PORTFOLIO PAGE — HERO + GRID + CARDS
   ========================================================= */

.portfolio-hero {
  text-align: center;
  padding: 4rem 1.5rem 2.5rem;
  background: var(--nelia-bg-dark);
  color: var(--nelia-text);
}

.portfolio-hero h2 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
}

.portfolio-hero p {
  max-width: 700px;
  margin: 0.5rem auto 0;
  line-height: 1.6;
  color: var(--nelia-text-dim);
}
/* =========================================
   SOCIAL CAMPAIGNS — FORCE EQUAL HEIGHT CARDS (STRONG OVERRIDE)
   Uses your existing structure: .photo-section + Columns + .photo-card
   ========================================= */

.photo-section .wp-block-columns {
  align-items: stretch !important;
}

.photo-section .wp-block-column {
  display: flex !important;
  align-self: stretch !important;
}

.photo-section .wp-block-column > .wp-block-group.photo-card,
.photo-section .wp-block-column > .photo-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
}

/* Keep videos consistent and pinned toward the bottom */
.photo-section .wp-block-group.photo-card video {
  width: 100% !important;
  margin-top: auto !important;
}

.portfolio-grid {
  padding: 2rem 1.5rem 4rem;
  background: var(--nelia-bg-dark);
}

/* Use CSS grid inside the columns wrapper for 4/2/1 layout */
.portfolio-grid .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .portfolio-grid .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .portfolio-grid .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  position: relative;
  background: var(--nelia-panel);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.25);
  border: 1px solid rgba(229, 57, 53, 0.4);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.portfolio-card h3 {
  color: var(--nelia-text);
  margin-bottom: 0.75rem;
}

.portfolio-card p {
  color: var(--nelia-text-dim);
  line-height: 1.5;
  flex: 1;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.8);
  border-color: var(--nelia-red-bright);
}

/* Make whole card clickable while keeping button usable */
.portfolio-card .card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.portfolio-card .wp-block-button {
  position: relative;
  z-index: 2;
}

.portfolio-card .wp-block-button__link {
  background: var(--nelia-red);
  color: var(--nelia-text);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 0 8px rgba(229, 57, 53, 0.7);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

.portfolio-card .wp-block-button__link:hover {
  background: var(--nelia-red-bright);
  box-shadow: 0 0 14px rgba(255, 90, 80, 1);
  transform: translateY(-1px);
}

/* =========================================================
   2) SHARED SECTIONS — ABOUT, WORK WITH ME, SOCIAL, PHOTOGRAPHY
   ========================================================= */

.photo-section {
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 2rem 1.5rem 2.5rem;
  background: var(--nelia-bg-dark);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.45);
  border: 2px solid var(--nelia-red);
  color: var(--nelia-text);
}

.photo-section h2 {
  margin-bottom: 0.75rem;
}

.photo-section > p {
  color: var(--nelia-text-dim);
}

/* Generic card used in About, Work With Me, Social, Photography */
.photo-card {
  background: var(--nelia-panel);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(229, 57, 53, 0.7);
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.photo-card p {
  color: var(--nelia-text-dim);
  line-height: 1.5;
}

.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.9);
  border-color: var(--nelia-red-bright);
}

/* Card-height helper when you want even grids */
.uniform-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Columns inside photo-section only */
.photo-section .wp-block-columns {
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.photo-section .wp-block-column {
  max-width: 360px;
}

/* Small red-hat or icon wrapper */
.icon-wrapper,
.hat-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}

.icon-wrapper svg {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon-wrapper svg:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(229, 57, 53, 0.8));
}

/* Lists inside these panels */
.photo-section ul {
  text-align: left;
  line-height: 1.6;
  color: var(--nelia-text-dim);
  padding-left: 1.1rem;
}

.photo-section ul li {
  margin-bottom: 0.8rem;
}

/* Optional highlight for job/org names */
.job-title {
  color: var(--nelia-red);
  font-weight: 600;
}

.org-name {
  color: #ffffff;
  font-weight: 700;
}

/* =========================================================
   3) SOCIAL / LITTLE RED HAT — EMBED TIDYING
   ========================================================= */

.photo-card .social-embed iframe,
.photo-card iframe {
  max-width: 100%;
}

.photo-card .social-embed {
  margin-top: 0.75rem;
}

/* =========================================================
   4) MOTION / WORK WITH ME HERO (TEXT PANELS)
   ========================================================= */

.motion-hero {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  padding: 3.5rem 1.5rem 2rem;
  color: var(--nelia-text);
}

.motion-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 0.75rem;
}

.motion-hero p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--nelia-text-dim);
}

.motion-section {
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 2rem 1.5rem 2.5rem;
  background: var(--nelia-bg-dark);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.5);
  border: 2px solid var(--nelia-red);
  color: var(--nelia-text);
}

.motion-card {
  background: var(--nelia-panel);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  border: 2px solid var(--nelia-red);
  box-shadow: 0 0 10px rgba(229, 57, 53, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.motion-card h3 {
  margin-bottom: 0.5rem;
  color: var(--nelia-text);
}

.motion-card p {
  color: var(--nelia-text-dim);
}

.motion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(229, 57, 53, 1);
  border-color: var(--nelia-red-bright);
}

/* Center motion embeds */
.motion-card figure.wp-block-embed,
.motion-card .motion-embed,
.motion-card iframe,
.motion-card video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.motion-card .instagram-media {
  margin-left: auto !important;
  margin-right: auto !important;
}

.motion-card figure.wp-block-embed,
.motion-card .motion-embed {
  border-radius: 14px;
  overflow: hidden;
}

/* =========================================================
   5) CONTACT PAGE (only page ID 287)
   ========================================================= */

.page-id-287 {
  background: var(--nelia-bg-dark) !important;
  color: var(--nelia-text) !important;
}

.page-id-287 .wp-block-post-content {
  background: transparent !important;
  color: var(--nelia-text) !important;
}

.page-id-287 .wp-block-paragraph,
.page-id-287 .wp-block-jetpack-contact-form {
  background: var(--nelia-panel);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.page-id-287 label {
  color: var(--nelia-text);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.page-id-287 input,
.page-id-287 textarea {
  background: #f5f5f5;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem;
  width: 100%;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.page-id-287 input:focus,
.page-id-287 textarea:focus {
  outline: none;
  border-color: var(--nelia-red);
  box-shadow: 0 0 6px rgba(229, 57, 53, 0.6);
}

.page-id-287 button,
.page-id-287 .wp-block-button__link {
  background: var(--nelia-red);
  color: var(--nelia-text);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.page-id-287 button:hover,
.page-id-287 .wp-block-button__link:hover {
  background: var(--nelia-red-bright);
  box-shadow: 0 0 10px rgba(255, 90, 80, 0.8);
}

/* =========================================================
   HEADER / LOGO / TOP BAR
   ========================================================= */

.site-header,
.awp-header,
.awp-main-header {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(229,57,53,0.5);
}

.site-header a,
.awp-header a,
.awp-main-header a {
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-header a:hover,
.awp-header a:hover,
.awp-main-header a:hover {
  color: #e53935 !important;
  text-shadow: 0 0 10px rgba(229,57,53,0.8);
}

/* Dropdown menus */
.main-navigation ul ul,
.awp-header .main-navigation ul ul,
.site-header .main-navigation ul ul {
  background: #000000 !important;
  border: 1px solid rgba(229,57,53,0.5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(229,57,53,0.25);
}

.main-navigation ul ul li a,
.awp-header .main-navigation ul ul li a,
.site-header .main-navigation ul ul li a {
  color: #ffffff !important;
  padding: 0.75rem 1.25rem;
  display: block;
}

.main-navigation ul ul li a:hover,
.awp-header .main-navigation ul ul li a:hover,
.site-header .main-navigation ul ul li a:hover {
  background: #e53935 !important;
  color: #ffffff !important;
}

/* Lock logo size */
.site-logo img,
.custom-logo,
.logo img,
.header-logo img,
.navbar-brand img,
.custom-logo-link img {
  max-height: 44px !important;
  height: auto !important;
  width: auto !important;
  transform: none !important;
}

.is-sticky .site-logo img,
.is-sticky .custom-logo,
.is-sticky .header-logo img,
.is-sticky .custom-logo-link img,
.awp-sticky-header .logo img,
header.is-sticky .logo img {
  max-height: 44px !important;
  height: auto !important;
  transform: none !important;
}

/* Keep header padding consistent */
.site-header,
.awp-header,
.awp-sticky-header,
header.site-header,
header.awp-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Top social bar */
.custom-header-topbar {
  background: #000000;
  border-bottom: 2px solid #e53935;
  padding: 6px 1.5rem;
}

.header-top-text {
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin: 0;
}

.header-top-social {
  justify-content: flex-end;
}

.header-top-social .wp-social-link svg {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.header-top-social .wp-social-link:hover svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(229,57,53,0.85));
}

/* =========================================================
   GLOBAL DARK BACKGROUND FIXES
   ========================================================= */

html,
body {
  background: #000000 !important;
}

.site,
.wp-site-blocks,
.site-content,
.content-area,
.awp-content-area,
.entry-content,
.wp-block-post,
.wp-block-post-content {
  background: #000000 !important;
}

/* Make inner groups transparent so panels show */
.wp-block-group,
.wp-block-columns {
  background-color: transparent !important;
}

/* FINAL MOBILE WHITE-BG FIX */
@media (max-width: 782px) {
  html,
  body,
  body.custom-background {
    background-color: #000000 !important;
  }

  .site,
  .hfeed,
  .site-main,
  .site-content,
  .content-area,
  .awp-content-area,
  .awp-main-wrapper,
  .awp-main-container,
  .awp-page,
  .wp-site-blocks,
  .wp-block-post,
  .wp-block-post-content,
  .page,
  .page .site-main {
    background-color: #000000 !important;
  }

  .site-footer,
  .footer-widgets,
  .awp-footer {
    background-color: #000000 !important;
  }
}

/* =========================================================
   MOBILE NAVIGATOR WHITE BACKGROUND FIX
   ========================================================= */

@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container .wp-block-navigation__container,
  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container,
  .menu-modal,
  .menu-modal.active,
  .mobile-menu,
  .awp-mobile-menu,
  .offcanvas,
  .offcanvas.show,
  nav[aria-label*="Mobile"],
  .navbar-collapse,
  .navbar-collapse.collapse.show {
    background: #000000 !important;
    color: #ffffff !important;
  }

  .wp-block-navigation__responsive-container a,
  .wp-block-navigation__submenu-container a,
  .mobile-menu a,
  .awp-mobile-menu a,
  .menu-modal a,
  .offcanvas a,
  .navbar-collapse a {
    color: #ffffff !important;
  }

  .wp-block-navigation__responsive-container a:hover,
  .wp-block-navigation__submenu-container a:hover,
  .mobile-menu a:hover,
  .awp-mobile-menu a:hover,
  .menu-modal a:hover,
  .offcanvas a:hover,
  .navbar-collapse a:hover {
    color: #e53935 !important;
  }

  .wp-block-navigation__responsive-container::backdrop,
  .menu-modal::backdrop,
  .offcanvas-backdrop,
  .offcanvas-backdrop.show {
    background: rgba(0,0,0,0.7) !important;
  }
}

/* =========================================================
   MOBILE NAV – ALIGN DROPDOWN ARROWS RIGHT
   ========================================================= */

@media (max-width: 1024px) {
  .wp-block-navigation__submenu-icon,
  .wp-block-navigation__submenu-icon svg,
  .menu-item-has-children > button svg,
  .menu-item-has-children > .dropdown-toggle svg {
    margin-left: auto !important;
    margin-right: 0 !important;
    float: right !important;
    display: inline-block !important;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content,
  .mobile-menu li a,
  .menu-modal li a {
    padding-right: 2.2rem !important;
  }

  .menu-item-has-children > button,
  .menu-item-has-children > .dropdown-toggle {
    right: 0 !important;
    left: auto !important;
    position: absolute !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   CURRENT PROJECTS — PANEL + GRID + CARDS
   ========================================================= */

.ns-current-projects {
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 2.5rem 1.5rem 3rem;
  background: var(--nelia-bg-dark);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.45);
  border: 2px solid var(--nelia-red);
  color: var(--nelia-text);
}

.ns-current-hero {
  text-align: left;
  margin-bottom: 2rem;
}

.ns-current-title {
  font-size: 2.3rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.ns-current-subtitle {
  font-size: 1rem;
  max-width: 540px;
  opacity: 0.9;
}

.ns-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-bottom: 3rem;
}

.ns-project-card {
  background: var(--nelia-panel);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(229, 57, 53, 0.7);
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.7);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.ns-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.95);
  border-color: var(--nelia-red-bright);
}

.ns-thumb-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.ns-thumb {
  width: 100%;
  display: block;
  border-radius: 1rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.ns-project-badge {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  background: rgba(0, 0, 0, 0.75);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ns-project-title {
  font-size: 1.05rem;
  margin: 0.3rem 0 0.1rem;
  color: var(--nelia-text);
}

.ns-project-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: 0.4rem;
}

.ns-project-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.35rem;
  color: var(--nelia-text-dim);
}

.ns-project-tagline {
  font-size: 0.8rem;
  opacity: 0.9;
}

.ns-current-cta {
  text-align: center;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(229, 57, 53, 0.6);
}

.ns-current-cta h2 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.ns-current-cta p {
  max-width: 480px;
  margin: 0 auto 1rem;
  font-size: 0.95rem;
  color: var(--nelia-text-dim);
}

.ns-current-button {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  background: var(--nelia-red);
  color: var(--nelia-text);
  box-shadow: 0 0 10px rgba(229, 57, 53, 0.9);
}

.ns-current-button:hover {
  background: var(--nelia-red-bright);
  box-shadow: 0 0 14px rgba(255, 90, 80, 1);
}

/* ================================
   GRANDPA JOE – IN THE WORKS PAGE
================================== */

.gj-works {
  background: var(--nelia-bg-dark, #050505);
  color: var(--nelia-text, #ffffff);
  padding: 3rem 1rem;
}

.gj-works h1,
.gj-works h2,
.gj-works h3 {
  font-weight: 700;
  margin: 0 0 0.4em;
  color: var(--nelia-text, #ffffff);
}

.gj-works h1 {
  font-size: 2.2rem;
}

.gj-works h2 {
  font-size: 1.6rem;
}

.gj-works h3 {
  font-size: 1.2rem;
}

.gj-works p {
  margin: 0 0 0.9em;
}

.gj-works strong {
  font-weight: 600;
}

.gj-bg-cream   { background: #231611; }
.gj-bg-warm    { background: #2d1a10; }
.gj-bg-soft    { background: #18100c; }
.gj-accent     { color: var(--nelia-red, #e53935); }
.gj-chip       { background: rgba(229,57,53,0.08); color: #fbe0dd; }

.gj-section {
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 2.5rem 2rem;
  background: var(--nelia-panel, #111111);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.04);
}

.gj-section + .gj-section {
  border-top: none;
}

.gj-kicker {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  color: #ccb29a;
  margin-bottom: 0.5rem;
}

.gj-grid-2 {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  align-items: center;
}

.gj-grid-3,
.gj-grid-4 {
  display: grid;
  gap: 1.5rem;
}

.gj-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gj-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gj-hero {
  border-radius: 18px;
  padding: 2.5rem 2rem;
  background: radial-gradient(circle at top left,
              rgba(229,57,53,0.25),
              rgba(10,6,4,1));
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}

.gj-hero-title {
  font-size: 2.4rem;
  line-height: 1.2;
}

.gj-hero-sub {
  font-size: 1rem;
  max-width: 34rem;
  color: #f5e7da;
}

.gj-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  margin-bottom: 0.75rem;
  color: #f0d9c5;
}

.gj-img-frame {
  background: #140d0a;
  border-radius: 18px;
  padding: 0.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.gj-img-frame img {
  width: 100%;
  display: block;
  border-radius: 14px;
}

.gj-status-list {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
}

.gj-status-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: #f3e3d1;
}

.gj-status-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(229,57,53,0.15);
  color: #ffb4a9;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.gj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.gj-chip {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

.gj-card {
  background: #1c130f;
  color: #ffffff;
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  font-size: 0.95rem;
}

.gj-card h3 {
  color: #ffffff;
}

.gj-callout {
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: #241610;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fdf5ec;
  font-size: 0.9rem;
}

.gj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--nelia-red, #e53935);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(229,57,53,0.55);
}

.gj-btn:hover {
  opacity: 0.92;
}

@media (max-width: 900px) {
  .gj-section {
    padding: 2rem 1.4rem;
  }

  .gj-grid-2,
  .gj-grid-3,
  .gj-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .gj-hero {
    padding: 2rem 1.5rem;
  }

  .gj-works h1 {
    font-size: 1.9rem;
  }

  .gj-hero-title {
    font-size: 2rem;
  }
}

/* =========================================================
   MISC ACCESSIBILITY / CLEANUP
   ========================================================= */

.page-scroll-up,
a.page-scroll-up {
  display: none !important;
}

.breadcrumb,
.breadcrumbs,
.awp-breadcrumb,
.page-header-breadcrumb,
.page-title .breadcrumb {
  display: none !important;
}

/* Navigation icon contrast */
.main-navigation i,
.main-navigation .fas,
.main-navigation .fa,
.navbar-collapse i,
.navbar-collapse .fas,
.navbar-collapse .fa {
  color: #ffffff !important;
}

.main-navigation svg,
.navbar-collapse svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.main-navigation a:focus,
.main-navigation a:active,
.main-navigation button:focus {
  outline: 2px solid #e53935 !important;
  outline-offset: 3px;
}

/* Button contrast fixes */
.wp-block-button__link,
.wp-element-button {
  color: #ffffff !important;
  background-color: #e53935 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-button__link:focus,
.wp-element-button:focus,
.wp-block-button__link:active,
.wp-element-button:active {
  color: #ffffff !important;
  background-color: #ff5a50 !important;
  border-color: #ffffff !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 2px;
}

/* =========================================================
   LITTLE RED HAT — INDEX PAGE (CHRONICLES)
   ========================================================= */

.little-red-hat-page {
  background-color: var(--nelia-bg-dark, #000000);
  color: var(--nelia-text, #ffffff);
  padding: 4rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: inherit;
}

/* Make sure the page isn't right-aligned by any theme rule */
.little-red-hat-page,
.little-red-hat-page * {
  text-align: left;
}

/* Hero */
.lrh-hero {
  text-align: left;
  margin-bottom: 3rem;
}

.lrh-title {
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  margin: 0 0 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lrh-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--nelia-text-dim, #dddddd);
  max-width: 42rem;
}

/* Sections */
.lrh-section {
  margin-bottom: 3rem;
}

.lrh-section-title {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin: 0 0 1rem;
}

.lrh-section-body p {
  margin: 0 0 0.9rem;
  line-height: 1.7;
  color: var(--nelia-text-dim, #dddddd);
}

/* CARD GRID — featured first card, upcoming stories below */
.lrh-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.75rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Reset any weird floats/margins on direct children */
.lrh-card-grid > * {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* FEATURED CARD — first one full width (newest story) */
.lrh-card-grid > .lrh-card:first-child {
  flex: 1 1 100% !important;
}

/* UPCOMING CARDS — 2 per row under featured on desktop */
.lrh-card-grid > .lrh-card:not(:first-child) {
  flex: 1 1 calc(50% - 1.75rem) !important;
}

@media (max-width: 700px) {
  .little-red-hat-page {
    padding: 3rem 1.25rem;
  }

  .lrh-card-grid > .lrh-card {
    flex: 1 1 100% !important; /* single column on mobile */
  }
}

/* Card base */
.lrh-card {
  background-color: var(--nelia-panel, #111111);
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

/* Thumbnail */
.lrh-card-thumb {
  margin: -0.6rem -0.6rem 1rem;
  border-radius: 14px;
  overflow: hidden;
  background: #1b1b1b;
}

.lrh-card-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Placeholder thumbnail */
.lrh-card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: radial-gradient(
    circle at top left,
    rgba(229, 57, 53, 0.45),
    #111111 70%
  );
}

.lrh-thumb-placeholder-text {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.9);
}

/* Card text */
.lrh-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lrh-card-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: var(--nelia-text-dim, #dddddd);
}

.lrh-card-title {
  font-size: 1.2rem;
  margin: 0;
}

.lrh-card-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0;
  color: var(--nelia-text-dim, #bbbbbb);
}

.lrh-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.2rem 0 0.9rem;
  color: var(--nelia-text-dim, #dddddd);
}

/* Buttons / links */
.lrh-card-link,
.lrh-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
}

/* Active link */
.lrh-card-link {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.lrh-card-link:hover,
.lrh-card-link:focus-visible {
  background: var(--nelia-red, #e53935);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(229, 57, 53, 0.4);
  transform: translateY(-1px);
  outline: none;
}

/* Disabled state */
.lrh-card-button {
  border: 1px dashed rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--nelia-text-dim, #aaaaaa);
  cursor: not-allowed;
}

/* Placeholder card subtle fade */
.lrh-card--placeholder {
  opacity: 0.9;
}

/* =========================================================
   LITTLE RED HAT — STORY PAGE (SALEM, ETC.)
   ========================================================= */

.lrh-story-page {
  background-color: var(--nelia-bg-dark, #000000);
  color: var(--nelia-text, #ffffff);
  padding: 3rem 1.5rem 4rem;
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.7;
  font-family: inherit;
  box-sizing: border-box;
}

/* Back links (top + bottom) */
.lrh-back {
  margin-bottom: 1.5rem;
}

.lrh-back-bottom {
  margin-top: 3rem;
}

.lrh-back-link {
  color: var(--nelia-red, #e53935);
  text-decoration: none;
  font-size: 0.9rem;
}

.lrh-back-link:hover {
  text-decoration: underline;
}

/* Story title / hero */
.lrh-story-hero {
  margin-bottom: 2rem;
}

.lrh-story-title {
  font-size: clamp(2rem, 4.5vw, 2.5rem);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lrh-story-subtitle {
  color: var(--nelia-text-dim, #dddddd);
  max-width: 600px;
  margin: 0;
  font-size: 0.98rem;
}

/* Content blocks */
.lrh-story-content {
  margin-top: 2rem;
}

.lrh-block {
  margin-bottom: 2.5rem;
}

/* Intro block: text + image side by side */
.lrh-intro-block {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  margin-top: 0;
}

.lrh-intro-text {
  flex: 1;
  min-width: 0;
}

.lrh-intro-text p {
  margin: 0 0 1rem;
  color: var(--nelia-text-dim, #dddddd);
}

/* Intro inline image */
.lrh-image-inline {
  flex: 0 0 260px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}

.lrh-image-inline img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.lrh-image-inline figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--nelia-text-dim, #bbbbbb);
}

/* Full-width images */
.lrh-image-full,
.lrh-image-wide {
  margin: 2rem 0;
  text-align: center;
}

.lrh-image-full img,
.lrh-image-wide img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.lrh-image-full figcaption,
.lrh-image-wide figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--nelia-text-dim, #bbbbbb);
}

/* 4-photo "reality" grid */
.lrh-image-grid {
  display: grid;
  gap: 1.4rem;
  margin: 1.8rem 0 2rem;
}

.lrh-image-grid figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

.reality-grid figure img {
  aspect-ratio: 3 / 4;
}

.lrh-image-grid figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--nelia-text-dim, #bbbbbb);
}

/* Callout quote blocks */
.lrh-callout {
  background: #8c1d1b;
  color: #ffffff;
  padding: 1.8rem 1.6rem;
  margin: 2.5rem 0;
  border-radius: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.65;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.lrh-callout p {
  margin: 0;
}

/* Outro spacing */
.lrh-outro-block {
  margin-top: 3rem;
}

/* Generic clear-float helper */
.lrh-block::after,
.lrh-intro-block::after,
.lrh-outro-block::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive tweaks for story page */
@media (max-width: 699px) {
  .lrh-story-page {
    padding: 2.5rem 1.25rem 3.5rem;
  }

  .lrh-intro-block {
    flex-direction: column;
  }

  .lrh-image-inline {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

@media (min-width: 700px) {
  .lrh-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================
   GLOBAL TYPE & BUTTON ELEGANCE TUNE-UP
   (site-wide)
   ========================================= */

/* ---------- Base typography ---------- */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Main page titles (e.g., "Portfolio") */
h1 {
  font-size: 2rem;           /* was probably closer to 2.5rem+ */
  line-height: 1.2;
}

/* Section titles */
h2 {
  font-size: 1.7rem;
  line-height: 1.25;
}

/* Card titles / smaller headings */
h3 {
  font-size: 1.4rem;
  line-height: 1.3;
}

/* Optional: subtitles just under page titles */
.portfolio-hero p,
.section-subtitle,
.page-header p {
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Buttons (site-wide) ---------- */
/* WordPress block buttons + generic buttons */
.wp-block-button__link,
button,
input[type="submit"],
a.button,
a.btn {
  font-size: 0.95rem;          /* smaller & more refined */
  padding: 0.65rem 1.5rem;     /* less chunky */
  border-radius: 24px;         /* still rounded but more elegant */
}

/* If your primary buttons use Nelia red, keep this subtle outline */
.wp-block-button__link,
a.button-primary,
button.primary {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255,255,255,0.8);
}

/* ---------- Portfolio cards (applies wherever used) ---------- */
.portfolio-card,
.ns-portfolio-card,
.portfolio-grid-card {
  padding: 2.25rem 2rem; /* a little more breathing room inside */
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.25); /* softer glow */
}

/* Hover state: slight lift, not loud */
.portfolio-card:hover,
.ns-portfolio-card:hover,
.portfolio-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* =========================================================
   NELIA STUDIO — GLOBAL ELEGANCE & SPACING REFINEMENTS
   Applies across entire site (typography, buttons, cards,
   text containers, hero boxes, etc.)
   ========================================================= */

/* ------------------------------
   1. TYPOGRAPHY — refined sizing
   ------------------------------ */

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.7rem;
  line-height: 1.25;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.3;
}

p {
  line-height: 1.6;
}

/* Optional: subtitle text under page headers */
.page-header p,
.portfolio-hero p,
.section-subtitle {
  font-size: 1rem;
  line-height: 1.5;
}

/* ------------------------------
   2. BUTTONS — elegant, refined
   ------------------------------ */

.wp-block-button__link,
button,
input[type="submit"],
a.button,
a.btn {
  font-size: 0.95rem;
  padding: 0.65rem 1.5rem;
  border-radius: 24px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255,255,255,0.8);
  transition: all 0.18s ease;
}

.wp-block-button__link:hover,
button:hover,
a.button:hover {
  transform: translateY(-2px);
}

/* ------------------------------
   3. PORTFOLIO CARDS — softer glow & breathing room
   ------------------------------ */

.portfolio-card,
.ns-portfolio-card,
.portfolio-grid-card,
.wp-block-group.portfolio-card {
  padding: 2.25rem 2rem;
  box-shadow: 0 0 12px rgba(229, 57, 53, 0.25);
  border-radius: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portfolio-card:hover,
.ns-portfolio-card:hover,
.portfolio-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(229, 57, 53, 0.33);
}

/* ------------------------------
   4. TEXT CONTAINER PADDING
   Applies to hero boxes, dark sections,
   group blocks, cover blocks, etc.
   ------------------------------ */

.hero-content,
.page-header,
.wp-block-group,
.wp-block-cover__inner-container,
.ns-content-box,
.section-content {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Larger padded blocks (background panels) */
.wp-block-group.has-background,
.wp-block-cover.has-background-dim {
  padding: 2.5rem;
}

/* Prevent paragraphs from touching edges in long sections */
.entry-content p,
.entry-content .wp-block-group__inner-container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ------------------------------
   5. MAX-WIDTH FOR READABILITY
   Keeps wide text clean & modern
   ------------------------------ */

.hero-content,
.section-content,
.text-content,
.page-header {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Perfect vertical/horizontal centering for all buttons */
.wp-block-button__link,
button,
input[type="submit"],
a.button,
a.btn {
  display: inline-flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* horizontal centering */
  line-height: 1.2;      /* prevents text from "sinking" */
}

/* Extra safety for Red Hat Chronicles-style outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Add left/right padding to ALL headings inside content blocks */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Add safe padding to ALL group and cover blocks */
.wp-block-group,
.wp-block-cover__inner-container,
.wp-block-cover,
.wp-block-columns {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Ensure hero/cover block headings don’t touch edges */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* =========================================================
   FINAL POLISH OVERRIDES
   (buttons centered, portfolio titles not splitting words)
   ========================================================= */

/* Global type scale (safe to reaffirm) */
body {
  font-size: 16px;
  line-height: 1.6;
}

h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.7rem; line-height: 1.25; }
h3 { font-size: 1.4rem; line-height: 1.3; }

.portfolio-hero p,
.section-subtitle,
.page-header p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Portfolio card titles: keep words together, shrink slightly on smaller widths */
.portfolio-card h3 {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
  font-size: 1.3rem;
}

@media (max-width: 900px) {
  .portfolio-card h3 {
    font-size: 1.15rem;
  }
}

/* Global buttons: centered + elegant + accessible contrast */
.wp-block-button .wp-block-button__link,
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
a.button,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem;
  line-height: 1.2 !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: 24px;
  color: #ffffff !important;
  background-color: #e53935 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: transform 0.18s ease,
              box-shadow 0.18s ease,
              background-color 0.18s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
a.button:hover,
a.btn:hover {
  background-color: #ff5a50 !important;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(255, 90, 80, 0.7);
}

/* ===== HEADER NAV FIX — undo button styles on menu links ===== */

/* Classic / theme nav menus */
.site-header .main-navigation ul li a,
.awp-header .main-navigation ul li a,
.awp-main-header .main-navigation ul li a {
  display: inline-block !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Block-based navigation links */
.site-header .wp-block-navigation a.wp-block-navigation-item__content,
.awp-header .wp-block-navigation a.wp-block-navigation-item__content,
.awp-main-header .wp-block-navigation a.wp-block-navigation-item__content {
  display: inline-block !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* =========================================
   NAVIGATION — REMOVE BUTTON STYLING
   ========================================= */

/* Strip pill / button look from ALL nav links */
.main-navigation a,
.main-navigation a.wp-element-button,
.wp-block-navigation a,
.wp-block-navigation a.wp-element-button,
.wp-block-navigation-item__content {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.25rem 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Keep your intended colors for nav */
.main-navigation a,
.wp-block-navigation a {
  color: #ffffff !important;
}

.main-navigation a:hover,
.wp-block-navigation a:hover {
  color: #e53935 !important;
}

/* =========================================
   KILL WHITE PILLS ON PORTFOLIO / ABOUT NAV
   ========================================= */

/* Desktop + mobile: links that have dropdowns */
.navbar-collapse ul li.menu-item-has-children > a,
.navbar-collapse ul li.menu-item-has-children > a.wp-element-button,
.main-navigation ul li.menu-item-has-children > a,
.main-navigation ul li.menu-item-has-children > a.wp-element-button {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.75rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Also nuke any pill styles on the little dropdown toggle buttons, if used */
.navbar-collapse ul li.menu-item-has-children > button,
.navbar-collapse ul li.menu-item-has-children > .dropdown-toggle,
.main-navigation ul li.menu-item-has-children > button,
.main-navigation ul li.menu-item-has-children > .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* =========================================
   DESKTOP HEADER — HIDE HAMBURGER & CLOSE
   ========================================= */

@media (min-width: 1025px) {
  #hamburger-menu,
  #close,
  .open-nav-btn,
  .close-btn {
    display: none !important;
  }
}
/* =========================================
   RED HAT CHRONICLES — BUTTON CENTER FIX
   ========================================= */

/* Any pill-style buttons in the Chronicles index + story pages */
.little-red-hat-page .wp-block-button__link,
.lrh-story-page .wp-block-button__link,
.lrh-card-link,
.lrh-card-button {
  display: inline-flex !important;
  align-items: center !important;      /* vertical center */
  justify-content: center !important;  /* horizontal center */
  line-height: 1.1 !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* =========================================
   SALEM STORY — READ THE FULL STORY BUTTON
   ========================================= */

.lrh-story-page .wp-block-button__link,
.lrh-story-page .wp-block-button__link span {
  display: inline-flex !important;
  align-items: center !important;       /* vertical center */
  justify-content: center !important;   /* horizontal center */
  line-height: 1 !important;
  padding: 0.75rem 2.5rem !important;   /* equal top/bottom */
  height: auto !important;
}

/* In case the outer button wrapper is stretching it */
.lrh-story-page .wp-block-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* FINAL FIX — raise the Salem button text slightly */
.lrh-story-page .wp-block-button__link,
.lrh-story-page .wp-block-button__link span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* subtle vertical lift */
  padding-top: 0.55rem !important;
  padding-bottom: 0.75rem !important;

  line-height: 1 !important;
}

/* FINAL PRECISION FIX — lift button text by exactly ~3px */
.lrh-story-page .wp-block-button__link,
.lrh-story-page .wp-block-button__link span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  transform: translateY(-3px) !important;  /* << lift text upward */
}

/* FINAL PRECISION FIX — lift button text by exactly 2px */
.lrh-story-page .wp-block-button__link,
.lrh-story-page .wp-block-button__link span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  transform: translateY(-2px) !important;  /* raise text 2px */
}

/* =========================================
   RED HAT CHRONICLES — PILL SHAPE + HOVER
   ========================================= */

/* Base pill look for index cards + story button */
.lrh-card-link,
.lrh-card-button,
.lrh-story-page .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;              /* always a pill */
  line-height: 1.1 !important;

  /* override the global red button styling */
  background: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255,255,255,0.7) !important;
  box-shadow: none !important;
  padding: 0.55rem 1.4rem !important;
}

/* Keep the disabled ones calm */
.lrh-card-button {
  cursor: not-allowed;
  color: var(--nelia-text-dim, #aaaaaa) !important;
}

/* Hover — gentle highlight + slight enlarge (no rectangle) */
.lrh-card-link:hover,
.lrh-story-page .wp-block-button__link:hover {
  background: var(--nelia-red, #e53935) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 0 14px rgba(229,57,53,0.6) !important;
}

/* =========================================
   SALEM STORY BUTTON — VERTICAL TEXT TWEAK
   ========================================= */

/* Nudge the inner text up a hair inside the pill */
.lrh-story-page .wp-block-button__link span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin-top: -2px !important;   /* << raise text ~2px */
}

/* SALEM STORY — FIX TEXT ALIGNMENT IN BUTTON */
.lrh-story-page .wp-block-button__link span {
  display: inline-block !important;
  line-height: 1 !important;
  transform: translateY(-2px) !important;  /* lift text 2px */
}
/* HOME CARD TITLES — STOP MID-WORD BREAKS (Brand/Motion/Social/Photography) */
.home .photo-section .photo-card h1,
.home .photo-section .photo-card h2,
.home .photo-section .photo-card h3,
.home .photo-section .photo-card .wp-block-heading,
.home .photo-section .photo-card h1 a,
.home .photo-section .photo-card h2 a,
.home .photo-section .photo-card h3 a,
.home .photo-section .photo-card .wp-block-heading a {
  /* size + rhythm */
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  line-height: 1.15 !important;

  /* THIS is the fix */
  word-break: normal !important;        /* no break-all */
  overflow-wrap: break-word !important; /* wraps only when needed */
  hyphens: none !important;             /* no forced hyphenation */
  white-space: normal !important;
}

/* HOME — SERVICE / PORTFOLIO CARD TITLES
   Reduce size so long words wrap cleanly */
.home .photo-section .photo-card h1,
.home .photo-section .photo-card h2,
.home .photo-section .photo-card h3,
.home .photo-section .photo-card .wp-block-heading {
  font-size: 1.15rem !important;   /* smaller + balanced */
  line-height: 1.25 !important;    /* cleaner wraps */
  letter-spacing: 0.01em;
}
/* PORTFOLIO CARD TITLES — smaller + clean wrap */
.portfolio-grid .portfolio-card h2.wp-block-heading {
  margin: 0 0 0.75rem 0;
  padding: 0 !important;
}
/* PORTFOLIO CARD TITLES — smaller + clean wrap */
.portfolio-grid .portfolio-card h2.wp-block-heading {
  margin: 0 0 0.75rem 0;
  padding: 0 !important;
}

.portfolio-grid .portfolio-card h2.wp-block-heading a {
  font-size: 1.15rem !important;   /* smaller than global h2 */
  line-height: 1.2 !important;
  display: inline-block;           /* stabilizes wrapping */
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-decoration-thickness: from-font;
}

/* Portfolio cards: make the 2-up grid actually fill the available width */
.portfolio-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.portfolio-grid .wp-block-columns {
  width: 100%;
  justify-content: space-between;
}

.portfolio-grid .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Make cards feel more like squares and use the space better */
.portfolio-card {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On wider screens, encourage a squarer feel */
@media (min-width: 900px) {
  .portfolio-card {
    min-height: 360px;
  }
}

/* =========================================
   PORTFOLIO PAGE — FORCE 2-UP GRID
   Fixes empty space caused by 4-column grid rule
   ========================================= */

/* If your portfolio page slug is /portfolio/ this usually works */
.page-id-0 .portfolio-grid .wp-block-columns,
.page-template-default .portfolio-grid .wp-block-columns,
body .portfolio-grid .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

/* Mobile: stack */
@media (max-width: 640px) {
  body .portfolio-grid .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* Make cards more square */
body .portfolio-card {
  min-height: 300px;
}

/* =========================================
   BRAND PAGE — SECTION SPACING & RHYTHM
   ========================================= */

/* Space above each section (except the first hero) */
.brand-section {
  margin-top: 3.5rem;
}

/* Extra breathing room after section headings */
.brand-section h2 {
  margin-bottom: 1.25rem;
}

/* Slight space between paragraphs and galleries */
.brand-section p {
  margin-bottom: 1.5rem;
}

/* Space before buttons so they don’t crowd galleries */
.brand-section .wp-block-buttons {
  margin-top: 2rem;
}

/* =========================================
   PORTFOLIO — LOCK 2-UP DESKTOP, 1-UP MOBILE
   Keep this at the VERY BOTTOM of Additional CSS
   ========================================= */

body .portfolio-grid .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

@media (max-width: 640px) {
  body .portfolio-grid .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* Optional: squarer cards */
body .portfolio-grid .portfolio-card {
  min-height: 300px;
}

/* =========================================
   SOCIAL CAMPAIGNS PAGE — EQUAL HEIGHT CARDS
   Targets your actual structure: .photo-section + Columns + .photo-card
   ========================================= */

/* Each row: make columns stretch */
.photo-section .wp-block-columns {
  align-items: stretch !important;
}

/* Each column: behave like a flexible container */
.photo-section .wp-block-columns > .wp-block-column {
  display: flex !important;
}

/* Each card: fill the column height and stack content */
.photo-section .wp-block-columns > .wp-block-column > .photo-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  height: 100% !important;
}

/* Push video to the bottom so text areas align nicely */
.photo-section .wp-block-columns > .wp-block-column > .photo-card video {
  margin-top: auto !important;
}

/* Optional: give all cards a consistent minimum height */
.photo-section .wp-block-columns > .wp-block-column > .photo-card {
  min-height: 520px;
}
/* =========================================
   SOCIAL CAMPAIGNS — SHORTER CARDS (HALF HEIGHT FEEL)
   Cap video height so cards don’t get tall
   ========================================= */

.photo-section .wp-block-group.photo-card video {
  max-height: 180px !important;
  object-fit: cover !important;
}

/* =========================================
   MOTION & VIDEO — EQUAL HEIGHT CARDS + CAP EMBEDS
   Scoped to .motion-section / .motion-card only
   ========================================= */

/* Equal height columns in each row */
.motion-section .wp-block-columns {
  align-items: stretch !important;
}

.motion-section .wp-block-column {
  display: flex !important;
  align-self: stretch !important;
}

/* Card fills the column */
.motion-section .motion-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Cap all embeds so cards don't get huge */
.motion-section .motion-card .wp-block-embed,
.motion-section .motion-card .wp-block-embed__wrapper,
.motion-section .motion-card .motion-embed,
.motion-section .motion-card iframe,
.motion-section .motion-card video {
  max-height: 220px !important;
  overflow: hidden !important;
}

/* Make iframes/videos crop nicely */
.motion-section .motion-card iframe,
.motion-section .motion-card video {
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 12px;
}

/* Keep the embed area toward the bottom for consistent text alignment */
.motion-section .motion-card .wp-block-embed,
.motion-section