/* =========================
   Base / Reset
========================= */
:root {
  --header-height: 80px;   /* desktop header height */
  --rail-max: 1200px;      /* site content width */
  --rail-pad: 20px;        /* side padding */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.7;
    overflow-x: hidden;
    background: #1c1c1c;       /* Softer dark gray */
    color: #e0e0e0;            /* Light gray text */
    font-family: 'Inter', sans-serif; /* Modern, clean font */
}

/* Push content below fixed header (desktop) */
body {
    padding-top: var(--header-height); /* match .site-header height */
}

/* Remove Smart Post Pro heading "#" copy-link */
a.sps-toc-heading-copy-link {
  display: none !important;
}


/* =========================
   Jetpack Subscribe Section
========================= */
.subscribe-section {
    max-width: 850px;
    margin: 40px auto;
    padding: 20px;
    background: #222;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    text-align: center;
}

.subscribe-section h2 {
    color: #4da6ff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.subscribe-section p {
    color: #b0b0b0;
    margin-bottom: 15px;
}

/* Heading inside Jetpack block */
.wp-block-jetpack-subscriptions h2 {
    color: #4da6ff;     /* match your accent blue */
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* Text inside Jetpack block */
.wp-block-jetpack-subscriptions p {
    color: #b0b0b0;
    font-size: 1rem;
    margin-bottom: 15px;
}

/* Form input + button */
.jetpack-subscribe-form input[type="email"] {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    margin: 10px auto;
    display: block;
    background: #111;
    color: #e0e0e0;
}
.jetpack-subscribe-form input[type="submit"] {
    background: #4da6ff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}
.jetpack-subscribe-form input[type="submit"]:hover {
    background: #1a75d1;
}

/* EmbedPlus (YouTube Free) – force correct sizing */
.entry-content .epyt-video-wrapper,
.entry-content .epyt-video-container,
.entry-content .embedplus-video,
.entry-content [class*="epyt-"] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Highlight border around each post – ONLY on single posts */
.single-post .post-box {
    border: 2px solid #4da6ff;
    padding: 20px;
    border-radius: 8px;
    margin: 40px auto;
    background: #222;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Make the actual iframe fill the box */
.entry-content .epyt-video-wrapper iframe,
.entry-content .epyt-video-container iframe,
.entry-content [class*="epyt-"] iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  transform: none !important;
  object-fit: contain !important;
}

/* Safety: kill any stray fixed heights */
.entry-content [class*="epyt-"],
.entry-content [class*="epyt-"] * {
  max-height: none !important;
}

/* =========================================
   Center regular WordPress posts & pages
   (header/footer untouched)
========================================= */

/* Main containers */
main,
.site-main,
.content-area,
#content,
#primary,
.entry-content,
.single-post .article-container,
.page .article-container {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}

/* Individual post articles */
.single-post article,
.page article {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}

/* Featured images (prevent full bleed) */
.single-post article img,
.page article img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Center post titles and meta if you want */
.single-post h1.entry-title,
.single-post .entry-meta {
  text-align: center;
}

/* Optional: align Gutenberg blocks */
.wp-block-group.alignwide,
.wp-block-image.alignwide,
.wp-block-cover.alignwide {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
}

/* ✅ Make centered images actually centered */
.wp-block-image,
.aligncenter,
.entry-content .aligncenter,
.entry-content .wp-block-image {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ✅ Ensure block editor figures stay centered */
.wp-block-image figure,
.wp-block-image img {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Optional: handle Classic Editor images */
img.aligncenter {
  display: block;
  margin: 0 auto !important;
}

/* ===============================
   Premium Ad Styling (Shortcode + Global)
   =============================== */

/* Global wrapper for both the header ad and shortcode */
#premium-ad-below-nav,
.premium-ad-shortcode {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* matches site background */
  padding: 10px 0;
  box-shadow: none;
  text-align: center;
}

/* ✅ IMPORTANT FIX: ensure premium ad never underlaps fixed header */
#premium-ad-below-nav {
  margin-top: var(--header-height); /* push it below the fixed header */
}

/* Inner ad container */
.premium-ad-inner {
  width: 728px;
  border-radius: 6px;
  border: 2px dashed #444;
  background: transparent;
  display: inline-block;
  text-align: center;
}

/* Make sure the image itself is centered inside the box */
.premium-ad-inner img {
  display: block;
  margin: 0 auto;
}


/* =========================
   Text Colors & Typography
========================= */
/* Normal text */
body, p, span, li {
    color: #b0b0b0; /* medium gray */
}

/* Bold text */
strong, b {
    color: #ffffff; /* white */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff; /* force headings white */
    font-weight: bold;
}

/* =========================
   Article container
========================= */
.article-container {
    max-width: 850px;
    margin: 40px auto;
    padding: 20px;
    background: #222;           /* Subtle contrast box */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Headings sizes */
h1, h2, h3 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
    color: #4da6ff;  /* Accent blue */
}

/* Links */
a {
    color: #4da6ff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* =========================
   Header
========================= */
.site-header {
    display: flex;
    justify-content: space-between;  /* logo left, nav right */
    align-items: center;
    padding: 15px 40px;              /* small even padding */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #1b1b1b;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    height: var(--header-height);    /* ✅ use variable */
}

/* Logo left */
.logo-left {
    padding-left: 40px; /* breathing room */
}

/* Nav (single consolidated block) */
.site-nav {
    display: flex;
    justify-content: flex-end; /* push nav to right */
    flex-grow: 1;              /* expand if no logo */
    padding-right: 120px;      /* move nav left visually */
}

/* Logo image inside header */
.header-logo {
    max-height: 350px; /* bigger logo */
    width: auto;
    display: block;
}

/* Navigation list */
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}
.site-nav li {
    margin: 0;
}
.site-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
    line-height: 1;
}
.site-nav a:hover {
    color: #4da6ff;
}

/* Main logo in page body */
.arcade-logo {
    max-width: 350px;
    height: auto;
    margin: 40px auto;
    display: block;
}

/* =========================
   Footer
========================= */
footer {
    background-color: #000;
    color: white;
    padding: 20px;
}

/* Footer bar layout */
.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 20px;
    background-color: #000;
    color: #bbb;
    font-size: 14px;
    border-top: 1px solid #222;
    gap: 20px;
    text-align: center;
}

.footer-copy {
    flex: 1;
    text-align: left;
    white-space: nowrap; /* desktop: keep on one line */
}

/* Footer navigation */
.footer-nav {
    flex: 1;
    text-align: center;
}
.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.footer-nav a {
    color: #bbbbbb;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 14px;
}
.footer-nav a:hover {
    color: #ffffff;
}

/* Footer contact */
.footer-contact {
    flex: 1;
    text-align: right;
}
.footer-contact a {
    color: #bbbbbb;
    text-decoration: none;
    margin-left: 8px;
}
.footer-contact a:hover {
    color: #ffffff;
}

/* =========================
   Extra Mobile Styles
========================= */
@media (max-width: 800px) {

  /* ✅ Mobile header height (matches your previous 140px padding-top) */
  :root {
    --header-height: 140px;
  }

  /* Header stacks */
  .site-header {
    flex-direction: column;
    align-items: center;
    height: auto;        /* allow it to expand */
    padding: 2px 2px;
  }
  .logo-left {
    padding-left: 0; /* remove big left gap */
  }
  .site-nav {
    padding-right: 0; /* remove forced right gap */
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
  .site-nav ul {
    flex-wrap: wrap;
    gap: 12px;
  }
  .header-logo {
    max-height: 50px; /* scale logo for small screens */
  }

  /* ✅ On mobile, don't add extra margin above the ad
        because body padding already handles the offset */
  #premium-ad-below-nav {
    margin-top: 0;
  }

  /* Main content */
  .article-container {
    margin: 20px 10px;
    padding: 15px;
  }
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.3rem;
  }

  /* Footer fits small screens */
  .footer-bar {
    flex-direction: column;
    gap: 10px;
    padding: 15px 8px;   /* reduce padding so content fits */
    text-align: center;
  }
  .footer-copy {
    flex: 100%;
    text-align: center;
    white-space: normal;   /* allow wrap on mobile */
    word-break: break-word;/* prevent overflow on long strings/urls */
  }
  .footer-nav {
    flex: 100%;
    text-align: center;
  }
  .footer-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .footer-contact {
    flex: 100%;
    text-align: center;
    word-break: break-word;
  }
}

