/*
Theme Name: GeneratePress Child
Template: generatepress
*/

/* ───────────────── Tag pills ───────────────── */
:root{
  --grey-900:#111827;--grey-700:#374151;--grey-500:#6b7280;--grey-300:#d1d5db;
  --brand:#1e73be;--white:#fff;
  --step-0:clamp(.94rem,1vw + .5rem,1.125rem);
  --step-1:clamp(1.2rem,1vw + .8rem,1.5rem);
  --step-2:clamp(1.5rem,1vw + 1rem,2rem);
}

.image-tags {
  margin-top: 1rem;
  margin-left: 0.5rem;
  font-size: .875rem;
  color: #4b5563;
}
.tag-pill {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .25rem .5rem;
  background: #f3f4f6;
  border-radius: .25rem;
  color: #374151;
  text-decoration: none;
}
.tag-pill:hover {
  background: #e5e7eb;
}

/* ─────────── Masonry grid (CSS Grid) ─────────── */
.image-masonry {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  grid-auto-rows: max-content;
  /* Performance optimizations */
  contain: layout style;
  width: 100% !important;
  max-width: none !important;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .image-masonry {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .image-masonry {
    grid-template-columns: 1fr !important;
  }
}
.masonry-item img,
.masonry-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .25rem;
  object-fit: cover;
  aspect-ratio: attr(width) / attr(height);
}

/* Ensure masonry items don't have conflicting styles */
.image-masonry .masonry-item {
  display: block;
  overflow: hidden;
  border-radius: .25rem;
  text-decoration: none;
  /* Prevent layout shift during loading */
  min-height: 200px;
  background: #f3f4f6;
}

/* ───────── Image Details container ───────── */
.image-details {
  margin: 0.4rem 0;
}
.image-details h2 {
  text-align: left;
  margin-left: 10px;
}

/* ───────── Single-Image Page Tweaks ───────── */
.single-image header h1 {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: #374151;
  margin: 1.5rem 0.5rem 0.5rem 0.5rem;
}
.single-image .image-details h2 {
  font-size: 0.9rem;
  color: #4a4a4a;
  margin-bottom: 0.7rem;
}
.single-image .image-details dt,
.single-image .image-details dd {
  font-size: 0.875rem;
  color: #4a4a4a;
}
.single-image [itemprop="description"] p {
  margin-bottom: 1em;
}

/* ───────── Download button styling ───────── */
.download-button {
  margin: 10px 0 30px 20px;
}
.single-image .download-button a {
  background-color: #141414;
  color: #fff;
  font-size: 0.75rem;
  padding: .375rem .75rem;
  border-radius: .25rem;
  display: inline-block;
}

