/* =========================================================
   Kizziah.Blog — Breadcrumb + Nav Spacing (Gold Stack v2.3)
   + Footer refinement + Section Orientation Link (hardened+)
   + Header lattice watermark (moved up to align with “Kizziah.AI”)
   ========================================================= */


/* =========================================================
   1) Hide breadcrumbs on Start Here only
   ========================================================= */

.page-id-464 .breadcrumbs,
.page-id-464 .breadcrumb,
.page-id-464 #breadcrumbs,
.page-id-464 nav[aria-label="Breadcrumb"],
.page-id-464 .yoast-breadcrumb,
.page-id-464 .yoast-breadcrumbs,
.page-id-464 .rank-math-breadcrumb,
.page-id-464 .breadcrumb-trail,
.page-id-464 .woocommerce-breadcrumb {
  display: none !important;
}


/* =========================================================
   2) Breadcrumb base selectors (single source of truth)
   ========================================================= */

.breadcrumb,
.breadcrumbs,
#breadcrumbs,
nav[aria-label="Breadcrumb"],
.breadcrumb-trail,
.yoast-breadcrumb,
.yoast-breadcrumbs,
.rank-math-breadcrumb,
.woocommerce-breadcrumb {
  box-sizing: border-box;

  /* width + alignment */
  width: min(100% - 2rem, var(--wp--style--global--content-size, 1100px));
  margin-left: auto;
  margin-right: auto;

  /* horizontal padding */
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;

  /* spacing + typography */
  margin-top: 18px;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.85;

  /* vertical centering */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.35 !important;
}

/* Fallback for older engines that don’t support width:min() */
@supports not (width: min(100% - 2rem, 1100px)) {
  .breadcrumb,
  .breadcrumbs,
  #breadcrumbs,
  nav[aria-label="Breadcrumb"],
  .breadcrumb-trail,
  .yoast-breadcrumb,
  .yoast-breadcrumbs,
  .rank-math-breadcrumb,
  .woocommerce-breadcrumb {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 1100px);
  }
}

/* Remove default paragraph margin inside breadcrumbs */
.breadcrumb p,
.breadcrumbs p,
#breadcrumbs p,
nav[aria-label="Breadcrumb"] p,
.breadcrumb-trail p,
.yoast-breadcrumb p,
.yoast-breadcrumbs p,
.rank-math-breadcrumb p,
.woocommerce-breadcrumb p {
  margin: 0 !important;
}


/* =========================================================
   3) Breadcrumb links
   ========================================================= */

.breadcrumb a,
.breadcrumbs a,
#breadcrumbs a,
nav[aria-label="Breadcrumb"] a,
.breadcrumb-trail a,
.yoast-breadcrumb a,
.yoast-breadcrumbs a,
.rank-math-breadcrumb a,
.woocommerce-breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
#breadcrumbs a:hover,
nav[aria-label="Breadcrumb"] a:hover,
.breadcrumb-trail a:hover,
.yoast-breadcrumb a:hover,
.yoast-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}


/* =========================================================
   4) Mobile tuning
   ========================================================= */

@media (max-width: 768px) {
  .breadcrumb,
  .breadcrumbs,
  #breadcrumbs,
  nav[aria-label="Breadcrumb"],
  .breadcrumb-trail,
  .yoast-breadcrumb,
  .yoast-breadcrumbs,
  .rank-math-breadcrumb,
  .woocommerce-breadcrumb {
    margin-top: 1.25rem;
  }

  /* Header padding (mobile) — safer scope */
  .site-header .inside-header {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}


/* =========================================================
   Footer Visual Recession + Proximity Refinement
   ========================================================= */

.site-footer .widget {
  font-size: 0.9em;
  line-height: 1.5;
}

.site-footer .widget ul li {
  margin-bottom: 0.35em;
}

.site-footer .widget-title {
  font-size: 0.95em;
  margin-bottom: 0.5em;
}

.site-footer a {
  text-decoration-thickness: 1px;
}

.site-footer {
  margin-top: 1.75rem;
  padding-top: 1rem;
}

.site-footer .inside-site-info {
  padding-top: 0.75rem;
}


/* =========================================================
   Section Orientation Link (About this section →)
   ========================================================= */

body .site-main .section-orientation-link {
  margin-top: 0.9rem;
  margin-bottom: 1.0rem;
  padding-left: 2.0rem;
  position: relative;
}

body .site-main .section-orientation-link::before {
  content: "↳";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.35;
}

body .site-main .section-orientation-link a {
  display: inline-block;
  font-size: 0.95em;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  body .site-main .section-orientation-link {
    padding-left: 1.75rem;
    margin-top: 0.85rem;
    margin-bottom: 0.9rem;
  }
}


/* =========================================================
   Main Navigation Bar — white (as requested)
   + ensure it sits ABOVE the watermark layer
   ========================================================= */

.main-navigation {
  background-color: #ffffff !important;
  position: relative;
  z-index: 5;
}

/* Optional: if your theme adds a top border/line you don’t want */
/*
.main-navigation {
  border-top: 0 !important;
  box-shadow: none !important;
}
*/


/* =========================================================
   Header Lattice Watermark — library / archive style (GeneratePress)
   MOVE UP:
   - raise the lattice so its top aligns nearer “Kizziah.AI”
   - still contained (no menu bleed)
   ========================================================= */

/* Create a safe stacking context for the header */
header#masthead {
  position: relative;
  z-index: 1;
}

/* Contain the watermark strictly inside the header content area */
header#masthead .inside-header {
  position: relative;
  overflow: hidden; /* prevents watermark bleeding into the nav area */
}

/* Watermark layer (moved up) */
header#masthead .inside-header::before {
  content: "";
  position: absolute;

  /* extend upward so the watermark can sit behind “Kizziah.AI” */
  top: -140px;   /* ↑ moved up (was -60px) */
  left: 0;
  right: 0;
  bottom: 0;

  background-image: url("https://kizziah.blog/wp-content/uploads/2026/02/PNG-image-2.png");
  background-repeat: no-repeat;

  /* pull lattice further upward */
  background-position: center -140px;  /* ↑ moved up (was -55px) */

  background-size: 1400px auto;
  opacity: 0.06;

  pointer-events: none;
  z-index: 0;

  /* helps faint lines read on light backgrounds */
  mix-blend-mode: multiply;
}

/* Keep header content above watermark */
header#masthead .inside-header > * {
  position: relative;
  z-index: 1;
}

/* Mobile: smaller image + still higher, but less aggressive than desktop */
@media (max-width: 768px) {
  header#masthead .inside-header::before {
    top: -110px;                 /* ↑ moved up (was -45px) */
    background-size: 1100px auto;
    background-position: center -110px; /* ↑ moved up (was -40px) */
    opacity: 0.06;
  }
}