/* ==========================================================================
   AOM — Licenses & certifications page styles
   ========================================================================== */

/* ---------- Hero ---------- */
.main-wrapper > .licenses-hero{margin:0;border-radius:0;--section-inset:0px}
.licenses-hero{padding:4.5rem 0 3rem}
.licenses-hero .container{display:flex;flex-direction:column;align-items:center;text-align:center}
.licenses-hero-title{font-size:clamp(2.4rem,4.6vw,3.6rem);margin-top:.7rem}
.licenses-hero-sub{margin-top:1rem;font-size:1.08rem;color:var(--grey-700);max-width:52ch}

/* ---------- Map ----------
   Real state geography (public-domain CC0 outline, Wikimedia Commons)
   instead of a grid of squares. Status color comes from data-status on
   each state's own <path>/<circle> — set statically for the two known
   exceptions, "full" is just the default fill. Hover/focus is scoped to
   the specific shape via the child combinator so it never bleeds onto
   siblings that inherit their fill from the shared <g class="state">. */
.licenses-map-section{padding:3.5rem 0 5rem}
.licenses-map-wrap{position:relative;max-width:1100px;margin:0 auto}
.licenses-map-svg{display:block;width:100%;height:auto;overflow:visible}
.licenses-map-svg .state{fill:var(--purple)}
.licenses-map-svg [data-status="nonsterile"]{fill:var(--purple-200)}
.licenses-map-svg [data-status="none"]{fill:var(--grey-200)}
.licenses-map-svg .separator1{stroke:var(--grey-300)}
.licenses-map-svg g.state > path,
.licenses-map-svg circle.state{
  stroke:var(--white);
  stroke-width:1;
  cursor:pointer;
  outline:none;
  transform-box:fill-box;
  transform-origin:center;
  transition:fill .15s var(--ease),stroke-width .15s var(--ease),
             transform .2s var(--ease),filter .2s var(--ease);
}
/* Lift: scaling from the shape's own center (transform-box:fill-box)
   pulls every edge back from its neighbors evenly, and the drop-shadow
   sells the rest — reads as "this piece lifted off the map" rather than
   a jigsaw piece with a gap torn in one side. Gated behind hover:hover
   so touch taps don't get a state stuck "lifted". */
@media (hover:hover) and (pointer:fine){
  .licenses-map-svg g.state > path:hover,
  .licenses-map-svg circle.state:hover{
    fill:var(--purple-2);
    stroke-width:2;
    transform:scale(1.045);
    filter:drop-shadow(0 6px 10px rgba(5,6,8,.35));
  }
  .licenses-map-svg g.state > path[data-status="nonsterile"]:hover{fill:var(--purple)}
  .licenses-map-svg g.state > path[data-status="none"]:hover{fill:var(--grey-300)}
}
.licenses-map-svg g.state > path:focus-visible,
.licenses-map-svg circle.state:focus-visible{
  fill:var(--purple-2);
  stroke-width:2;
  transform:scale(1.045);
  filter:drop-shadow(0 6px 10px rgba(5,6,8,.35));
}
.licenses-map-svg g.state > path[data-status="nonsterile"]:focus-visible{fill:var(--purple)}
@media (prefers-reduced-motion:reduce){
  .licenses-map-svg g.state > path,
  .licenses-map-svg circle.state{transition:fill .15s var(--ease),stroke-width .15s var(--ease)}
  .licenses-map-svg g.state > path:hover,
  .licenses-map-svg g.state > path:focus-visible,
  .licenses-map-svg circle.state:hover,
  .licenses-map-svg circle.state:focus-visible{transform:none;filter:none}
}
.licenses-map-tip{
  position:absolute;
  top:0;
  left:0;
  white-space:nowrap;
  background:var(--ink);
  color:var(--white);
  font-size:.78rem;
  padding:.45rem .8rem;
  border-radius:8px;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - 10px));
  z-index:3;
}
.licenses-map-tip b{font-weight:550}
.licenses-map-tip span{color:var(--grey-300)}

/* ---------- Certifications ---------- */
.licenses-certs{background:var(--paper);padding:6rem 0}
.licenses-certs-head{margin-bottom:2.4rem}
.licenses-certs-title{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.6rem}
.licenses-certs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
}
.licenses-cert{
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--radius-card);
  padding:2rem 1.9rem;
}
.licenses-cert-title{font-size:1.2rem;font-weight:550}
.licenses-cert-text{margin-top:.6rem;font-size:.94rem;color:var(--grey-700)}
.licenses-cert-seal{display:inline-block;margin-top:1.2rem}
@media (max-width:720px){
  .licenses-certs-grid{grid-template-columns:1fr}
}