/* ─────── Hide breadcrumbs off-screen ─────── */
nav.rank-math-breadcrumb {
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ────── HEADER FLEX & SEARCH (desktop+) ────── */
.generate-search-icon,
.main-navigation .search-toggle {
  display: none;
}
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.site-header .inside-header > .site-branding,
.site-header .inside-header > .header-search-form {
  margin-left: 1.5rem;
  position: relative;
}
.header-search-form .search-field {
  width: 280px;
  padding: .5rem 2.5rem .5rem .75rem;
  background-color: #f3f4f6;
  border: none;
  border-radius: 9999px;
  font-size: .875rem;
  color: #374151;
}
.header-search-form .search-field::placeholder {
  color: #9CA3AF;
}
.header-search-form .search-submit {
  position: absolute; top: 0; right: 0; bottom: 0;
  padding: .5rem .75rem;
  background-color: #f3f4f6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239CA3AF' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.414-1.414l-3.85-3.85zm-5.242 .656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
  border: none;
  border-radius: 0 9999px 9999px 0;
  cursor: pointer;
}
.header-search-form .search-submit:hover {
  background-color: #e5e7eb;
}

/* ───────── List styling inside image-details ───────── */
.image-details ul.fa-ul {
  margin-bottom: 0;
}
.image-details ul.fa-ul li {
  font-family: Arial, sans-serif;
  font-size: 0.9rem !important;
  font-weight: 400;
  color: #374151;
}

/* ──────── Responsive & fluid typography ──────── */
html { font-size: 100%; }
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
p, li, .image-details ul.fa-ul li {
  font-size: 1rem;
  line-height: 1.5;
}

  .download-button { margin: 1rem 0; }
  .single-image .download-button a {
    width: 60%; max-width: 200px;
    padding: .75rem; font-size: 0.875rem;
  }


@media (max-width: 768px) {

  /* —————————————————————————————
     CLOSED: logo + single burger only
     ————————————————————————————— */
  /* hide the inline Explore menu */
  .main-navigation:not(.toggled) .inside-navigation .main-nav > ul {
    display: none !important;
  }
  /* force only the GP header toggle to show */
  .main-navigation .menu-toggle {
    display: block !important;
  }
  /* drop the “Menu” text label */
  .menu-toggle .mobile-menu {
    display: none !important;
  }

  /* prep both SVGs for manual swap */
  .menu-toggle .gp-icon svg {
    display: none !important;
  }
  /* show hamburger (first SVG) when closed */
  .main-navigation:not(.toggled) .menu-toggle .gp-icon svg:first-child {
    display: inline-block !important;
  }

  /* —————————————————————————————
     OPENED: full-screen overlay + one “×” toggle
     ————————————————————————————— */
  .main-navigation.toggled .inside-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    transform: none !important;      /* kill GP’s default slide */
    visibility: visible !important;
    opacity: 1 !important;
    padding: 4rem 1.5rem 1.5rem !important;
  }

  /* bring nav links back inside overlay */
  .main-navigation.toggled .inside-navigation .main-nav > ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .main-navigation.toggled .inside-navigation .menu-item {
    margin: 1rem 0 !important;
  }
  .main-navigation.toggled .inside-navigation .menu-item a {
    display: block !important;
    font-size: 1.125rem !important;
    color: #333 !important;
  }

  /* swap in the “×” icon (second SVG) */
  .main-navigation.toggled .menu-toggle .gp-icon svg:last-child {
    display: inline-block !important;
  }

  /* pin the close toggle at top-right */
  .main-navigation.toggled .menu-toggle {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 1000 !important;
  }
  
}

/* Hide Duplicate Burger Button */
#mobile-menu-control-wrapper {
  display: none;
}

#site-navigation {
  flex-basis: auto !important;
}

/* Prevent mobile background scrolling */
.mobile-menu-open body {
    overflow: hidden;
}
/* Full screen menu layout */
.main-navigation.toggled .inside-navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Reserve gutter for overlay scrollbar (applies on all viewports) */
.main-navigation.toggled .inside-navigation {
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
  padding-right: 2rem !important;
}

/* ─────── Mobile: logo+menu on line 1, search full-width on line 2 ─────── */
@media (max-width: 768px) {
  
  h1 {
    font-size: 1.4rem !important;
  }
  .image-details ul.fa-ul li {
  font-size: 1.2rem;
  }

  /* 1) allow wrapping so items can flow onto a new line */
  .site-header .inside-header {
    flex-wrap: wrap;
  }

  /* 2) ensure logo and burger stay on the first line */
  .site-header .inside-header > .site-branding,
  .site-header .inside-header > .main-navigation {
    order: 1;
    flex: 0 0 auto;
  }

  /* 3) force the search form to be the second “row” and span full width */
  .site-header .inside-header > .header-search-form {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    margin: .75rem 0 0;   /* space above the search */
    margin-left: 0;      /* cancel the desktop margin-left */
  }

  /* 4) make the input fill that full width container */
  .header-search-form .search-field {
    width: 100%;
  }
}

/* Remove default focus ring on search input and button */
.header-search-form .search-field:focus,
.header-search-form .search-submit:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox inner focus ring hack */
.header-search-form .search-field::-moz-focus-inner,
.header-search-form .search-submit::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* 1. Hero container: centering & padding */
.hero-banner {
  display: flex;                /* flex container */
  flex-direction: column;       /* stack vertically */
  align-items: center;          /* center horizontally */
  justify-content: center;      /* center vertically */
  padding: 6rem 1rem;           /* ↑ adjust top/bottom & left/right */
  background-color: #1c1c1c;    /* ↑ change the banner’s background */
}

/* 2. Headline */
.hero-banner h1 {
  color: #ffffff;               /* ↑ main heading text color */
  margin-bottom: 1rem;          /* space below the title */
  text-align: center;           /* ensure it’s centered */
}

.hero-search .search-form {
  display: flex;
  justify-content: center;
}

