/*
 * WalksDevour Blog — Element-Level Overrides
 * Applied over takewalks-blog-theme (GP 3.3.1 base markup).
 */

/* ─── Default font family — Season Sans, Inter fallback ──────────── */
/* GP Customizer / Font Manager emits an inline <style> in <head> that sets
   `Alegreya Sans, sans-serif` on body, headings, nav, buttons, inputs, etc.
   Inline CSS loads AFTER enqueued stylesheets, so at matching specificity
   it wins the cascade — meaning style.css `body { font-family: ... }` and
   wd-overrides.css `h1..h6 { font-family: ... }` lose without !important.
   We replicate GP's full selector list and use !important to claim every
   spot Season Sans should fill. Inter is the next fallback before system
   fonts so loading-time gaps stay coherent with the main site. */
body,
button,
input,
select,
textarea,
.main-title,
.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button .wp-block-button__link,
h1, h2, h3, h4, h5, h6,
.slideout-navigation.main-navigation .main-nav ul li a {
  font-family: "Season Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ─── Content container backgrounds ────────────────────────────────── */
/* GP defaults .site-content / .inside-content / #primary to white via
   var(--base-3). Force them to cream so they blend with body bg, while
   .inside-article (article cards) remain on white for contrast. */
.site-content,
.content-area,
.inside-content,
#primary,
.separate-containers .site-main {
  background-color: var(--wd-cream);
}

/* ─── In-content & GenerateBlocks links ───────────────────────────── */
/* WD design-system hover pattern: text colour stays the same; hover
   is signalled by a thick lemon underline at the bottom.
   Applies everywhere except navigation (handled separately). */
.entry-content a {
  color: var(--wd-primary);
  text-decoration: none;
}

.entry-content a:hover,
.entry-content a:focus,
[class*="gb-headline"] a:hover,
[class*="gb-headline"] a:focus,
[class*="gb-text"] a:hover,
[class*="gb-text"] a:focus,
.inside-article .entry-title a:hover,
.inside-article .entry-title a:focus,
.read-more:hover,
a.more-link:hover,
.post-navigation .nav-links a:hover,
.posts-navigation .nav-links a:hover,
.comment-reply-link:hover {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: var(--wd-secondary) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/* Sidebar widget headline links (e.g. the "top-rated tours" promo box): the
   universal rule above sets color:inherit on hover, but the widget headline's
   own colour is light, so the link text vanishes on hover. Pin a visible
   colour here; the lemon underline from the rule above still applies. */
.widget [class*="gb-headline"] a:hover,
.widget [class*="gb-headline"] a:focus,
.FixedWidget__fixed_widget a:hover,
.FixedWidget__fixed_widget a:focus {
  color: var(--wd-primary) !important;
}

/* Article card titles default: inherit colour, no underline at idle */
.inside-article .entry-title a,
.inside-article .entry-title a:visited {
  color: inherit;
  text-decoration: none;
}

/* GenerateBlocks buttons inside hero (background-image) containers —
   force white because they sit over a dark cover image and inherit
   resolves to the wrong colour. Do NOT extend this to all gb-buttons:
   destination city pills, in-content CTAs, etc. live on the cream bg
   and would become invisible. */
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"],
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:visited,
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:hover,
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:focus,
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:active {
  color: #FFFFFF !important;
}
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:hover,
.gb-container[style*="--background-image"] .gb-button-wrapper a[class*="gb-button-"]:focus {
  text-decoration: underline !important;
  text-decoration-color: var(--wd-secondary) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.wp-block-button__link,
button:not(.slideout-navigation .slideout-toggle),
input[type="submit"],
a.generate-back-to-top {
  background-color: var(--wd-primary);
  border-radius: var(--wd-radius);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.wp-block-button__link:hover,
button:not(.slideout-navigation .slideout-toggle):hover,
input[type="submit"]:hover,
a.generate-back-to-top:hover {
  background-color: var(--wd-primary-hover);
}

/* ─── Article cards ────────────────────────────────────────────────── */
.inside-article {
  background-color: var(--wd-cream);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
}
.sticky .inside-article {
  border-left: 4px solid var(--wd-secondary);
}

/* On single-post pages, the article wrapper IS the page main column —
   it shouldn't look like a card. Drop the border + radius. */
.single .inside-article,
.page .inside-article {
  border: 0;
  border-radius: 0;
}

/* Featured image / post thumbnail container — clear any inherited white bg */
.featured-image,
.post-image,
.post-thumbnail {
  background-color: transparent;
}

/* Sidebar widget containers — match cream so widgets aren't framed in white */
.widget-area .widget,
.sidebar .widget,
.inside-right-sidebar,
.inside-left-sidebar {
  background-color: var(--wd-cream);
}

/* ─── Post images ──────────────────────────────────────────────────── */
.post-image img {
  border-radius: var(--wd-radius);
}

/* ─── Category & Tag pills ─────────────────────────────────────────── */
.cat-links a,
.tag-links a {
  background-color: var(--wd-cream);
  border: 1px solid var(--wd-border);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 14px;
  color: var(--wd-foreground);
  transition: border-color 0.2s ease;
}
.cat-links a:hover,
.tag-links a:hover {
  border-color: var(--wd-primary);
  color: var(--wd-primary);
  text-decoration: none;
}

/* ─── Sidebar widget titles ────────────────────────────────────────── */
.widget-title {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Form inputs ──────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--wd-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 81, 50, 0.1);
}

/* ─── Blockquotes ──────────────────────────────────────────────────── */
blockquote {
  border-left: 4px solid var(--wd-primary);
  background: var(--wd-cream);
  padding: 1.5rem;
  border-radius: 0 var(--wd-radius) var(--wd-radius) 0;
}

/* ─── Headings (override parent defaults) ──────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Season Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--wd-foreground);
}
h1 { font-weight: 600; font-size: 44px; line-height: 56px; }  /* 600, not 700 — Season Sans tops out at SemiBold; 700 would synthesise faux-bold */
h2 { font-weight: 600; font-size: 36px; line-height: 46px; }
h3 { font-weight: 600; font-size: 28px; line-height: 38px; }
h4 { font-weight: 600; font-size: 24px; line-height: 32px; }
h5 { font-weight: 600; font-size: 20px; line-height: 28px; }
h6 { font-weight: 600; font-size: 18px; line-height: 26px; }

@media (max-width: 768px) {
  h1 { font-size: 36px; line-height: 44px; }
  h2 { font-size: 30px; line-height: 38px; }
  h3 { font-size: 24px; line-height: 33px; }
  h4 { font-size: 20px; line-height: 28px; }
  h5 { font-size: 18px; line-height: 26px; }
}

/* ─── Body & buttons font sizes ────────────────────────────────────── */
body {
  font-size: 18px;
  line-height: 28px;
}
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 26px; }
}

.wp-block-button__link,
button:not(.slideout-navigation .slideout-toggle),
input[type="submit"] {
  font-size: 18px;
  line-height: 26px;
}
@media (max-width: 768px) {
  .wp-block-button__link,
  button:not(.slideout-navigation .slideout-toggle),
  input[type="submit"] {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ─── Navigation hover (top-level + sub-menu) ──────────────────────── */
/* Hover only changes the text colour to forest green; background
   stays the same cream as idle. !important required to win against
   GP's inline dynamic CSS (identical specificity, cascade order). */
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li.menu-item-has-children:hover > a,
.main-navigation .main-nav ul li.menu-item-has-children.sfHover > a {
  color: var(--wd-primary) !important;
  background-color: transparent !important;
}

/* Sub-menu dropdown panel — only swap white -> cream, leave GP's default
   geometry (no border / radius / shadow / padding overrides). */
.main-navigation .main-nav ul ul {
  background-color: var(--wd-cream);
}
.main-navigation .main-nav ul ul li > a {
  background-color: var(--wd-cream);
  color: var(--wd-foreground);
}
.main-navigation .main-nav ul ul li > a:hover,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
  background-color: var(--base);   /* #F5F1E8 — warm cream tint */
  color: var(--wd-primary);
}

/* ─── Pagination & featured images ─────────────────────────────────── */
.generate-columns .featured-image,
.paging-navigation .nav-links a {
  border-radius: var(--wd-radius);
}

/* ─── Text selection ───────────────────────────────────────────────── */
::selection {
  background-color: rgba(45, 81, 50, 0.15);
}

/* ─── Site header & navigation ─────────────────────────────────────── */
/* Geometry pulled directly from staging.walksdevour.com (Next.js main site):
   <nav class="...sticky top-0 z-50 w-full border-b">
     <div class="mx-auto h-[70px] max-w-[1440px] px-6 lg:px-[88px]">
       <a><svg class="h-[34px] w-auto lg:h-[47px]"></a>
   So: 70px tall, sticky, 1px border-bottom, 1440 max-width, 24/88 padding-x,
   logo 34px/47px. */
.site-header {
  background-color: var(--wd-cream);
  border-bottom: 1px solid var(--wd-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.inside-header {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
  min-height: 70px;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .inside-header {
    padding: 0 88px;
  }
}
/* GP Customizer (Site Identity → Header Logo Width) injects an inline
   `.site-header .header-image { width: NNNpx }` rule with specificity (0,2,0).
   Match its specificity AND use !important to beat it; also covers the
   case where someone re-enters a width in Customizer later. */
.site-header .header-image,
.site-logo img {
  height: 34px;
  width: auto !important;
}
@media (min-width: 1024px) {
  .site-header .header-image,
  .site-logo img {
    height: 47px;
  }
}

.main-navigation {
  background-color: var(--wd-cream);
}

/* Match main site: Title Case, no uppercase, no wide letter-spacing.
   GP defaults to uppercase via Customizer; we override at the cascade layer. */
.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li > a {
  color: var(--wd-foreground);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 16px;
}
/* Active menu item — only the text colour changes (forest green); the
   background stays the same cream as the rest of the header. No pill,
   no padding tweak, no radius. GP defaults active bg to var(--base-3)
   (white) which we strip out. !important + attr selector to win the
   specificity fight against GP's inline dynamic CSS. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: var(--wd-primary) !important;
  background-color: transparent !important;
}
.main-navigation .menu-toggle {
  color: var(--wd-foreground);
}

/* ─── Slideout / off-canvas mobile menu ────────────────────────────── */
.slideout-navigation,
.slideout-navigation .main-nav ul {
  background-color: var(--wd-foreground);
}
.slideout-navigation .main-nav ul li a {
  color: var(--wd-cream);
  border-bottom-color: rgba(255, 250, 237, 0.1);
}
.slideout-navigation .main-nav ul li a:hover,
.slideout-navigation .main-nav ul li.current-menu-item > a {
  color: var(--wd-secondary);
}

/* ─── Site footer ──────────────────────────────────────────────────── */
/* Mirrors main site walks-devour/src/components/layout/footer.tsx:
 *   bg = bg-primary (forest green)
 *   text + links idle = text-primary-foreground/70 (cream @ 70% opacity)
 *   link hover = hover:text-secondary (lemon)
 * cream @ 70% = rgba(255, 250, 237, 0.7) — #FFFAED with alpha. Using
 * rgba directly because var(--wd-cream) (hex) cannot carry alpha; would
 * need a new --wd-cream-70 token to keep symbolic. Acceptable inline
 * for now since this is the only consumer of cream-at-alpha. */
.site-footer,
.footer-widgets,
.site-info {
  background-color: var(--wd-primary);
  color: rgba(255, 250, 237, 0.7);
}
.site-footer a,
.footer-widgets a,
.site-info a {
  color: rgba(255, 250, 237, 0.7);
}
.site-footer a:hover,
.footer-widgets a:hover,
.site-info a:hover {
  color: var(--wd-secondary);
}
.footer-widgets .widget-title {
  color: rgba(255, 250, 237, 0.7);
}

/* ─── Entry meta (author, date, comments count) ────────────────────── */
.entry-meta,
.entry-meta a {
  color: var(--wd-muted);
  font-size: 14px;
}
.entry-meta a:hover {
  color: var(--wd-primary);
}

/* ─── Author info card ─────────────────────────────────────────────── */
.author-info,
.author-bio {
  background-color: var(--wd-cream);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 1.5rem;
}
.author-info .author-name,
.author-bio .author-name {
  color: var(--wd-foreground);
  font-weight: 600;
}

/* ─── Post navigation (prev/next) ──────────────────────────────────── */
.post-navigation .nav-links a,
.posts-navigation .nav-links a {
  color: var(--wd-primary);
  font-weight: 500;
}
.post-navigation .nav-links a:hover {
  color: var(--wd-primary-hover);
}

/* ─── Comments ─────────────────────────────────────────────────────── */
.comments-area {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wd-border);
}
.comments-title,
.comment-reply-title {
  color: var(--wd-foreground);
  font-weight: 600;
}
.comment-list .comment {
  border-bottom: 1px solid var(--wd-border);
  padding: 1.25rem 0;
}
.comment-author .fn,
.comment-author .fn a {
  color: var(--wd-foreground);
  font-weight: 600;
}
.comment-metadata,
.comment-metadata a {
  color: var(--wd-muted);
  font-size: 13px;
}
.comment-reply-link {
  color: var(--wd-primary);
  font-weight: 500;
}
.comment-reply-link:hover {
  color: var(--wd-primary-hover);
}
.comment-form label {
  color: var(--wd-foreground);
  font-weight: 500;
}

/* ─── Inline code & code blocks ────────────────────────────────────── */
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: var(--wd-cream);
  border: 1px solid var(--wd-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
  color: var(--wd-primary-hover);
}
pre {
  background-color: #F5F1E8;
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 1rem;
  overflow-x: auto;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--wd-foreground);
}

/* ─── Lists in entry content ───────────────────────────────────────── */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.entry-content ul li,
.entry-content ol li {
  margin: 0.25rem 0;
}
.entry-content ul li::marker {
  color: var(--wd-primary);
}

/* ─── Tables in entry content ──────────────────────────────────────── */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.entry-content table th,
.entry-content table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--wd-border);
  text-align: left;
}
.entry-content table th {
  background-color: var(--wd-cream);
  font-weight: 600;
  color: var(--wd-foreground);
}
.entry-content table tr:hover td {
  background-color: rgba(45, 81, 50, 0.04);
}

