/* APLIKE / editorial-motion.css
 * Canonical theme implementation: previously split historical styles, now collected
 * in cascade order. Do not create append-only override files. */

/* Unenhanced Drupal TOC is a readable, contained navigation card.
 * The normal JS controller adds data-apx-disclosure and replaces this fallback
 * with the interactive details component; these selectors then stop matching.
 * Never conceal editorial content when JavaScript is missing or fails. */
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]){
  margin:20px 0 30px;padding:clamp(17px,2.2vw,29px);
  border:1px solid #63eacb77;border-radius:17px;
  background:linear-gradient(115deg,#112d40,#19233c);
}
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) .page-toc__title{
  margin-bottom:16px;font-size:clamp(20px,2.1vw,28px);font-weight:800;color:#f7fdff;
}
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) .page-toc__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;
  list-style:none;margin:0;padding:0;
}
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) :is(.page-toc__item,.page-toc__subitem){
  min-width:0;list-style:none;padding:7px 0;border-bottom:1px solid #a9d7eb23;
}
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) .page-toc__sublist{
  display:block;visibility:visible;opacity:1;max-height:none;margin:8px 0 0 14px;padding:0 0 0 14px;
  list-style:none;border-left:1px solid #5ef2d65c;
}
.apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) .page-toc__link{
  color:#e8faff;text-decoration:none;overflow-wrap:anywhere;
}
@media(max-width:760px){
 .apx-site:not(.apx-site--front) .page-toc:not([data-apx-disclosure]) .page-toc__list{grid-template-columns:minmax(0,1fr)}
}