/* =========================================
   Center site content (header/footer untouched)
   Drop at the very bottom of style.css
========================================= */

/* Core WP content wrappers */
main,
.site-main,
.content-area,
#content,
#primary,
.entry-content,
.article-container,
.page,
.post,
.subscribe-section {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}

/* Gutenberg “wide” blocks should still respect the rail */
.wp-block-group.alignwide,
.wp-block-image.alignwide,
.wp-block-cover.alignwide,
.wp-block-gallery.alignwide {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}

/* Keep truly full-bleed blocks full width, if you use them */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.wp-block-gallery.alignfull {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Media safety */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* ===== NUCLEAR CONTENT RAIL (header/footer untouched) ===== */

/* Hit all common theme wrappers */
.site-content,
.site-main,
.content-area,
.site-container,
.container,
.wrap,
.inner,
.content,
#primary,
#content,
.hentry,
.entry-content,
.single-post article,
.page article,
.post,
.page {
  max-width: var(--rail-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--rail-pad) !important;
  padding-right: var(--rail-pad) !important;
  box-sizing: border-box !important;
}

/* Gutenberg wide blocks should respect the rail */
.wp-block-group.alignwide,
.wp-block-image.alignwide,
.wp-block-cover.alignwide,
.wp-block-gallery.alignwide {
  max-width: var(--rail-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--rail-pad) !important;
  padding-right: var(--rail-pad) !important;
}

/* Keep true full-bleed blocks full width if you use them */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.wp-block-gallery.alignfull { max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }

/* Media safety */
.entry-content img,
.single-post article img,
.page article img,
.wp-block-image img { max-width:100%; height:auto; display:block; margin-left:auto; margin-right:auto; }