/* ─── Horizontal rule ──────────────────────────────────────────────── */
hr {
  border: 0;
  border-top: 1px solid var(--wd-border);
  margin: 2rem 0;
}

/* ─── Archive / category / search page titles ──────────────────────── */
.page-title,
.archive-title,
.search-title {
  font-family: "Season Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  color: var(--wd-foreground);
}

/* ─── Italic — Season Mix ─────────────────────────────────────────── */
/* Match Next.js main site behaviour: <em>, <i>, and `.italic` route to
   Season Mix italic variant, not browser-synthesised oblique Inter. */
em, i,
.entry-content em, .entry-content i,
[class*="gb-"] em, [class*="gb-"] i {
  font-family: "Season Mix", Georgia, "Times New Roman", serif;
  font-style: italic;
}
.page-description,
.taxonomy-description {
  color: var(--wd-muted);
}

/* ─── Read more link ───────────────────────────────────────────────── */
/* Default styling — let the cascade decide the colour. Lemon underline
   on hover comes from the universal hover rule above. */
.read-more,
a.more-link {
  font-weight: 500;
  text-decoration: none;
}

/* Inside hero (background-image) gb-containers, the article cover image
   is dark — pin the read-more text white so it's always readable. */
.gb-container[style*="--background-image"] .read-more,
.gb-container[style*="--background-image"] a.more-link,
.gb-container[style*="--background-image"] .read-more:visited,
.gb-container[style*="--background-image"] a.more-link:visited,
.gb-container[style*="--background-image"] .read-more:hover,
.gb-container[style*="--background-image"] a.more-link:hover,
.gb-container[style*="--background-image"] .read-more:focus,
.gb-container[style*="--background-image"] a.more-link:focus {
  color: #FFFFFF !important;
}

