/* ============================================================
   Ananyoo demo footer — child theme styles
   Styles the native-block footer in ariade-child/parts/footer.html.
   Reuses the parent theme tokens (--ink, --muted, --display …) and is
   enqueued AFTER the parent theme.css so these rules win.
   ============================================================ */

/* ---- Bands ---------------------------------------------------------- */
.site-footer.on-dark{background:transparent}
.site-footer .footer-body{background:var(--ink,#0E1B36);color:#fff;
  padding:clamp(4.5rem,7vw,6rem) 0 clamp(1.5rem,3vw,2.5rem)}

/* ---- Contact CTA card ---------------------------------------------- */
.site-footer .footer-cta.ariade-cta{
  background:linear-gradient(100deg,#2743d0,#7a2fd6 55%,#c02582);
  border-radius:18px;max-width:1360px;width:calc(100% - 2rem);
  margin:clamp(1.5rem,3vw,2.5rem) auto -3rem;position:relative;z-index:2;
  color:#fff;box-shadow:0 24px 48px -20px rgba(122,47,214,.55);overflow:hidden}
/* CTA layout as CSS grid: the text cell sizes the row, the art cell always
   stretches to that same height (grid default), so the photo cell can never
   collapse. Grid overrides the block's default flex columns. */
.ariade-cta-in.wp-block-columns{margin:0;display:grid;grid-template-columns:1.78fr 1fr;
  align-items:stretch;min-height:220px}
.ariade-cta-in.wp-block-columns > .wp-block-column{flex-basis:auto;width:auto;margin:0}
.ariade-cta-text{padding:1.9rem clamp(1.6rem,3vw,2.6rem);display:flex;
  flex-direction:column;justify-content:center;gap:.85rem}
/* Bigger, bolder CTA type. */
.ariade-cta-text h2,.ariade-cta-text .wp-block-heading{font-family:var(--display);
  font-weight:700;color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;
  letter-spacing:0;text-transform:none;margin:0}
.ariade-cta-text p{color:rgba(255,255,255,.95);font-size:clamp(1.05rem,1.4vw,1.2rem);
  line-height:1.55;max-width:none;margin:0}
.ariade-cta-btn{margin-top:.4rem}
.ariade-cta-btn .wp-block-button__link{background:#fff;color:#3c1d7a;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1rem;border-radius:12px;padding:1rem 2.1rem}
.ariade-cta-btn .wp-block-button__link:hover{background:#f0eaff}
/* Art: the image is absolutely positioned so it fills the TEXT-driven card
   height without dictating it. The card ends at the text and the photo is
   cover-cropped around the waist — matching the intended card bounds. */
.ariade-cta-art{padding:0;overflow:hidden;position:relative;min-height:100%}
.ariade-cta-img{margin:0;position:absolute;inset:0;width:100%;height:100%}
/* Source PNG has a light-gray background — fade its left edge into the gradient.
   object-position Y controls the vertical crop: raise the % to pull the face up. */
.ariade-cta-img img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:50% 10%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);
  mask-image:linear-gradient(to right,transparent 0,#000 22%)}

/* ---- Columns row --------------------------------------------------- */
.footer-cols.wp-block-columns{flex-wrap:wrap;align-items:flex-start}
.footer-cols > .wp-block-column{min-width:200px}
.footer-brand{min-width:240px}
.site-footer a{font-weight:500}

.footer-logo-img{margin:0}
.footer-logo-img img{height:auto;max-width:210px}
.footer-tag{color:var(--muted,#B8C9EA);font-size:.9rem;line-height:1.6;
  max-width:38ch;margin:0;font-style:italic}

/* ---- Contact rows (icon image + text) ------------------------------ */
.footer-crow{align-items:center}
.footer-crow.is-layout-flex{flex-wrap:nowrap;gap:.75rem;align-items:center}
/* Zero the wp-block-image default bottom margin on the icon (higher specificity
   than .wp-block-image) so the icon and text sit on the same centre line. */
.footer-crow > .footer-ic{align-self:center;margin:0}
.footer-crow figure.footer-ic{margin:0}
.footer-crow > .footer-cval{align-self:center;margin:0}
/* v4 icon treatment: fuchsia glyph in a fuchsia-tinted rounded box, no border.
   Box padded so the glyph never touches the edges. */
.footer-ic{flex:0 0 auto;width:38px;height:38px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:10px;
  background:rgba(226,63,176,.15);margin:0;padding:9px}
.footer-ic img{width:100%;height:100%;display:block;object-fit:contain}
.footer-cval{margin:0;color:var(--muted,#B8C9EA);font-size:.92rem;line-height:1.45}
.footer-cval a{color:var(--muted,#B8C9EA);text-decoration:none}
.footer-cval a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- Link columns -------------------------------------------------- */
.footer-col h3,.footer-col .wp-block-heading{font-family:var(--display);
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:#fff;margin:0 0 1.2rem}
.footer-links{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.6rem}
.footer-links li{margin:0}
.footer-links a{color:var(--muted,#B8C9EA);text-decoration:none;font-size:.95rem}
.footer-links a:hover{color:#fff;text-decoration:underline;
  text-decoration-color:#7FB0FF;text-underline-offset:3px}

/* ---- Bottom bar ---------------------------------------------------- */
.site-footer .footer-bottom{border-top:1px solid rgba(127,176,255,.18);
  padding-block:1.5rem;margin-top:clamp(2rem,4vw,3rem);
  font-size:.88rem;color:var(--muted,#B8C9EA)}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--muted,#B8C9EA);text-decoration:none}
.footer-bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-aa strong{color:#fff}

/* ---- Screen-reader-only (in case parent lacks it) ------------------ */
.footer-contact .screen-reader-text{position:absolute!important;width:1px;
  height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:900px){
  .footer-cols > .wp-block-column{flex-basis:calc(50% - 1.25rem)!important}
  .footer-brand{flex-basis:100%!important}
}
@media (max-width:781px){
  .ariade-cta-in.wp-block-columns{grid-template-columns:1fr}
  .ariade-cta-art{min-height:240px}
  .ariade-cta-img img{-webkit-mask-image:none;mask-image:none;object-position:50% 8%}
  .site-footer .footer-cta.ariade-cta{margin-bottom:-2rem}
}
@media (max-width:600px){
  .footer-cols > .wp-block-column{flex-basis:100%!important}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   Page-hero background pattern (Ananyoo) — replaces the parent
   theme's wavy SVG on the .ariade-page-hero band. Loaded after
   theme.css, so this wins.
   ============================================================ */
.ariade-page-hero::before{
  background-image:url("/wp-content/themes/ariade-child/assets/images/ananyoo-hero-pattern.webp");
  background-repeat:repeat;
  background-position:center top;
  background-size:200px 200px;
}

/* ============================================================
   Services / Products landing pages (.anl-*)
   Direction C — rich tinted cards (gradient icon tile + corner
   glow + depth + hover lift) and a brand-gradient section banner.
   ============================================================ */
.anl-lead{font-size:1.2rem;line-height:1.6;max-width:62ch;margin-inline:auto;color:var(--body,#2B3B57)}

/* ---- Section-intro banner (Banner 1 — brand gradient) -------------- */
.anl-banner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  position:relative;overflow:hidden;border-radius:20px;padding:1.7rem 1.9rem;color:#fff;
  background:linear-gradient(100deg,#2743d0,#7a2fd6 55%,#c02582);
  box-shadow:0 20px 44px -24px rgba(122,47,214,.6)}
.anl-banner > *{margin:0;position:relative;z-index:1}
.anl-banner::after{content:"";position:absolute;top:-60px;right:-30px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.anl-banner-txt{flex:1 1 320px}
.anl-banner-txt h2,.anl-banner-txt .wp-block-heading{color:#fff;margin:0;
  font-size:clamp(1.35rem,2.4vw,1.6rem);line-height:1.2}
.anl-banner-txt p{color:rgba(255,255,255,.92);margin:.4rem 0 0;font-size:1rem;max-width:60ch}
/* Links inside the gradient banner: white + underline so they stay visible and
   are distinguishable without relying on colour alone (WCAG 1.4.1). */
.anl-banner-txt a{color:#fff;font-weight:700;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.75)}
.anl-banner-txt a:hover,.anl-banner-txt a:focus{color:#fff;text-decoration-color:#fff}
.anl-banner-cta{margin:0;flex:0 0 auto}
.anl-banner-cta .wp-block-button__link{background:#fff;color:#3c1d7a;font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;
  border-radius:999px;padding:.75rem 1.5rem}
.anl-banner-cta .wp-block-button__link:hover{background:#f0eaff}

/* ---- Cards (Direction C) ------------------------------------------- */
.anl-cards{align-items:stretch}
.anl-cards .anl-card{position:relative;overflow:hidden;border:1px solid;border-radius:20px;
  padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;
  --a:#6D28D9;background:#f3f0fd;border-color:#e5ddfb;
  --grad:linear-gradient(135deg,#8b5cf6,#6D28D9);--sh:rgba(109,40,217,.5);--glow:rgba(109,40,217,.16);
  box-shadow:0 16px 38px -26px rgba(14,27,54,.32);transition:transform .18s ease,box-shadow .18s ease}
.anl-cards .anl-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -26px rgba(14,27,54,.42)}
.anl-card::after{content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0,transparent 70%);pointer-events:none}
.anl-card > *{position:relative;z-index:1}
.anl-card.anl-violet {--a:#6D28D9;background:#f3f0fd;border-color:#e5ddfb;--grad:linear-gradient(135deg,#8b5cf6,#6D28D9);--sh:rgba(109,40,217,.5);--glow:rgba(109,40,217,.16)}
.anl-card.anl-fuchsia{--a:#BE185D;background:#fdf0f6;border-color:#f7d9e7;--grad:linear-gradient(135deg,#ec4899,#BE185D);--sh:rgba(190,24,93,.5);--glow:rgba(190,24,93,.16)}
.anl-card.anl-blue   {--a:#2743d0;background:#eef1fd;border-color:#d8e0fb;--grad:linear-gradient(135deg,#5a76ea,#2743d0);--sh:rgba(39,67,208,.5);--glow:rgba(39,67,208,.16)}
.anl-card.anl-teal   {--a:#0e7c6b;background:#eaf6f2;border-color:#cfe9e0;--grad:linear-gradient(135deg,#14b8a6,#0e7c6b);--sh:rgba(14,124,107,.5);--glow:rgba(14,124,107,.16)}
.anl-card.anl-pink   {--a:#db2777;background:#fdeff6;border-color:#f7d6e8;--grad:linear-gradient(135deg,#f472b6,#db2777);--sh:rgba(219,39,119,.5);--glow:rgba(219,39,119,.16)}
.anl-card.anl-amber  {--a:#9a5500;background:#fbf4ea;border-color:#f0e3cd;--grad:linear-gradient(135deg,#d98324,#9a5500);--sh:rgba(154,85,0,.5);--glow:rgba(154,85,0,.16)}
.anl-card .anl-badge{width:54px;height:54px;border-radius:16px;background:var(--grad);margin:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px var(--sh)}
.anl-card .anl-badge img{width:26px;height:26px;display:block;filter:brightness(0) invert(1)}
.anl-card h3{margin:0;font-size:1.14rem;line-height:1.2;color:var(--ink,#0E1B36)}
.anl-card h3 a{color:var(--ink,#0E1B36);text-decoration:none}
.anl-card h3 a:hover{color:var(--a);text-decoration:underline}
.anl-card p{margin:0;color:var(--body,#2B3B57);font-size:.96rem;line-height:1.55}
.anl-card .anl-more{margin-top:auto;padding-top:.3rem}
.anl-card .anl-more a{color:var(--a)}
.anl-more a{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:.82rem;color:var(--violet,#6D28D9);text-decoration:none}
.anl-more a:hover{text-decoration:underline}

/* ---- Credentials A — dark trust panel ----------------------------- */
.anl-creds{position:relative;overflow:hidden;text-align:center;border-radius:22px;
  padding:clamp(2rem,4vw,2.8rem);max-width:940px;margin-inline:auto;
  background:var(--ink,#0E1B36);color:#fff}
.anl-creds::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,#2743d0,#7a2fd6 55%,#c02582);opacity:.16}
.anl-creds > *{position:relative;z-index:1}
.anl-creds h2{margin-top:0;color:#fff}
.anl-creds p{color:#c7d2ea;max-width:60ch;margin-inline:auto}
.anl-creds .anl-more a{color:#fff;border-bottom:2px solid #c02582;padding-bottom:2px}
.anl-creds .anl-more a:hover{border-bottom-color:#fff}
/* certification chips + tool tags (rendered from a Custom HTML block) */
.anl-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.5rem 0 .9rem}
.anl-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.42rem .9rem}
.anl-chip svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:#7ee0b8;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.anl-tools{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.anl-tool{font-size:.76rem;font-weight:600;color:#aab8d6;border:1px dashed rgba(255,255,255,.24);
  border-radius:8px;padding:.26rem .62rem}

/* ---- FAQ 2 — tinted accent accordion ------------------------------ */
.anl-faq{max-width:820px;margin-inline:auto}
.anl-faq .wp-block-details{background:#f3f0fd;border:1px solid #e5ddfb;
  border-left:5px solid var(--violet,#6D28D9);border-radius:12px;margin:0 0 .7rem;overflow:hidden}
.anl-faq .wp-block-details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;padding:1rem 1.2rem;font-family:var(--display);
  font-weight:700;color:var(--ink,#0E1B36)}
.anl-faq .wp-block-details > summary::-webkit-details-marker{display:none}
.anl-faq .wp-block-details > summary::after{content:"";width:10px;height:10px;flex:0 0 auto;
  margin-right:.15rem;border-right:2.5px solid var(--violet,#6D28D9);
  border-bottom:2.5px solid var(--violet,#6D28D9);transform:rotate(45deg);
  transition:transform .2s ease}
.anl-faq .wp-block-details[open] > summary::after{transform:rotate(225deg)}
.anl-faq .wp-block-details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--body,#2B3B57);font-size:.95rem}

/* ---- CTA panel ---------------------------------------------------- */
.anl-cta{background:var(--ink,#0E1B36);border-radius:18px;color:#fff}
.anl-cta h2{color:#fff}
.anl-cta p{color:var(--muted,#B8C9EA);max-width:54ch;margin-inline:auto}
.anl-cta .wp-block-button__link{background:#fff;color:var(--ink,#0E1B36);font-family:var(--display);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:11px;padding:.9rem 1.9rem}
.anl-cta .wp-block-button__link:hover{background:#f0eaff}

/* ---- Reduced motion (respect the user's OS setting) ---------------- */
@media (prefers-reduced-motion: reduce){
  .anl-cards .anl-card{transition:none}
  .anl-cards .anl-card:hover{transform:none}
  .anl-faq .wp-block-details > summary::after{transition:none}
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:600px){
  .anl-banner{padding:1.4rem 1.4rem}
  .anl-banner-cta{width:100%}
  .anl-banner-cta.wp-block-buttons{justify-content:flex-start}
}