/* ==========================================================================
   Intellinez Plugins Showcase — shared styles for:
     1) Plugin Listing page  (.intlz-plugins-listing / archive-intlz_plugin.php)
     2) Plugin Detail page   (.intlz-plugin-detail / single-intlz_plugin.php)
     3) Site header/footer   (.intlz-site-header / .intlz-site-footer)
   Enqueued theme-wide via functions.php. Colors are CSS variables below —
   repoint these to update the brand palette without touching the rest of
   the file.
   ========================================================================== */

/* Colors below are sampled directly from the live intellinez.com site
   (logo swoosh, nav CTA gradient, footer charcoal, blog/card link blue,
   the lime-green used for "Life @ Intellinez" / testimonial accent words
   and its solid Read More button) — the site actually runs on four colors
   (navy, sky blue, lime green, orange) plus charcoal/gray, not just blue.
   Confirm the exact font-family in browser devtools before implementation —
   Poppins is a close visual match (rounded geometric sans) but hasn't been
   confirmed against the theme's enqueued font. */
:root{
  --intlz-navy:        #06317b;   /* nav CTA gradient start, section backgrounds, headings */
  --intlz-blue:         #0160a0;  /* nav CTA gradient end */
  --intlz-sky:         #02a3ee;   /* logo blue / card & blog link color / light-bg accent underline */
  --intlz-blue-light:  #eaf2fb;
  --intlz-orange:      #f1521b;   /* logo accent orange — use sparingly (badges, small highlights) */
  --intlz-green:       #6fc33d;   /* site's real accent green — "Life"/"love" highlight words, solid Read More button */
  --intlz-green-light: #eef8e6;
  --intlz-orange-light:#fdece6;
  --intlz-text:        #2b2b2b;   /* site nav/body text */
  --intlz-muted:       #666f76;
  --intlz-border:      #e2e8f0;
  --intlz-surface:     #ffffff;
  --intlz-surface-alt: #f5f8fc;
  --intlz-footer-bg:   #303030;   /* site footer background */
  --intlz-footer-text: #c9c9c9;
  --intlz-radius:      12px;
  --intlz-radius-sm:   8px;
  --intlz-shadow:      0 4px 16px rgba(6,49,123,.08);
  --intlz-shadow-hover:0 10px 28px rgba(6,49,123,.16);
  --intlz-max:         1300px;
  --intlz-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Site's signature heading treatment: one word bold + underlined in an
   accent color, the rest of the heading in plain dark text — seen across
   intellinez.com ("Our Service Domains", "Engagement Models", "Life @
   Intellinez"). Blue underline on light section backgrounds, green
   underline on navy section backgrounds. */
.intlz-accent-word{
  color: var(--intlz-sky);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.intlz-cta-band .intlz-accent-word,
.intlz-hero .intlz-accent-word,
.intlz-listing-hero .intlz-accent-word,
.intlz-stats-band .intlz-accent-word,
.on-navy .intlz-accent-word{
  color: var(--intlz-green);
}

html, body{ margin: 0; padding: 0; }

.intlz-plugins-listing, .intlz-plugin-detail, .intlz-site-header, .intlz-site-footer{
  color: var(--intlz-text);
  font: 16px/1.6 var(--intlz-font);
  box-sizing: border-box;
}
.intlz-plugins-listing *, .intlz-plugin-detail *, .intlz-site-header *, .intlz-site-footer *{ box-sizing: inherit; }

.intlz-container{
  max-width: var(--intlz-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.intlz-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.intlz-btn:hover{ transform: translateY(-2px); }
.intlz-btn-primary{
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(6,49,123,.35);
}
.intlz-btn-primary:hover{ filter: brightness(1.1); color:#fff; }
.intlz-btn-secondary{
  background: transparent;
  border-color: var(--intlz-navy);
  color: var(--intlz-navy);
}
.intlz-btn-secondary:hover{ background: var(--intlz-navy); color:#fff; }
.intlz-btn-secondary.on-dark{
  border-color: #fff;
  color:#fff;
}
.intlz-btn-secondary.on-dark:hover{ background:#fff; color: var(--intlz-navy); }
.intlz-btn-primary.on-dark{
  background: #fff;
  color: var(--intlz-navy);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.intlz-btn-primary.on-dark:hover{ filter:none; background: var(--intlz-blue-light); color: var(--intlz-navy); }

/* ==========================================================================
   1) LISTING PAGE
   ========================================================================== */
.intlz-plugins-listing{ padding-bottom: 72px; }

/* Dot-grid texture — the same decorative motif used behind "Engagement
   Models" / "Intellinez Insights" on the live site. */
.intlz-dot-grid{
  position: absolute;
  width: 220px;
  height: 180px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: .18;
}

/* Shared title banner for the Cart/Checkout/My Account/Confirmation/
   Receipt/Transaction Failed page family (see intlz_is_edd_account_page()
   in inc/edd-integration.php and template-page-elementor.php) — same navy
   gradient + white text + dot-grid treatment as the site's other Hero
   sections, so the whole purchase journey reads as one design instead of
   EDD's plain default page-title. Fixed, consistent height across every
   page in the family (no subheading/search/stats to make it grow). */
.intlz-account-banner{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%);
  padding: 48px 0;
  color: #fff;
  text-align: left;
}
.intlz-account-banner .intlz-dot-grid{ color: #fff; top: 20%; right: 4%; }
.intlz-account-banner h1{
  position: relative;
  z-index: 1;
  font-size: clamp(26px, 3.6vw, 36px);
  color: #fff;
  margin: 0;
}

.intlz-listing-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%);
  padding: 56px 0 48px;
  color: #fff;
  text-align: center;
}
.intlz-listing-hero .intlz-dot-grid{ color: #fff; top: 20px; right: 4%; }
.intlz-listing-hero .intlz-dot-grid.bottom-left{ top: auto; right: auto; bottom: 10px; left: 3%; }
.intlz-listing-hero-inner{ max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.intlz-listing-hero h1{
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
  margin: 0 0 14px;
}
.intlz-listing-hero-sub{
  color: rgba(255,255,255,.85);
  font-size: 17px;
  margin: 0 0 30px;
}

.intlz-hero-stats{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.intlz-stat-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}
.intlz-stat-chip svg{ width: 15px; height: 15px; color: var(--intlz-green); flex: none; }

.intlz-search{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 8px 6px 22px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.intlz-search svg{ width: 18px; height: 18px; color: var(--intlz-muted); flex: none; }
.intlz-search input{
  border: 0;
  outline: 0;
  flex: 1;
  font: 500 15px/1.4 var(--intlz-font);
  color: var(--intlz-text);
  background: transparent;
  padding: 10px 0;
}
.intlz-search input::placeholder{ color: #9aa3ab; }

.intlz-plugin-grid-wrap{ padding-top: 48px; padding-bottom: 48px; }
.intlz-search-empty{
  display: none;
  text-align: center;
  color: var(--intlz-muted);
  padding: 60px 20px;
  font-size: 16px;
}
.intlz-search-empty.is-visible{ display: block; }

/* Pagination */
.intlz-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.intlz-pagination-page,
.intlz-pagination-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--intlz-border);
  color: var(--intlz-navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: var(--intlz-surface);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.intlz-pagination-page:hover,
.intlz-pagination-arrow:hover{ background: var(--intlz-blue-light); border-color: var(--intlz-blue-light); }
.intlz-pagination-page.is-current{
  background: var(--intlz-navy);
  border-color: var(--intlz-navy);
  color: #fff;
  cursor: default;
}
.intlz-pagination-ellipsis{ color: var(--intlz-muted); padding: 0 4px; }

.intlz-plugin-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px){
  .intlz-plugin-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .intlz-plugin-grid{ grid-template-columns: 1fr; }
}

.intlz-plugin-card{
  position: relative;
  background: var(--intlz-surface);
  border: 1px solid var(--intlz-border);
  border-radius: var(--intlz-radius);
  overflow: hidden;
  box-shadow: var(--intlz-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.intlz-plugin-card:hover, .intlz-plugin-card:focus-within{
  box-shadow: var(--intlz-shadow-hover);
  transform: translateY(-3px);
}
.intlz-plugin-card:focus{ outline: 3px solid var(--intlz-blue); outline-offset: 2px; }

.intlz-card-thumb{
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--intlz-blue-light) center/cover no-repeat;
  display: block;
}

.intlz-card-body{
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.intlz-card-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.intlz-badge{
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--intlz-navy);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.4;
}
/* Badges rotate through the site's real accent colors instead of one blue,
   matching the mixed navy/green/orange used across intellinez.com. */
.intlz-badge.is-green{ background: var(--intlz-green); }
.intlz-badge.is-sky{ background: var(--intlz-sky); }
.intlz-badge.is-orange{ background: var(--intlz-orange); }

.intlz-card-body h3{
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--intlz-navy);
}
.intlz-card-body h3 a{
  color: inherit;
  text-decoration: none;
}
.intlz-card-tagline{
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--intlz-text);
}
.intlz-card-desc{
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--intlz-muted);
  flex: 1;
}

.intlz-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 2; /* sit above the card's whole-card click layer */
}
.intlz-card-actions .intlz-btn{
  padding: 10px 18px;
  font-size: 14px;
}

/* ==========================================================================
   2) DETAIL PAGE (and any other Elementor-built page — .intlz-elementor-page,
   set by template-page-elementor.php — shares this same section rhythm)
   ========================================================================== */
.intlz-plugin-detail section,
.intlz-elementor-page section{
  padding: 64px 0;
}
.intlz-plugin-detail h2,
:where(.intlz-elementor-page) h2{
  color: var(--intlz-navy);
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 0 0 18px;
}
.intlz-plugin-detail h3,
:where(.intlz-elementor-page) h3{
  color: var(--intlz-navy);
  font-size: 18px;
  margin: 0 0 8px;
}
/* Privacy Policy / Terms and Conditions: smaller in-content headings than
   the clamp(24-32px) default, since these are dense text pages rather than
   marketing sections. */
.intlz-legal-page h2{ font-size: 22px; }

/* Breadcrumb — one shared bar used identically on the listing page and
   every plugin detail page (same background, padding, colors). */
.intlz-breadcrumb-bar{ background: #fff; padding: 16px 0; }
.intlz-breadcrumb{
  font-size: 14px;
  color: var(--intlz-muted);
}
.intlz-breadcrumb a{ color: var(--intlz-sky); text-decoration: none; }
.intlz-breadcrumb a:hover{ text-decoration: underline; }
.intlz-breadcrumb .sep{ margin: 0 6px; color: var(--intlz-border); }
.intlz-breadcrumb .current{ color: var(--intlz-text); }

/* Hero — dark navy gradient with a dot-grid corner, matching how
   intellinez.com actually builds its product heroes (see the homepage's
   "AI-Based Learning Management System" banner: navy bg, white heading,
   green accent word, bulleted highlights, outlined secondary button). */
.intlz-hero{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%);
  padding: 56px 0;
  color: #fff;
}
.intlz-hero .intlz-dot-grid{ color: #fff; top: 6%; right: 4%; }
.intlz-hero .intlz-container{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px){
  .intlz-hero .intlz-container{ grid-template-columns: 1fr; }
  .intlz-hero-media{ order: -1; }
}
.intlz-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.intlz-hero-badges .intlz-badge{ border: 2px solid rgba(255,255,255,.55); }
.intlz-hero h1{
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 18px;
}
.intlz-hero-sub{
  font-size: 18px;
  color: rgba(255,255,255,.85);
  margin: 0 0 24px;
}
.intlz-hero-highlights{
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.intlz-hero-highlights li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}
.intlz-hero-highlights li::before{
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--intlz-green);
  flex: none;
}
.intlz-hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.intlz-hero-media{ position: relative; padding: 40px; }
.intlz-hero-media img{
  width: 100%;
  height: auto;
  /* !important: Elementor's own frontend.min.css ships ".elementor img{
     border-radius:0}" at the same specificity, loaded after this file,
     which wins the cascade tie and flattens the corners without it. */
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  display: block;
  border: 1px solid rgba(255,255,255,.15);
  animation: intlz-float 4s ease-in-out infinite;
}
@keyframes intlz-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce){
  .intlz-hero-media img{ animation: none; }
}
/* Transparent-cutout variant (Hero widget "Image Style" = Transparent):
   the PNG already has its own per-card shadows baked in, so the outer
   card frame (border/box-shadow/rounded corners) would just draw a visible
   rectangle around the transparent canvas — drop it and keep only the
   float animation. */
.intlz-hero-media.is-transparent img{
  border-radius: 0 !important;
  box-shadow: none;
  border: 0;
}

/* Intro */
.intlz-intro .intlz-container{
  max-width: 800px;
  text-align: center;
}
.intlz-intro p{ color: var(--intlz-text); font-size: 17px; }

/* Features */
.intlz-features{ background: var(--intlz-surface-alt); }
.intlz-features.is-white{ background: var(--intlz-surface); }
.intlz-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Column count is set per-section (Elementor "Columns" control) so it can
   match the actual item count — e.g. 4 items get 4 columns instead of
   wrapping to a lone card on its own row under a fixed 3-column grid. */
.intlz-feature-grid.intlz-cols-2{ grid-template-columns: repeat(2, 1fr); }
.intlz-feature-grid.intlz-cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){
  .intlz-feature-grid,
  .intlz-feature-grid.intlz-cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .intlz-feature-grid,
  .intlz-feature-grid.intlz-cols-2,
  .intlz-feature-grid.intlz-cols-4{ grid-template-columns: 1fr; }
}
.intlz-feature-card{
  background: var(--intlz-surface);
  border: 1px solid var(--intlz-border);
  border-radius: var(--intlz-radius);
  padding: 26px 24px;
}
.intlz-feature-icon{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(2, 163, 238, .2);
  color: var(--intlz-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
/* Elementor's icon SVGs ship with no fill attribute, so they render at the
   browser's default black instead of inheriting this wrapper's color —
   fill: currentColor is required, not optional, for every icon-picker widget. */
.intlz-feature-icon svg{ width: 24px; height: 24px; fill: currentColor; }
.intlz-feature-icon i{ font-size: 22px; line-height: 1; }
/* Rotates through the site's real accent colors (blue/green/orange) instead
   of tinting every feature card the same blue — each variant's background
   is that same accent color at ~20% opacity, so icon and tint always match. */
.intlz-feature-icon.is-green{ background: rgba(111, 195, 61, .2); color: var(--intlz-green); }
.intlz-feature-icon.is-orange{ background: rgba(241, 82, 27, .2); color: var(--intlz-orange); }
.intlz-feature-card p{ margin: 0; color: var(--intlz-muted); font-size: 14.5px; }

/* Installation */
.intlz-install .intlz-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px){
  .intlz-install .intlz-container{ grid-template-columns: 1fr; }
  .intlz-install-video{ order: -1; }
}
.intlz-video-frame{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--intlz-radius);
  overflow: hidden;
  background: var(--intlz-navy) center/cover no-repeat;
  box-shadow: var(--intlz-shadow);
}
.intlz-video-frame iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.intlz-video-placeholder{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: #fff;
  background: rgba(11,37,69,.55);
  text-align: center;
  padding: 20px;
  font: inherit;
}
.intlz-video-placeholder .play-dot{
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.intlz-video-placeholder .play-dot svg{ width: 22px; height: 22px; fill: var(--intlz-navy); margin-left: 3px; }
.intlz-video-placeholder small{ font-size: 13px; opacity: .85; }
/* When it's a clickable play facade rather than the static "coming soon" div */
button.intlz-video-placeholder{
  width: 100%; height: 100%;
  border: 0;
  cursor: pointer;
}
button.intlz-video-placeholder:hover .play-dot{ transform: scale(1.08); }

/* Video popup/lightbox — appended once to <body> by plugin-detail.js */
body.intlz-modal-open{ overflow: hidden; }
.intlz-video-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,20,40,.9);
  padding: 70px 24px 24px;
  align-items: center;
  justify-content: center;
}
.intlz-video-modal.is-open{ display: flex; }
.intlz-video-modal-inner{
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.intlz-video-modal-frame, .intlz-video-modal-frame iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.intlz-video-modal-close{
  position: absolute;
  top: 20px; right: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intlz-video-modal-close:hover{ background: #fff; color: var(--intlz-navy); }

.intlz-install-steps ol{
  margin: 0;
  padding-left: 22px;
}
.intlz-install-steps li{
  margin-bottom: 14px;
  color: var(--intlz-text);
}
.intlz-install-steps li:last-child{ margin-bottom: 0; }

/* Requirements strip */
.intlz-requirements{
  background: var(--intlz-blue-light);
  padding: 32px 0;
}
.intlz-requirements h2{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  color: var(--intlz-muted);
  margin-bottom: 18px;
}
.intlz-req-list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.intlz-req-list li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--intlz-navy);
  font-size: 14.5px;
}
.intlz-req-list svg{ width: 18px; height: 18px; color: var(--intlz-green); flex: none; }

/* FAQ */
.intlz-faq .intlz-container{ max-width: 800px; }
.intlz-faq-item{
  border-bottom: 1px solid var(--intlz-border);
}
.intlz-faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 4px;
  font-weight: 600;
  color: var(--intlz-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.intlz-faq-item summary::-webkit-details-marker{ display: none; }
.intlz-faq-item summary .chev{
  flex: none;
  width: 20px; height: 20px;
  transition: transform .2s ease;
  color: var(--intlz-sky);
}
.intlz-faq-item[open] summary .chev{ transform: rotate(180deg); }
.intlz-faq-item p{
  margin: 0 0 20px;
  padding: 0 4px;
  color: var(--intlz-muted);
}
.intlz-faq-item p a{ color: var(--intlz-sky); }

/* ==========================================================================
   SITE-WIDE PAGE SECTIONS (Homepage / About / Contact)
   ========================================================================== */

/* Shared centered heading + subheading, used by several widgets below. */
.intlz-section-heading{ max-width: 700px; margin: 0 auto 44px; text-align: center; }
.intlz-section-heading h2{ margin-bottom: 12px; }
.intlz-section-heading p{ color: var(--intlz-muted); font-size: 16px; margin: 0; }

/* Plugin Showcase (reuses .intlz-plugin-grid / .intlz-plugin-card as-is) */
.intlz-plugin-showcase{ background: var(--intlz-surface-alt); }
.intlz-plugin-showcase-cta{ text-align: center; margin-top: 40px; }

/* Team */
.intlz-team-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
@media (max-width: 960px){ .intlz-team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .intlz-team-grid{ grid-template-columns: 1fr; } }
.intlz-team-card{
  background: var(--intlz-surface);
  border: 1px solid var(--intlz-border);
  border-radius: var(--intlz-radius);
  padding: 28px 20px;
  text-align: center;
}
.intlz-team-photo{
  width: 96px; height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--intlz-shadow);
}
.intlz-team-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.intlz-team-card h3{ margin: 0 0 4px; font-size: 17px; }
.intlz-team-role{ margin: 0 0 10px; color: var(--intlz-sky); font-weight: 600; font-size: 13.5px; }
.intlz-team-bio{ margin: 0 0 14px; color: var(--intlz-muted); font-size: 14px; }
.intlz-team-social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--intlz-blue-light);
  color: var(--intlz-navy);
}
.intlz-team-social svg{ width: 16px; height: 16px; }

/* Stats / Counters band */
.intlz-stats-band{
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%);
  color: #fff;
}
.intlz-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 760px){ .intlz-stats-grid{ grid-template-columns: repeat(2, 1fr); } }
.intlz-stat-number{
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.intlz-stat-label{ margin-top: 6px; color: rgba(255,255,255,.8); font-size: 14.5px; font-weight: 600; }

/* Process steps */
.intlz-process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
@media (max-width: 960px){ .intlz-process-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .intlz-process-grid{ grid-template-columns: 1fr; } }
.intlz-process-step{ text-align: center; }
.intlz-process-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--intlz-navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.intlz-process-step h3{ margin: 0 0 8px; }
.intlz-process-step p{ margin: 0; color: var(--intlz-muted); font-size: 14.5px; }

/* Testimonials grid (homepage/about) */
.intlz-testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 960px){ .intlz-testimonials-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .intlz-testimonials-grid{ grid-template-columns: 1fr; } }
.intlz-testimonial-card{
  background: var(--intlz-surface);
  border: 1px solid var(--intlz-border);
  border-radius: var(--intlz-radius);
  padding: 26px 24px;
  box-shadow: var(--intlz-shadow);
  display: flex;
  flex-direction: column;
}
.intlz-testimonial-card blockquote{
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-style: italic;
  color: var(--intlz-text);
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
}
.intlz-testimonial-card-author{ display: flex; align-items: center; gap: 12px; }
.intlz-testimonial-card-photo{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.intlz-testimonial-card-author div{ display: flex; flex-direction: column; }
.intlz-testimonial-card .intlz-testimonial-name{ font-weight: 600; color: var(--intlz-navy); font-size: 14.5px; }
.intlz-testimonial-card .intlz-testimonial-role{ color: var(--intlz-muted); font-size: 13px; }

/* ==========================================================================
   PRICING (Easy Digital Downloads integration)
   ========================================================================== */
.intlz-price-badge{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.intlz-price-was{ text-decoration: line-through; color: var(--intlz-muted); font-size: 15px; }
.intlz-price-now{ font-size: 24px; font-weight: 700; color: var(--intlz-navy); }
.intlz-price-discount{
  background: var(--intlz-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.6;
}
.intlz-price-badge.on-dark .intlz-price-was{ color: rgba(255,255,255,.65); }
.intlz-price-badge.on-dark .intlz-price-now{ color: #fff; }
.intlz-card-body .intlz-price-badge{ margin: 0 0 14px; }

/* Reskin EDD's generated purchase form/button to the theme's .intlz-btn,
   overriding EDD's own bundled button CSS (loaded after ours). */
.intlz-edd-buy-btn{ display: inline-flex; }
.intlz-edd-buy-btn form.edd_download_purchase_form{ display: inline-block; margin: 0; }
/* Element-scoped to the real <button> only — EDD also renders a hidden
   no-JS <input> fallback and a hidden "Checkout" <a>, both sharing the
   same .edd-add-to-cart.intlz-btn classes; a bare class selector here
   would force those visible too since !important beats their own
   display:none rules. */
.intlz-edd-buy-btn button.edd-add-to-cart.intlz-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-family: var(--intlz-font) !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, var(--intlz-navy) 0%, var(--intlz-blue) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(6,49,123,.35) !important;
  transition: transform .15s ease, filter .15s ease !important;
  white-space: nowrap !important;
  line-height: normal !important;
  text-shadow: none !important;
}
.intlz-edd-buy-btn button.edd-add-to-cart.intlz-btn:hover{ transform: translateY(-2px); filter: brightness(1.1); }
.intlz-card-actions .intlz-edd-buy-btn button.edd-add-to-cart.intlz-btn{ padding: 10px 18px !important; font-size: 14px !important; }
.intlz-edd-buy-btn input.edd-add-to-cart,
.intlz-edd-buy-btn a.edd_go_to_checkout,
.intlz-edd-buy-btn .edd-cart-added-alert{ display: none !important; }

/* Gallery */
.intlz-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px){
  .intlz-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .intlz-gallery-grid{ grid-template-columns: 1fr; }
}
.intlz-gallery-item{
  border-radius: var(--intlz-radius);
  overflow: hidden;
  box-shadow: var(--intlz-shadow);
  border: 1px solid var(--intlz-border);
}
.intlz-gallery-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Additional Sections — Testimonial (Custom Text Block reuses .intlz-intro) */
.intlz-testimonial{ background: var(--intlz-surface-alt); text-align: center; }
.intlz-testimonial .intlz-container{ max-width: 800px; }
.intlz-testimonial-quote{
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-size: 20px;
  font-style: italic;
  color: var(--intlz-text);
  line-height: 1.6;
}
.intlz-testimonial-quote::before{ content: "\201C"; }
.intlz-testimonial-quote::after{ content: "\201D"; }
.intlz-testimonial-attribution{ margin: 0; font-size: 15px; }
.intlz-testimonial-name{ font-weight: 600; color: var(--intlz-navy); }
.intlz-testimonial-role{ color: var(--intlz-muted); }
.intlz-testimonial-name + .intlz-testimonial-role::before{
  content: "•";
  margin: 0 8px;
  color: var(--intlz-border);
}

/* About / final CTA band */
.intlz-cta-band{
  background: linear-gradient(135deg, var(--intlz-navy) 0%, #123a70 100%);
  color: #fff;
  text-align: center;
}
.intlz-cta-band .intlz-container{ max-width: 760px; }
.intlz-cta-band h2{ color: #fff; }
.intlz-cta-band p{ color: rgba(255,255,255,.85); font-size: 17px; margin-bottom: 30px; }
.intlz-cta-actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
/* Price badge always gets its own full-width row above the action buttons
   (Buy Now / Visit Support Forum), instead of the offer and the buttons
   competing for space on one line and wrapping unpredictably. */
.intlz-cta-actions .intlz-price-badge{ flex-basis: 100%; justify-content: center; }

/* ==========================================================================
   ELEMENTOR INTEGRATION
   Plugin detail pages are edited with Elementor (each captured section is
   an HTML widget inside a default Elementor section/column). Elementor's
   own structural boxes add their own padding and a boxed max-width — this
   neutralizes that so the original .intlz-* spacing/widths (unchanged)
   remain the only source of layout, while Elementor's editor chrome
   (drag handles, add-section controls) keeps working normally.
   ========================================================================== */
/* !important is required here: Elementor's own generated CSS (its base
   frontend stylesheet plus a per-page dynamic stylesheet) is enqueued after
   the theme's styles and carries equal-or-higher specificity, so it wins
   the cascade on these properties without it. */
.intlz-plugin-detail .elementor-section,
.intlz-elementor-page .elementor-section{ padding: 0 !important; margin: 0 !important; }
.intlz-plugin-detail .elementor-container,
.intlz-elementor-page .elementor-container{ max-width: none !important; margin: 0 !important; padding: 0 !important; }
.intlz-plugin-detail .elementor-column,
.intlz-elementor-page .elementor-column{ padding: 0 !important; width: 100% !important; }
.intlz-plugin-detail .elementor-widget-wrap,
.intlz-elementor-page .elementor-widget-wrap{ padding: 0 !important; }
.intlz-plugin-detail .elementor-widget-html,
.intlz-elementor-page .elementor-widget-html{ margin: 0 !important; }

/* Section divider — a subtle hairline for the light-background content
   sections (Text Block, Features/Team/Testimonials-grid, FAQ, Process,
   Plugin Showcase, Contact Info, Install, Requirements). These sections
   don't have a border of their own, so when two of them land back-to-back
   with the same background (e.g. the About page's "Who We Are" and "Our
   Story" text blocks, both white) they visually merge into one section.
   The hero/listing-hero/stats-band/cta-band widgets keep their own navy
   backgrounds and are deliberately excluded — the color change alone is
   already a clear boundary there. */
.intlz-custom-text,
.intlz-features,
.intlz-faq,
.intlz-testimonial,
.intlz-plugin-showcase,
.intlz-process,
.intlz-contact-info,
.intlz-install,
.intlz-requirements{
  border-top: 1px solid var(--intlz-border);
}

/* Contact Info widget (Contact Us page) */
.intlz-contact-info{ text-align: center; }
.intlz-contact-intro{
  max-width: 640px;
  margin: 0 auto 36px;
  color: var(--intlz-muted);
  font-size: 16px;
}
.intlz-contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
  margin-bottom: 32px;
}
@media (max-width: 860px){ .intlz-contact-grid{ grid-template-columns: 1fr; } }
.intlz-contact-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--intlz-surface);
  border: 1px solid var(--intlz-border);
  border-radius: var(--intlz-radius);
  padding: 22px;
  box-shadow: var(--intlz-shadow);
}
.intlz-contact-icon{
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(2, 163, 238, .2);
  color: var(--intlz-sky);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intlz-contact-icon svg{ width: 22px; height: 22px; fill: currentColor; }
.intlz-contact-icon i{ font-size: 20px; line-height: 1; }
.intlz-contact-item-body h3{ margin: 0 0 4px; font-size: 15.5px; color: var(--intlz-navy); }
.intlz-contact-item-body p,
.intlz-contact-item-body a{
  margin: 0;
  color: var(--intlz-muted);
  font-size: 14.5px;
  line-height: 1.5;
  text-decoration: none;
}
.intlz-contact-item-body a:hover{ color: var(--intlz-sky); text-decoration: underline; }
.intlz-social-links{
  display: flex;
  justify-content: center;
  gap: 12px;
}
.intlz-social-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--intlz-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}
.intlz-social-btn svg{ width: 18px; height: 18px; fill: currentColor; }
.intlz-social-btn i{ font-size: 16px; }
.intlz-social-btn:hover{ background: var(--intlz-green); transform: translateY(-2px); }

/* The WPForms section (Contact Us page) sits on its own light-gray band,
   but that band inherited the blanket zero-padding reset meant for
   full-bleed Elementor sections, so the form card had no breathing room
   above/below it. .intlz-form-section is a css_classes marker set on that
   specific Elementor section (Advanced tab) to opt back into normal
   section padding — needs !important + 3 classes of specificity to beat
   the .elementor-section{padding:0 !important} reset above. */
.intlz-elementor-page .elementor-section.intlz-form-section{
  padding: 64px 24px !important;
}

/* Map embed (native Elementor Google Maps widget) — full viewport width,
   edge to edge like the Hero/Stats/CTA bands, not boxed to the 1300px
   content width. No rounded corners/shadow here on purpose: those read as
   an intentional "card" at a fixed width, which fights a full-bleed edge.
   The surface-alt fill is a placeholder background so the block still
   looks intentional while the external Google Maps iframe is loading. */
.intlz-map-section .elementor-widget-google_maps{
  overflow: hidden;
  background: var(--intlz-surface-alt);
}
.intlz-map-section .elementor-custom-embed{ background: var(--intlz-surface-alt); }
.intlz-map-section iframe{
  display: block;
  width: 100% !important;
  border: 0;
  min-height: 420px;
}

/* ==========================================================================
   SITE HEADER / FOOTER
   Styles the real theme header.php / footer.php (logo mark, nav, "Partner
   With Us" CTA, 4-column dark footer, copyright bar) — rendered via
   get_header() / get_footer() on every page.
   ========================================================================== */
.intlz-container-wide{ max-width: var(--intlz-max); margin: 0 auto; padding: 0 24px; }

.intlz-site-logo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  color: #58595b;
}
.intlz-site-logo img{ height: 32px; width: auto; display: block; }
.intlz-site-logo.on-dark{ color: #fff; }

/* ---- Header ---- */
.intlz-site-header{
  background: #fff;
  border-bottom: 1px solid #eef1f4;
  position: sticky;
  top: 0;
  z-index: 100;
}
.intlz-site-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
}
.intlz-site-nav{ flex: 1; display: flex; justify-content: center; }
.intlz-site-nav ul{
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 15px;
  font-weight: 500;
}
.intlz-site-nav a{
  color: var(--intlz-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.intlz-site-nav a:hover{ color: var(--intlz-navy); }
.intlz-site-nav .current-menu-item > a,
.intlz-site-nav .current_page_item > a{
  color: var(--intlz-navy);
  font-weight: 700;
  position: relative;
}
.intlz-site-nav .current-menu-item > a::after,
.intlz-site-nav .current_page_item > a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--intlz-sky);
}
.intlz-site-nav .caret{ width: 9px; height: 9px; opacity: .6; transition: transform .15s ease; }
.intlz-site-header-cta{ padding: 12px 24px; font-size: 14px; flex: none; }
.intlz-site-header-toggle{ display: none; }

/* Dropdown submenu (desktop) — e.g. My Account > Confirmation/Receipt/
   Transaction Failed/Checkout. Opens on hover or keyboard focus; the
   :focus-within fallback keeps it reachable via Tab, not just a mouse. */
@media (min-width: 1081px){
  .intlz-site-nav li.menu-item-has-children{ position: relative; }
  .intlz-site-nav .sub-menu{
    display: flex;
    flex-direction: column;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 210px;
    background: var(--intlz-surface);
    border: 1px solid var(--intlz-border);
    border-radius: var(--intlz-radius);
    box-shadow: var(--intlz-shadow-hover);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 110;
  }
  .intlz-site-nav li.menu-item-has-children:hover > .sub-menu,
  .intlz-site-nav li.menu-item-has-children:focus-within > .sub-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .intlz-site-nav li.menu-item-has-children:hover > a .caret,
  .intlz-site-nav li.menu-item-has-children:focus-within > a .caret{ transform: rotate(180deg); }
  .intlz-site-nav .sub-menu li{ width: 100%; }
  .intlz-site-nav .sub-menu a{
    display: block;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--intlz-radius-sm);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }
  .intlz-site-nav .sub-menu a:hover{ background: var(--intlz-surface-alt); color: var(--intlz-navy); }
  .intlz-site-nav .sub-menu .current-menu-item > a,
  .intlz-site-nav .sub-menu .current_page_item > a{
    background: var(--intlz-blue-light);
    color: var(--intlz-navy);
    font-weight: 700;
  }
  .intlz-site-nav .sub-menu .current-menu-item > a::after,
  .intlz-site-nav .sub-menu .current_page_item > a::after{ content: none; }
}