/* ─── GenerateBlocks hero containers (with background image) ────────── */
/* Authors used a large padding-top (e.g. 125px) on .gb-inside-container
   to fake vertical centering. As soon as the inner text grows past the
   visual centre, content overflows the container's bounds and gets
   clipped. Switch to real flex centering and uniform padding so the
   container grows symmetrically with its content. */
.gb-container[style*="--background-image"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-container[style*="--background-image"] > .gb-inside-container {
  padding: 40px 30px !important;
  width: 100%;
}

/* ─── Search form (header search) ──────────────────────────────────── */
.search-form input[type="search"] {
  background-color: #FFFFFF;
}
.search-form button[type="submit"] {
  background-color: var(--wd-primary);
  color: #FFFFFF;
}

/* ─── Footer social icons (lightweight-social-icons plugin) ───────── */
/* Plugin defaults: ~#3A3A3A grey tile + white icon. Match footer bg
   (--wd-primary) so tiles visually disappear into the footer, mirroring
   walks-devour/src/components/layout/footer.tsx:195-205 where social
   anchors have no tile and only icon color toggles cream → lemon. */
.site-footer .lsi-social-icons li a,
.footer-widgets .lsi-social-icons li a {
  background-color: var(--wd-primary) !important;
  color: var(--wd-cream) !important;
}
.site-footer .lsi-social-icons .lsicon,
.footer-widgets .lsi-social-icons .lsicon {
  color: var(--wd-cream) !important;
}
.site-footer .lsi-social-icons li a:hover,
.site-footer .lsi-social-icons li a:hover .lsicon,
.footer-widgets .lsi-social-icons li a:hover,
.footer-widgets .lsi-social-icons li a:hover .lsicon {
  color: var(--wd-secondary) !important;
}

/* ─── Newsletter section (#contact) — palette only ─────────────────── */
/* Source: GP Element 12264 "Newsletter Subscriber" — GenerateBlocks
   container with `anchor: contact` wrapping a TFA Forms widget. The
   inner card (.gb-container-225273a6) ships forest-green via DB
   post_content. Main site's CTA is rose pink with dark text, so we
   override the inner card colours only — layout, warrior illustration
   and full-hero geometry differ and are out of scope. */
#contact .gb-container {
  background-color: var(--wd-accent) !important;       /* rose pink */
}
#contact h4,
#contact p,
#contact .gb-headline-text,
#contact .gb-headline {
  color: var(--wd-foreground) !important;              /* dark on rose */
}

