/* ─────────────────────────────────────────────────────────────
   Invincible Tools — General Page Content Width
   Applies to ordinary WordPress pages (Learn, About, Contact,
   etc.) — NOT the front page, Cart, or Checkout, which each have
   their own dedicated layout CSS already.

   Storefront doesn't define a width limit for Gutenberg's
   .alignwide/.alignfull classes (that's normally a block-theme/
   theme.json responsibility), so wide-aligned content — like the
   video embed on the Learn page — was stretching out to nearly
   the full browser width instead of staying inside a readable
   column. This gives #primary a sensible max-width so wide
   content breaks out a controlled amount instead of unbounded.
   ───────────────────────────────────────────────────────────── */

#primary.content-area {
  float: none !important;
  width: 100% !important;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-top: calc(var(--nav-h, 80px) + 32px);
}

#main.site-main {
  float: none !important;
  width: 100% !important;
  max-width: none;
}

/* Safety net: guarantee the footer always drops below page content
   even if something else introduces a float upstream in the future. */
#footer {
  clear: both;
}

/* Wide-aligned blocks (like the video's column) are allowed to
   break out a bit further than the reading column, but capped —
   not unbounded like before. */
#primary .alignwide {
  max-width: 1100px;
  margin-left: calc(50% - 550px);
  margin-right: calc(50% - 550px);
}

/* Full-bleed blocks stay contained to the site's overall content
   width rather than the raw browser viewport. */
#primary .alignfull {
  max-width: 1240px;
  margin-left: calc(50% - 620px);
  margin-right: calc(50% - 620px);
}

@media (max-width: 1150px) {
  #primary .alignwide,
  #primary .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Links inside ordinary page content (Contact, About, etc.) —
   teal, underlined, so they read as clickable. Uses the same
   --teal variable defined in front-page.css, which loads on
   every page. */
#primary .entry-content a {
  color: var(--teal, #1B6B5A);
  text-decoration: underline;
  font-weight: 600;
}

#primary .entry-content a:hover {
  color: var(--teal-dark, #134D41);
}