.hero-search .search-field {
  width: 100%;
  max-width: 500px;
  padding: .75rem 1rem;
  font-size: 1rem;
  border-radius: 9999px 0 0 9999px;
  border: 1px solid #d1d5db;
}

.hero-search .search-submit {
  padding: .75rem 1rem;
  border-radius: 0 9999px 9999px 0;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-left: none;
}

.hero-search .search-submit svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: #6b7280; /* adjust if you want a different color */
}

/* Hide navbar search on the front page only */
body.home .header-search-form,
body.front-page .header-search-form {
  display: none !important;
}

/* ─────── Horizontal, un-bulleted pagination ─────── */
.pagination ul {
  list-style: none;        /* remove bullets */
  margin: 0;               /* reset default spacing */
  padding: 0;
  display: flex;           /* make the list a flex container */
  justify-content: center; /* center the page links */
  gap: 0.5rem;             /* space between items */
}

.pagination ul li {
  margin: 0;               /* ensure no extra margins on the <li> */
}

.pagination ul li a,
.pagination ul li span {
  display: inline-block;   /* allow padding on both links and spans */
  padding: 0.5rem 0.75rem; /* tweak to taste */
  text-decoration: none;   /* remove any underlines */
  color: inherit;          /* match your site’s text color */
}

/* Optional: highlight the current page */
.pagination ul .current {
  font-weight: bold;
  text-decoration: underline;
}

/* Hero Banner background image */
.hero-banner,
.hero-banner.has-hero-bg {
  /* fallback color */
  background-color: #1c1c1c;
  /* your banner image */
  background-image: url('https://stoxx.io/wp-content/uploads/2025/07/home_blue_banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ensure the text still contrasts */
  color: #fff;
}

/* ----------------------------------------------------------------------
   Front-page Header & Hero adjustments
   - Keep header static, transparent
   - Slide hero up beneath it
---------------------------------------------------------------------- */

/* 1. Make header transparent but static */
body.home .site-header,
body.front-page .site-header {
  background: transparent !important;
  z-index: 50;
}

/* 2. Slide hero under the header */
body.home .hero-banner {
  margin-top: -7rem; /* pull up by header height */
  padding-top: calc(6rem + 4rem); /* original padding + header height */
  position: relative;
  z-index: 0; /* beneath the header */
}

/* Homepage-only: make navbar links white */
body.home .site-header .inside-header a,
body.home .site-header .main-navigation .main-nav li a,
body.home .site-header .menu-toggle a,
body.home .site-header .menu-toggle .gp-icon svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ───── Reset any default page gap ───── */
html, body {
  margin: 0;
  padding: 0;
}

/* ───── Static, transparent header on homepage ───── */
body.home .site-header,
body.front-page .site-header {
  background: transparent !important;
  z-index: 50;
}

/* ───── Slide hero up under that header ───── */
body.home .hero-banner {
  margin-top: -7rem;                         /* pull up by header height */
  margin-bottom: 1rem;
  padding-top: calc(6rem + 4rem);            /* original padding + header height */
  position: relative;
  z-index: 0;                                /* sits beneath the header */
}

/* ───── Remove any extra wrapper padding ───── */
body.home .site-content,
body.home .content-area {
  padding-top: 0 !important;
}

/* ───── Force all nav parts transparent ───── */
body.home .site-header,
body.home .site-header .inside-header,
body.home .site-header .main-navigation,
body.home .site-header .main-navigation .main-nav,
body.home .site-header .main-navigation .main-nav li,
body.home .site-header .main-navigation .main-nav li a {
  background: transparent !important;
}

/* ───── Transparent full-screen overlay when toggled ───── */
body.home .main-navigation.toggled .inside-navigation {
  background: transparent !important;
}

/* ───── Transparent menu‐toggle background ───── */
body.home .site-header .menu-toggle,
body.home .site-header .menu-toggle a {
  background: transparent !important;
}

/* ───── Homepage only: make all nav text & icon white ───── */
body.home .site-header .inside-header a,
body.home .site-header .main-navigation .main-nav li a,
body.home .site-header .menu-toggle a,
body.home .site-header .menu-toggle .gp-icon svg path {
  color: #fff !important;
  fill:  #fff !important;
}

/* ─── Restoring mobile overlay nav on homepage ─── */
body.home .main-navigation.toggled .inside-navigation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  padding-top: 4rem !important;       /* match your header height */
  background: #fff !important;        /* white overlay like other pages */
  transform: none !important;         /* kill any slide transform */
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;           /* above hero */
}