/* Submit button: scope override — base rule below sets it to forest-green
   text (for the previous green container); inside #contact we want dark
   text to match main site's white-bg + black-text rose-pink CTA button. */
#contact .wForm .actions input[type="submit"],
#contact .wForm input.primaryAction.gform_button {
  color: var(--wd-foreground) !important;
}

/* ─── TFA Forms newsletter widget (`.wForm`) ───────────────────────── */
/* Lives inside the forest-green Newsletter widget; needs reverse-color
   buttons + horizontal layout. Source HTML: <div class="wForm"> with
   .signup-wrapper > input[type=text] and .actions > input[type=submit]. */

/* Hide the "Email" label that's marked .hidden in HTML but rendered
   visible because GP's CSS doesn't honor that class name. */
.wForm label.hidden {
  display: none !important;
}

/* Lay the email input and submit button on the same row. */
.wForm form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.wForm .signup-wrapper {
  flex: 1 1 auto;
  min-width: 200px;
}
.wForm .signup-wrapper input[type="text"] {
  width: 100%;
}
.wForm .actions {
  flex: 0 0 auto;
}

/* Reverse-color the submit button (white bg + green text + pill shape).
   Override the generic input[type=submit] rule from earlier in this file. */
.wForm .actions input[type="submit"],
.wForm input.primaryAction.gform_button {
  background-color: #FFFFFF !important;
  color: var(--wd-primary) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wForm .actions input[type="submit"]:hover,
.wForm input.primaryAction.gform_button:hover {
  background-color: var(--wd-cream) !important;
}

/* Inline status line injected by wd-newsletter-klaviyo.js after submit.
   Sits on the rose-pink #contact card, so default to dark foreground. */
.wForm .wd-newsletter-status {
  flex: 1 0 100%;
  margin: 8px 0 0;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--wd-foreground);
}
.wForm .wd-newsletter-status:empty {
  display: none;
}
.wForm .wd-newsletter-status[data-state="error"] {
  color: #b00020;
}

/* Newsletter success "Thank You" modal — mirrors the main walksdevour.com
   dialog (centered white card, forest-green full-width Ok button). Built by
   wd-newsletter-klaviyo.js and appended to <body>. */
.wd-nl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
}
.wd-nl-modal {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 450px;
  background: #ffffff;
  color: var(--wd-foreground);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
/* Plain × icon — no background/border. The parent (GeneratePress) theme
   styles bare <button> with a filled background, so force it off. */
.wd-nl-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--wd-foreground) !important;
}
.wd-nl-modal-close:hover,
.wd-nl-modal-close:focus {
  background: transparent !important;
  color: var(--wd-foreground) !important;
  opacity: 0.7;
}
.wd-nl-modal-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  color: var(--wd-foreground);
}
.wd-nl-modal-body {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wd-foreground);
  opacity: 0.85;
}
.wd-nl-modal-ok {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--wd-primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.wd-nl-modal-ok:hover {
  opacity: 0.9;
}
