/* ===========================================================================
   25H — article UI: featured-image hero (carousel) + floating actions + AI summary.
   Loaded only on single posts.
   =========================================================================== */

/* Search: hidden on mobile (full-bleed hero there), shown next to the desktop logo. */
.h25-sc-search { display: none !important; }
@media (min-width: 1000px) { .h25-sc-search { display: block !important; } }

/* ---- Hero / carousel ---- */
/* Full-bleed (edge-to-edge), no corners, with a soft fade-out at the bottom. */
.h25-hero {
  position: relative;
  z-index: 1; /* sit above the header it is pulled over (the floating controls use a higher z-index) */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
}
.h25-carousel {
  overflow: hidden;
  border-radius: 0;
  direction: ltr;
  background: #e9e9e9;
}
/* soft fade from the image into the page background */
.h25-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
html.dark-mode .h25-hero::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); }

/* desktop: natural page order — logo, badge, title, date, image, content. The
   image sits inline (no longer pulled to the top / no covering header band); the
   page's real header (with its own logo) is hidden in favour of our own logo row. */
@media (min-width: 1000px) {
  body.single header.wp-block-template-part { display: none; }
  .h25-hero {
    width: 100%;
    max-width: 800px;
    left: auto; right: auto;
    margin-left: auto;
    margin-right: auto;
  }
  /* rounded image, no fade (the base ::after bottom fade is mobile-only) */
  .h25-hero::after { display: none; }
  .h25-carousel { border-radius: 35px; }
  /* no crop on desktop — the image renders at its own natural aspect ratio
     instead of being cover-cropped into a fixed box */
  .h25-slide { aspect-ratio: auto; overflow: visible; }
  .h25-slide img { height: auto; object-fit: unset; }
  /* action buttons: tucked near the image's top-left corner */
  .h25-hero .h25-actions { top: 24px; left: 28px; }
  /* badge now precedes the image (after the logo, before the title) — normal
     spacing, no overlap, with extra room below the logo */
  body.single .category-button-wrapper { margin-top: 56px !important; }
  /* search + toggle align vertically with the logo */
  .h25-sc { top: 81px !important; }
  /* desktop only: a larger category badge and a slightly larger date line */
  body.single .category-button { font-size: 15px !important; padding: 7px 24px !important; }
  body.single .wp-block-post-date,
  body.single .wp-block-post-date time { font-size: 0.9rem !important; letter-spacing: 0; }
  /* pull the date closer to the title (the business template adds its own
     padding-top on top of the title's bottom margin) */
  body.single .wp-block-post-date { padding-top: 0 !important; margin-top: -6px !important; }
  /* the AI Summary toggle auto-scrolls here (see article-ui.js) — keep it clear
     of the sticky reading bar */
  .wp-block-post-content, .h25-ai-summary { scroll-margin-top: 90px; }
}

/* mobile + tablet: keep the theme toggle at the top-right, aligned with the like
   button (overrides the JS logo-alignment, which sits too low without the band) */
@media (max-width: 999px) { .h25-sc { top: 51px !important; } }
@media (max-width: 600px) { .h25-sc { top: 45px !important; } }

/* ---- Hero brand logo (desktop only) ----
   Sits in normal flow as the first element on the page, replacing the page's real
   header logo (hidden above). The 32px extra top margin (on top of the page's own
   1.5rem/24px root padding) reproduces the same ~81px vertical center the search +
   toggle (.h25-sc, see below) already expect, so they don't need retuning. */
.h25-hero-logo {
  display: none; /* desktop only */
  width: 115px;
  margin: 32px auto 0;
}
.h25-hero-logo img {
  width: 115px;
  height: 51px; /* keeps the wordmark ratio; object-fit crops the PNG's square padding */
  object-fit: cover;
  display: block;
  filter: brightness(0); /* white PNG → black on the light page */
}
/* homepage-style: black on the light page, white on the dark page */
html.dark-mode .h25-hero-logo img { filter: none; }
@media (min-width: 1000px) { .h25-hero-logo { display: block; } }

/* Pull the category badge up so it overlaps the hero's bottom fade — reclaims the
   gap and makes room for the elements below. z-index keeps it above the image. */
.category-button-wrapper {
  position: relative;
  z-index: 2;
  margin-top: -44px !important;
}

/* smaller category badge (~20%) */
.category-button {
  font-size: 13px !important;
  padding: 5px 19px !important;
}

/* smaller article title — closer to the app */
.wp-block-post-title {
  font-size: clamp(1.55rem, 6vw, 1.95rem) !important;
  line-height: 1.3 !important;
}

/* smaller date / time line */
.wp-block-post-date,
.wp-block-post-date time { font-size: 0.8rem !important; }

/* small, consistent gap between the date and the body (≈ the title→date spacing) */
.wp-block-post-content { margin-top: 1rem !important; }
/* the body is display:flow-root, so its first paragraph's own top margin adds to the
   gap; zero it so the body text starts at the same point as the AI summary. */
.wp-block-post-content > :first-child { margin-top: 0 !important; }