/* ─── Prevent page shifting when menu opens ─── */
body.home .mobile-menu-open {
  overflow: hidden !important;        /* lock the body in place */
}

/* ─── Ensure no extra top gap/padding on homepage content ─── */
body.home .site-content,
body.home .content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Homepage mobile overlay: dark text on white background */
body.home .main-navigation.toggled .inside-navigation .main-nav li a {
  color: #1f2937 !important; /* dark gray */
}
body.home .main-navigation.toggled .inside-navigation .main-nav li a:hover {
  color: #111827 !important; /* almost black on hover */
}
/* If you have sub-menu items */
body.home .main-navigation.toggled .inside-navigation .main-nav li li a {
  color: #1f2937 !important;
}
body.home .main-navigation.toggled .inside-navigation .main-nav li li a:hover {
  color: #111827 !important;
}

/* Homepage mobile overlay: dark close (×) icon */
body.home .main-navigation.toggled .menu-toggle .gp-icon svg:last-child path {
  fill: #1f2937 !important;
}
body.home .site-header .main-navigation .main-nav li .sub-menu {
  background-color: #fff !important;
}
body.home .site-header .main-navigation .main-nav li .sub-menu a {
  color: #1f2937 !important;
}
body.home .site-header .main-navigation .main-nav li .sub-menu a:hover {
  color: #111827 !important;
}
/* Removed duplicate .image-masonry definitions - keeping only the grid version above */

/* Consolidated media queries moved to main .image-masonry definition above */

.similar-images {
  margin-top: 2rem;
  font-size: 1rem !important;
}

.similar-images h2.text-xl {
  font-size: 1.3rem;
  margin-left: 0.5rem;
}

/* ── AI badge overlay ───────────────────────────── */
.single-image figure {               /* make the <figure> the containing block */
  position: relative;
}

.archive-header h1 {   /* or .archive-header > h1 */
    margin-left: 1rem; /* adjust value as needed */
}

/* search results only (body gets the class “search”) */
.search nav.image-tags {          /* or simply .image-tags {} */
    margin-bottom: 1rem;
}

nav.pagination {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.archive-header > p {
  margin-left: 1rem;
}

/* ── Center hero image on single-image pages ── */
.single-image.image-page figure {
  display: flex;
  justify-content: center;
}

.single-image.image-page figure img.w-full {
  /* override Tailwind’s width:100% */
  width: auto !important;
  max-width: 100% !important;
}

#content {
  display: block;
}

/* ————————————————————————————
   Accessibility: visually-hidden utility
   ———————————————————————————— */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* ────────────────────────────
   Single-Image Hero Centering
   ──────────────────────────── */
.single-image figure,
.single-image figure img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* let the containing <figure> grow to your chosen cap, and
   ensure the image never exceeds its own native size */
.single-image figure {
  max-width: 1280px;
}

.single-image figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────
   Similar-images: force native 300px thumbnails
───────────────────────────────────────────── */

.similar-images .masonry-item img {
  display: block;
  margin: 0 auto;
  width: 300px;
  height: auto;
  border-radius: .25rem; /* keep your rounding */
}

/* Similar images grid - exactly 3 images */

.similar-images-grid {
  display: grid !important;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: max-content;
  contain: layout style;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto;
}

.similar-item {
  display: block;
  overflow: hidden;
  border-radius: .25rem;
  text-decoration: none;
  background: #f3f4f6;
}

.similar-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .25rem;
  object-fit: cover;
}

/* Responsive similar images - 3 on desktop, 2 on tablet, 1 on mobile */
@media (max-width: 768px) {
  .similar-images-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .similar-images-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
  }
}

/* Fix admin bar spacing issue - move entire page up */
html {
  margin-top: 0 !important;
}

body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove WordPress admin bar offset entirely */
body.admin-bar {
  margin-top: 0 !important;
}

.admin-bar body {
  margin-top: 0 !important;
}

/* Force site header to top */
.site-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  top: 0;
}

/* Ensure no global container margins */
.site {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove any grid container top spacing */
.grid-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}