/* ===== TABLE OF CONTENTS ===== */
/* One TOC component for HUB and service pages. Drupal provides the same real anchors. */
.apx-site:not(.apx-site--front) .apx-disclosure--toc{
  display:block;overflow:hidden;margin:18px 0 30px;
  border:1px solid #63eacba9;border-radius:17px;
  background:linear-gradient(115deg,#112d40,#19233c);
  box-shadow:0 16px 40px #0003,inset 0 1px #ffffff14;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc>summary{
  display:flex;align-items:center;gap:14px;
  min-height:69px;padding:16px clamp(18px,2.2vw,29px);
  color:#f7fdff;font-size:clamp(22px,2.2vw,31px);
  line-height:1.3;font-weight:850;letter-spacing:-.03em;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .apx-disclosure__body{
  padding:0 clamp(14px,2.4vw,30px) 24px;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(14px,2vw,27px);row-gap:0;
  list-style:none;margin:0;padding:0;columns:auto;
  counter-reset:apx-toc-global;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item{
  display:block;position:relative;min-width:0;
  padding:14px 48px 14px 45px;
  border-bottom:1px solid #a9d7eb23;border-left:2px solid transparent;
  border-radius:8px;list-style:none;
  counter-increment:apx-toc-global;
  transition:border-color .85s ease,background .85s ease;
}
/* The number belongs to the TOC link, not to LI. The shared editorial
 * list indicator owns LI::before elsewhere; the two cannot conflict here. */
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item::before{
  content:none;display:none;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item>.page-toc__link::before{
  content:counter(apx-toc-global,decimal-leading-zero);
  position:absolute;top:15px;left:8px;
  width:auto;height:auto;border:0;
  background:transparent;box-shadow:none;
  color:#ffdf65;font:800 11px/1.5 system-ui,sans-serif;letter-spacing:.08em;
  pointer-events:none;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item>.page-toc__link{
  display:block;line-height:1.55;
  min-width:0;overflow-wrap:break-word;
  color:#e8faff;font-weight:720;text-decoration:none;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item:hover{
  border-left-color:#ffe38c;background:#ffe38c0c;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item>.apx-toc-branch{
  position:absolute;inset:auto 7px auto auto;top:8px;
  display:grid;place-items:center;width:34px;height:36px;
  margin:0;padding:0;border-radius:10px;
  color:#ffe182;background:transparent;cursor:pointer;border:0;
  transition:background-color .8s ease,color .8s ease;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item>.apx-toc-branch:hover{
  background:#ffe18218;color:#fff4ba;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__sublist{
  display:block;max-height:0;opacity:0;visibility:hidden;
  overflow:hidden;columns:auto;margin:0;
  padding:0 0 0 14px;border-left:1px solid #5ef2d65c;
  transition:max-height 1.1s cubic-bezier(.19,.82,.21,1),opacity 1.1s ease,visibility 1.1s ease;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .apx-toc-expanded>.page-toc__sublist{
  max-height:var(--apx-subheight,1600px);opacity:1;visibility:visible;
  margin-top:12px;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__sublist>.page-toc__subitem{
  list-style:none;display:block;padding:8px 10px;
  margin:0;border-bottom:1px solid #ffffff14;
}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__sublist>.page-toc__subitem::before{content:none}
.apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__link--sub{
  font-size:14px;font-weight:500;color:#bad6e7;text-decoration:none;
}
/* HUB and service navigation links use a compact editorial line height; Article preserves its own reading rhythm. */
.apx-site:is(.apx-site--hub,.apx-site--service) .apx-disclosure--toc .page-toc__link--sub{line-height:1.6}
/* A stable arrow for expandable third-level links; the button remains accessible. */
.apx-site .apx-disclosure .apx-toc-branch::before{
  content:"";position:relative;display:block;inset:auto;
  width:8px;height:8px;margin:0;border:0;
  border-right:2px solid #FFD700;border-bottom:2px solid #FFD700;
  border-radius:0;background:transparent;
  transform:rotate(45deg);transition:transform 1.1s var(--apx-silk);
}
.apx-site .apx-toc-expanded>.apx-toc-branch::before{transform:rotate(225deg)}
@media(prefers-reduced-motion:reduce){
 .apx-site .apx-disclosure .apx-toc-branch::before{transition:none}
}

@media(max-width:760px){
 .apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list{grid-template-columns:minmax(0,1fr)}
 .apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item{padding:12px 42px 12px 37px}
}
@media(prefers-reduced-motion:reduce){
 .apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__list>.page-toc__item,
 .apx-site:not(.apx-site--front) .apx-disclosure--toc .page-toc__sublist{transition:none}
}


/* ===== DISCLOSURE AND CONTENT MOTION ===== */
/**
 * APLIKE CONTENT SYSTEM — single source of visual rules for Drupal TOC,
 * Additional Information, FAQ, editorial lists and masonry on HUB & services.
 * Markup/interaction is handled once by js/content.js.
 */
/* The default (no-JS) layout is readable and row ordered. Only a measured
 * desktop grid receives the dense 2px track layout. Drupal content remains in
 * source order and every mobile breakpoint returns to natural rows. */
.apx-site:not(.apx-site--front):not(.apx-site--article) :is(.apx-chapter-grid,.apx-extended-grid).apx-masonry-system{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;grid-auto-rows:auto;
  row-gap:clamp(16px,1.9vw,24px);
  column-gap:clamp(16px,1.9vw,24px);
  columns:auto;column-fill:auto;
  align-items:start;align-content:start;
  margin:24px 0 34px;contain:none;
}
.apx-site:not(.apx-site--front):not(.apx-site--article) :is(.apx-chapter-grid,.apx-extended-grid).apx-masonry-system.apx-masonry--ready{
  --apx-masonry-track:2px;--apx-masonry-gap:2px;
  grid-auto-rows:var(--apx-masonry-track);row-gap:var(--apx-masonry-gap);
}
.apx-site:not(.apx-site--front):not(.apx-site--article) :is(.apx-chapter-grid,.apx-extended-grid).apx-masonry-system > :is(.apx-chapter,.apx-extended-section){
  display:block;grid-area:auto;width:100%;height:auto;min-height:0;
  margin:0;align-self:start;break-inside:avoid;
}
@media(max-width:820px){
 .apx-site:not(.apx-site--front):not(.apx-site--article) :is(.apx-chapter-grid,.apx-extended-grid).apx-masonry-system,
 .apx-site:not(.apx-site--front):not(.apx-site--article) :is(.apx-chapter-grid,.apx-extended-grid).apx-masonry-system.apx-masonry--ready{
   grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;
   row-gap:18px;
 }
}

/* Information pages share the same Drupal chapter controller as service pages,
   but do not load service.css. Own their glossy card rendering here rather
   than accidentally leaving all About-page H2 chapters unstyled. */
.apx-site--information .apx-chapter-grid>.apx-chapter{
  --apx-info-glow:#74efdb;position:relative;isolation:isolate;min-width:0;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--apx-info-glow) 39%,transparent);
  border-radius:24px;padding:clamp(23px,2.5vw,38px);
  background:radial-gradient(ellipse 80% 45% at 95% -8%,color-mix(in srgb,var(--apx-info-glow) 19%,transparent),transparent 72%),radial-gradient(ellipse 68% 55% at 4% 110%,color-mix(in srgb,var(--apx-info-glow) 9%,transparent),transparent 76%),linear-gradient(140deg,#1b3043ed,#202740f5 58%,#1c3140e9);
  background-size:150% 150%,140% 140%,100% 100%;
  box-shadow:0 24px 65px #0006,inset 0 1px #ffffff25;
  transform:perspective(1400px) rotateX(0deg) rotateY(0deg);
  animation:apxInfoCardBreath 24s ease-in-out infinite alternate;
  transition:border-color 1.1s ease,box-shadow 1.1s ease,translate 1.2s cubic-bezier(.18,.76,.2,1),transform 1s cubic-bezier(.18,.76,.2,1);
}
.apx-site--information .apx-chapter-grid>.apx-chapter:nth-child(3n + 2){--apx-info-glow:#b9a1ff}
.apx-site--information .apx-chapter-grid>.apx-chapter:nth-child(3n){--apx-info-glow:#ffd388}
.apx-site--information .apx-chapter-grid>.apx-chapter::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(116deg,transparent 0 93px,color-mix(in srgb,var(--apx-info-glow) 9%,transparent) 94px 95px,transparent 96px 190px);
  background-size:300px 300px;animation:apxInfoGridFlow 24s linear infinite alternate;
}
.apx-site--information .apx-chapter-grid>.apx-chapter:hover,
.apx-site--information .apx-chapter-grid>.apx-chapter:focus-within{
  border-color:color-mix(in srgb,var(--apx-info-glow) 76%,transparent);
  box-shadow:0 30px 76px #0009,0 0 34px color-mix(in srgb,var(--apx-info-glow) 14%,transparent),inset 0 1px #ffffff37;
  translate:0 0;
  transform:perspective(1400px) rotateX(var(--apx-tilt-x,0deg)) rotateY(var(--apx-tilt-y,0deg)) scale(1.008);
}
.apx-site--information .apx-chapter-grid>.apx-chapter h2{font-size:clamp(26px,2.55vw,39px);line-height:1.13;margin:0 0 20px;letter-spacing:-.046em;color:#fafcff;overflow-wrap:anywhere}
.apx-site--information .apx-chapter-grid>.apx-chapter h3{font-size:clamp(19px,1.5vw,25px);margin:25px 0 9px;color:#ffe18b}
.apx-site--information .apx-chapter-grid>.apx-chapter :is(p,li){line-height:1.82;font-size:clamp(15px,1.1vw,17px);color:#dce8f5;overflow-wrap:break-word}
.apx-site--information .apx-chapter-grid>.apx-chapter :is(ul,ol){margin:14px 0 20px;padding-left:20px}
@keyframes apxInfoGridFlow{from{background-position:0 0}to{background-position:135px -72px}}
@keyframes apxInfoCardBreath{from{background-position:0% 0%,95% 20%,0 0}to{background-position:95% 75%,0 100%,0 0}}
@media(prefers-reduced-motion:reduce){.apx-site--information .apx-chapter-grid>.apx-chapter,.apx-site--information .apx-chapter-grid>.apx-chapter:is(:hover,:focus-within),.apx-site--information .apx-chapter-grid>.apx-chapter::before{animation:none;translate:none;transform:none;transition:none}}

/* One source of truth for editorial numbering is js/content.js / the Drupal TOC. */
.apx-site:is(.apx-site--service,.apx-site--hub) :is(.apx-chapter,.apx-extended-section)[data-apx-section-index]::before{
  content:attr(data-apx-section-index);display:inline-flex;align-items:center;justify-content:center;
  min-width:35px;min-height:27px;padding:3px 8px;margin:0 0 14px;border-radius:8px;
  border:1px solid #91e8db6b;background:#122a3fcf;color:#ffd86b;
  font:800 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.08em;
}

/* FAQ / Additional Information / native details: one visual owner.
   Drupal renders the original text. js/content.js owns the opening motion.
   No layout changes on hover and no independent content keyframes. */
.apx-site .apx-disclosure{
  display:block;position:relative;color:#eaf2fb;margin:12px 0;
  overflow:clip;overflow-anchor:none;overscroll-behavior-y:auto;
  contain:layout style;transform:none;translate:none;scale:1;
  transition:border-color .75s ease,background-color .75s ease,box-shadow .85s ease;
}
.apx-site .apx-disclosure>summary{
  display:flex;gap:16px;align-items:center;box-sizing:border-box;
  list-style:none;padding:16px clamp(16px,2vw,28px);
  min-height:65px;line-height:1.3;
  color:#f4f8ff;font-size:clamp(17px,1.5vw,22px);font-weight:800;
  cursor:pointer;transform:none;translate:none;scale:1;
  transition:background-color .7s ease,color .7s ease;
}
.apx-site .apx-disclosure>summary::-webkit-details-marker{display:none}
.apx-site .apx-disclosure__body{
  height:auto;opacity:1;transform:none;filter:none;
  transition:none;animation:none;
  padding:0 clamp(18px,2.5vw,32px) 22px;overflow:hidden;color:#d3e0eb;
}
.apx-site .apx-disclosure__body>.apx-disclosure__inner{
  overflow-wrap:anywhere;filter:none;transition:none;animation:none;
}
.apx-site .apx-disclosure--question>summary{
  min-height:58px;font-size:clamp(14px,1.1vw,17px);font-weight:730;
}
.apx-site .apx-disclosure--question .apx-disclosure__body{padding-bottom:17px}
.apx-site--service .apx-disclosure--question>summary{font-size:clamp(15px,1.2vw,18px);font-weight:700}
.apx-site--hub :is(.apx-disclosure--extra,.apx-disclosure--faq)>summary{font-size:clamp(18px,1.7vw,24px)}

/* Real shared disclosure surfaces: no separate HUB and Service mechanisms. */
.apx-site:not(.apx-site--front) .apx-disclosure{
  border:1px solid #80bed958;border-radius:16px;
  background:linear-gradient(130deg,#162b40,#1a263b);
  box-shadow:inset 0 1px #ffffff13;
  overflow:hidden;
}
.apx-site:not(.apx-site--front) .apx-disclosure>summary{
  display:flex;align-items:center;
  color:#f2f9ff;transition:background-color .85s ease,color .85s ease;
}
.apx-site:not(.apx-site--front) .apx-disclosure>summary:hover{
  background-color:#7ef6e90c;color:#fff;
}
.apx-site:not(.apx-site--front) :is(.apx-disclosure--extra,.apx-disclosure--faq){
  margin:32px 0;border-color:#7ddfdd66;
  background:linear-gradient(120deg,#163349,#202742);
  overflow-anchor:none;
}
.apx-site:not(.apx-site--front) .apx-disclosure--question{
  margin:7px 0;border-radius:12px;
  background:#15283a;
  transition:background-color 1.4s cubic-bezier(.2,.8,.2,1),border-color 1.4s ease,box-shadow 1.4s ease;
}
.apx-site:not(.apx-site--front) .apx-disclosure--question:hover{
  background:#20344a;border-color:#7be9d977;
}
/* FAQ answer summary: quiet hover, constant padding, no secondary movement. */
.apx-site .apx-disclosure--question>summary{background:transparent}
.apx-site .apx-disclosure--question>summary:hover{background:rgba(255,215,0,.045)}

/* One chevron for TOC, FAQ, questions and additional information.
   Only the shared reading system may shape disclosure summary icons. */
.apx-site .apx-disclosure>summary{
  position:relative;
  padding-right:64px;
}
.apx-site .apx-disclosure>summary::after{
  content:"";position:absolute;right:21px;top:50%;left:auto;
  display:block;box-sizing:border-box;width:14px;height:14px;
  padding:0;margin:0;border:0;font-size:25px;font-weight:400;line-height:1.3;
  border-right:3px solid #FFD700;border-bottom:3px solid #FFD700;
  border-radius:1px;background:transparent;color:transparent;
  transform:translateY(-70%) rotate(45deg);box-shadow:none;
  transition:transform 1.1s var(--apx-silk),border-color .8s ease;
}
.apx-site .apx-disclosure[open]>summary::after{
  transform:translateY(-25%) rotate(225deg);border-color:#71f9dc;color:#FFD700;
}
.apx-site .apx-disclosure>summary:hover::after{
  border-color:#fff;
}
@media(prefers-reduced-motion:reduce){
 .apx-site .apx-disclosure>summary::after{transition:none}
}

/* List bullets, reveal timing and hover movement are owned by
   editorial-system.css; this file owns disclosures and measured chapter grids. */
@media(prefers-reduced-motion:reduce){
 .apx-site:not(.apx-site--front) :is(.apx-chapter-grid,.apx-extended-grid) :is(li,.apx-chapter,.apx-extended-section),
 .apx-site:not(.apx-site--front) .apx-disclosure--question{transition:none;animation:none}
}



/* Editorial grid anchoring; canonical component ownership. */
/* Disclosure controller owns both height and content WAAPI transitions. */
.apx-site .apx-chapter-grid,.apx-site .apx-extended-grid{overflow-anchor:none}