/* Canonical icon sizing layer (loaded after style.css)
   Purpose: neutralize legacy/duplicated icon rules in style.css and keep mobile icon sizes deterministic. */

:root {
  --ui-icon-size: 1em;
  --ui-icon-max-px: 48px;
  --social-icon-hitbox: 2.25rem;
  --social-icon-glyph: 1.35rem;
}

/* Inline SVG UI icons */
.icon-svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: var(--ui-icon-size) !important;
  block-size: var(--ui-icon-size) !important;
  min-inline-size: 1em !important;
  min-block-size: 1em !important;
  max-inline-size: min(1em, var(--ui-icon-max-px)) !important;
  max-block-size: min(1em, var(--ui-icon-max-px)) !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  vertical-align: -0.12em;
  overflow: hidden; /* hard-stop for flex weirdness */
  contain: layout paint; /* limit accidental layout blowups */
}

.icon-svg__svg {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  min-inline-size: 100% !important;
  min-block-size: 100% !important;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  flex: 0 0 auto !important;
  overflow: hidden;
  transform-origin: center center;
}

.icon-svg__svg[stroke] { fill: none; }
.icon-svg__svg[fill='none'] { fill: none !important; }
.icon-svg__svg, .icon-svg__svg * { vector-effect: non-scaling-stroke; }

/* Context-specific sizes (explicit + final) */
.lang-btn .icon-svg { font-size: 1.2rem !important; }
.btn .icon-svg { margin-right: .35rem !important; font-size: 1.02em !important; }
.section-title .icon-svg { font-size: .98em !important; }
.section-arrow .icon-svg { font-size: 1rem !important; }
.project-header .icon-svg { font-size: 1.05rem !important; }
.close-chat .icon-svg { font-size: 1.05rem !important; }
.chat-floating-notice__close .icon-svg { font-size: 1rem !important; }

/* Social icons (wrapper hitbox + inner glyph/image) */
.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: var(--social-icon-hitbox) !important;
  block-size: var(--social-icon-hitbox) !important;
  min-inline-size: var(--social-icon-hitbox) !important;
  min-block-size: var(--social-icon-hitbox) !important;
  max-inline-size: var(--social-icon-hitbox) !important;
  max-block-size: var(--social-icon-hitbox) !important;
  flex: 0 0 var(--social-icon-hitbox) !important;
  margin: 0 .55rem !important;
  font-size: 1rem !important; /* neutralize legacy 1.8–2.1rem font-size rules */
  line-height: 1 !important;
  overflow: hidden;
  border-radius: .5rem;
  transform-origin: center center;
}

.social-icon__img,
.social-icon .icon-svg {
  inline-size: var(--social-icon-glyph) !important;
  block-size: var(--social-icon-glyph) !important;
  min-inline-size: var(--social-icon-glyph) !important;
  min-block-size: var(--social-icon-glyph) !important;
  max-inline-size: var(--social-icon-glyph) !important;
  max-block-size: var(--social-icon-glyph) !important;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

.social-icon__img {
  display: block;
  object-fit: contain;
  opacity: .95;
}

.social-icon:hover .social-icon__img {
  opacity: 1;
}

/* Mobile hardening: keep icon hitboxes stable and avoid accidental scaling from inherited font sizes */
@media (max-width: 640px) {
  :root {
    --ui-icon-max-px: 40px;
    --social-icon-hitbox: 2.1rem;
    --social-icon-glyph: 1.25rem;
  }

  .lang-btn .icon-svg { font-size: 1.05rem !important; }
  .close-chat .icon-svg { font-size: 1rem !important; }
  #open-chat .icon-svg { font-size: 1em !important; }
}

/* Optional debug switch: add body[data-debug-icons="1"] in dev */
body[data-debug-icons='1'] .icon-svg,
body[data-debug-icons='1'] .social-icon,
body[data-debug-icons='1'] .social-icon__img {
  outline: 1px dashed rgba(255, 99, 132, .55);
  outline-offset: 1px;
}