@media (max-width: 1080px){
  .intlz-site-nav{ display: none; }
  .intlz-site-nav.is-open{
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--intlz-border);
    box-shadow: var(--intlz-shadow);
    padding: 12px 24px;
  }
  .intlz-site-nav.is-open ul{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .intlz-site-header-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--intlz-border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
  }
  .intlz-site-header-inner{ position: relative; }

  /* Submenu (My Account > Confirmation/Receipt/Transaction Failed/Checkout,
     etc.) is always expanded on mobile/tablet — no tap-to-open step, the
     child links are simply listed under the parent. The caret toggle is
     desktop-only, so it's hidden here. */
  .intlz-site-nav .sub-menu{
    display: flex;
    flex-direction: column;
    gap: 0px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
  }
  .intlz-site-nav .sub-menu li{ margin-top: 10px; }
  .intlz-site-nav .sub-menu a{
    font-size: 14px;
    font-weight: 500;
    color: var(--intlz-muted);
    padding-left: 14px;
  }
  .intlz-site-nav .sub-menu .current-menu-item > a,
  .intlz-site-nav .sub-menu .current_page_item > a{ color: var(--intlz-navy); }
  .intlz-site-nav .caret{ display: none; }
}

/* ---- Footer ---- */
.intlz-site-footer{ background: var(--intlz-footer-bg); color: var(--intlz-footer-text); }
.intlz-footer-top{ padding: 56px 0 40px; }
.intlz-footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px){
  .intlz-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .intlz-footer-grid{ grid-template-columns: 1fr; }
}
.intlz-footer-brand .intlz-site-logo{ margin-bottom: 16px; }
.intlz-footer-social{ display: flex; gap: 10px; }
.intlz-footer-social a{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--intlz-navy);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.intlz-footer-social svg{ width: 16px; height: 16px; }
.intlz-site-footer h4{
  color: #fff;
  font-size: 16px;
  margin: 0 0 16px;
}
.intlz-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.intlz-footer-col li{ margin-bottom: 12px; }
.intlz-footer-col a{
  color: var(--intlz-footer-text);
  text-decoration: none;
  font-size: 14.5px;
}
.intlz-footer-col a:hover{ color: #fff; }
.intlz-footer-col .current-menu-item > a,
.intlz-footer-col .current_page_item > a{
  color: #fff;
  font-weight: 700;
}
.intlz-footer-contact-heading{
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 0 14px;
}
.intlz-footer-contact-list{ list-style: none; margin: 0 0 22px; padding: 0; }
.intlz-footer-contact-list li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}
.intlz-footer-contact-list svg{ width: 15px; height: 15px; flex: none; margin-top: 3px; color: #9aa3ab; }
.intlz-footer-bottom{
  background: #fff;
  color: #666;
  text-align: center;
  font-size: 13.5px;
  padding: 16px 0;
}
.intlz-footer-bottom a{ color: var(--intlz-blue); text-decoration: none; }

/* Custom Logo (Appearance > Customize > Site Identity), sized to match the
   bundled fallback icon logo. */
.intlz-site-logo-custom{ display: inline-flex; align-items: center; }
.intlz-site-logo-custom .custom-logo-link{ display: inline-flex; align-items: center; }
.intlz-site-logo-custom img.custom-logo{ height: 32px; width: auto; display: block; }

/* Footer logo: a dedicated white/light-on-transparent asset (set via the
   intlz_footer_logo_id theme_mod, see footer.php), so it needs no background
   chip or extra padding — it's already made for a dark background. */
.intlz-site-logo-footer{ display: inline-flex; align-items: center; }
.intlz-footer-logo-img{ height: 28px; width: auto; display: block; }

/* ==========================================================================
   ON-SCROLL REVEAL ANIMATIONS
   Progressive enhancement, driven by assets/js/scroll-reveal.js. The hidden
   state only exists when both conditions hold:
     1) .intlz-js is on <html> — set by a tiny inline script in header.php
        that runs before first paint. If JS is disabled, that class never
        appears, so every target below stays at its normal opacity/position
        instead of vanishing forever with no script to reveal it.
     2) prefers-reduced-motion is "no-preference" — users who asked their
        OS for reduced motion never see the opacity:0 starting state at all,
        so nothing moves for them; not even a JS check is needed for that.
   scroll-reveal.js adds .intlz-in-view once per element (IntersectionObserver,
   unobserved after first trigger) to animate to the visible state, and
   staggers grid children via a small inline transition-delay.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .intlz-js .intlz-reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .intlz-js .intlz-reveal.intlz-reveal-scale{
    transform: translateY(16px) scale(.96);
  }
  .intlz-js .intlz-reveal.intlz-in-view{
    opacity: 1;
    transform: none;
  }
}