/* date line greyed in dark mode */
html.dark-mode .wp-block-post-date,
html.dark-mode .wp-block-post-date time { color: #9a9a9a !important; }
.h25-slides {
  display: flex;
  transition: transform .35s ease;
}
.h25-slide {
  flex: 0 0 100%;
  /* mobile/tablet: cropped to a consistent, taller-than-wide box (portrait photos
     keep more of their height than a 16:9 crop would leave) */
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.h25-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* photo is naturally shorter than the 4:5 cap — render it uncropped at its own ratio */
.h25-slide.h25-natural { aspect-ratio: auto; overflow: visible; }
.h25-slide.h25-natural img { height: auto; object-fit: unset; }
html.dark-mode .h25-carousel { background: #161616; }

/* pagination dots */
.h25-dots {
  position: absolute;
  bottom: 100px; /* above the bottom fade */
  left: 0; right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 3;
}
.h25-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.h25-dot.active { width: 18px; border-radius: 4px; background: #fff; }

/* ---- Floating action buttons ---- */
.h25-actions {
  position: absolute;
  top: 28px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
  transition: opacity .4s ease;
}
/* auto-hidden after 10s idle, so the image reads more clearly; any touch/move/scroll
   near the hero brings them back (see article-ui.js). The dark-mode toggle/search
   (.h25-sc, defined in single-chrome.css) hides on the same timer. */
.h25-actions.h25-hide { opacity: 0; pointer-events: none; }
.h25-act {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(255, 255, 255, .75);
  color: #111;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .25s ease, color .25s ease;
}
.h25-act:hover { transform: translateY(-1px); }
.h25-act svg { width: 22px; height: 22px; display: block; }
.h25-act:focus-visible { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 3px; }

/* dark mode: dark circle, white icon */
html.dark-mode .h25-act { background: rgba(20, 20, 20, .82); color: #fff; }
html.dark-mode .h25-act:focus-visible { outline-color: rgba(255, 255, 255, .45); }

/* like state + count: outline by default, fills red once liked (same path, just
   toggling fill/stroke — no separate icon markup needed) */
.h25-like.liked svg { fill: #ff2d55; stroke: #ff2d55; }
.h25-like.pop { animation: h25-pop .4s ease; }
@keyframes h25-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* like button: heart centered. Once the count is revealed, the heart shrinks up
   and the number appears below it — both inside the circle. */
.h25-like { flex-direction: column; gap: 1px; }
.h25-like svg {
  width: 19px !important; height: 19px !important;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: width .2s ease, height .2s ease, fill .2s ease, stroke .2s ease;
}
.h25-like.revealed svg { width: 16px !important; height: 16px !important; }
.h25-like-count {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #111;
  pointer-events: none;
}
html.dark-mode .h25-like-count { color: #fff; }

/* share "link copied" feedback */
.h25-share.copied::after {
  content: "تم نسخ الرابط";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-family: var(--wp--preset--font-family--ibm-plex-sans-arabic, "IBM Plex Sans Arabic", sans-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 13px;
  pointer-events: none;
}

/* AI button — matches the homepage's animated sparkle gradient when active */
.h25-ai { position: relative; overflow: hidden; }
.h25-ai::before {
  content: "";
  position: absolute;
  inset: -2px; /* cover the button's edge so no background ring shows (clipped by overflow) */
  border-radius: 50%;
  background-image: linear-gradient(135deg, #a05fd0 0%, #6b78e0 35%, #33a0e8 70%, #a05fd0 100%);
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}
.h25-ai.active::before { opacity: 1; animation: aiSparkleWave 3.2s ease-in-out infinite; }
.h25-ai svg { position: relative; z-index: 1; }
.h25-ai.active svg { fill: #fff !important; color: #fff !important; }
@keyframes aiSparkleWave {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ---- AI summary panel ---- */
.h25-ai-summary {
  display: none;
  margin-top: 1rem; /* match .wp-block-post-content's top gap so the toggle lands in place */
  /* match the article body's side spacing (the body uses .has-global-padding) */
  padding-left: var(--wp--style--root--padding-left, 1.25rem);
  padding-right: var(--wp--style--root--padding-right, 1.25rem);
}
/* the business-info box (#business-info-snippet, from [business_info_box]) sits
   outside <main>, right after it — not a sibling of the panel — so it needs its own
   top margin when the AI summary is open, rather than relying on margin-collapsing. */
body.h25-ai-open #business-info-snippet { margin-top: 1.5rem !important; }
/* font-size + line-height are copied from the article body in JS so they match;
   max-width matches the constrained body text so it doesn't run full-width on desktop. */
.h25-ai-text {
  color: #333;
  margin: 0 auto;
  max-width: var(--wp--style--global--content-size, 800px);
}
html.dark-mode .h25-ai-text { color: #e0e0e0; }

@media (max-width: 600px) {
  .h25-actions { top: 24px; left: 12px; gap: 10px; }
  .h25-act { width: 42px; height: 42px; }
  .h25-act svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .h25-slides, .h25-ai::before, .h25-ai-summary.show, .h25-act, .h25-actions { animation: none !important; transition: none !important; }
}