/*
 * nd-gp-structural.css — GeneratePress Structural Replacement
 * ============================================================
 * When we dequeue GP's main.min.css, we lose a few structural layout
 * rules that the GP page wrapper depends on. This file replaces only
 * those rules — nothing cosmetic.
 *
 * As we build out our own templates (Phase 2+), even these rules
 * will become unnecessary. This file can be removed entirely once
 * all pages use our custom markup.
 *
 * DEPENDS ON: nothing (loads first in the chain)
 */


/* ─── PAGE WRAPPER ─── */
/* GP wraps all content in .site.grid-container.container */

.grid-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;             /* Our container width, not GP's 1200px */
}

.site-content {
  display: flex;
}

.content-area {
  width: 100%;
}


/* ─── ARTICLE CONTAINER ─── */
/* GP's .inside-article provides the content padding */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
  padding: 40px;
}

.one-container .site-content {
  padding: 40px;
}

.separate-containers .site-main {
  margin: 20px;
}

.separate-containers.no-sidebar .site-main {
  margin-left: 0;
  margin-right: 0;
}


/* ─── SCREEN READER TEXT ─── */
/* Accessibility class used by GP and WordPress core */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}


/* ─── SKIP LINK ─── */

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}


/* ─── ALIGNMENT CLASSES ─── */
/* Used by WordPress block editor for image/content alignment */

.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}


/* ─── EMBEDS ─── */

embed,
iframe,
object {
  max-width: 100%;
}


/* ─── SITE FOOTER WRAPPER ─── */
/* GP outputs an empty .site-footer div — keep it from breaking layout */

.site-footer:empty {
  display: none;
}


/* ─── MOBILE ─── */
/* Replicate GP's mobile content-area reset */

@media (max-width: 880px) {   /* --bp-md */
  .site-content {
    flex-direction: column;
  }

  .container .site-content .content-area {
    width: auto;
  }

  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content {
    padding: 24px;
  }
}

@media (max-width: 640px) {   /* --bp-sm */
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content {
    padding: 16px;
  }
}