/*
 * sd-footer — global footer (Session 3.2; model 1 chosen by the owner in the follow-up review)
 * Blueprint 5.5, 5.35. Three equal columns — brand (logo, core message, slogan, social icons) · contact
 * (address, telephone, emails, Contact SisuDent) · map (sd-map, click-to-load) — then all page links in one
 * line and the base line (company identification + legal links).
 * Surface: brand blue — an intentional large blue area (Design_System_Plan.md 5, rule 3; Blueprint 3.10).
 * On blue: white text (12.94 : 1), blue-100 secondary text (9.73 : 1); copper focus ring 3.41 : 1.
 * Rules: social media as platform icons with an accessible name, never raw URLs (5.5); no embedded map before
 * the visitor's click (D-017); links ≥ 44px high; a blue band is never placed directly above the footer.
 * Layout: desktop 3 columns · tablet brand full width, contact + map side by side · phone one column.
 */

.sd-footer {
  --sd-color-text-heading: var(--sd-color-white);
  --sd-color-text-default: var(--sd-color-white);
  --sd-color-text-muted: var(--sd-color-blue-100);
  --sd-color-link: var(--sd-color-white);
  --sd-color-link-hover: var(--sd-color-white);
  --sd-color-text-accent: var(--sd-color-white);
  background: var(--sd-color-surface-brand);
  color: var(--sd-color-text-on-brand);
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

/* ---------- Main row: brand · contact · map ---------- */

.sd-footer__main {
  display: grid;
  gap: var(--sd-space-6);
  padding-block: var(--sd-space-7) var(--sd-space-5);
  align-items: start;
}

@media (min-width: 640px) {
  .sd-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sd-space-6) var(--sd-grid-gutter); }
  .sd-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .sd-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sd-space-6); padding-block: var(--sd-space-6) var(--sd-space-4); }
  .sd-footer__brand { grid-column: auto; }
}

.sd-footer__brand { display: grid; gap: var(--sd-space-3); justify-items: start; }

.sd-footer__logo { display: inline-flex; align-items: center; min-height: var(--sd-target-min); }
.sd-footer__logo img { width: auto; height: 2.75rem; }   /* 44 */

.sd-footer__message { max-width: 34ch; font-size: var(--sd-font-size-body); line-height: var(--sd-line-height-body); color: var(--sd-color-white); }
.sd-footer__slogan { color: var(--sd-color-text-muted); }

/* Group label (Contact) */
.sd-footer__title {
  margin-bottom: var(--sd-space-2);
  font-size: var(--sd-font-size-label);
  font-weight: var(--sd-font-weight-medium);
  line-height: var(--sd-line-height-label);
  letter-spacing: var(--sd-letter-spacing-label);
  text-transform: uppercase;
  color: var(--sd-color-text-muted);
}

/* ---------- Social media icons (5.5: platform icons, not raw URLs) ---------- */

.sd-footer__social { display: flex; flex-wrap: wrap; gap: var(--sd-target-gap); margin: var(--sd-space-1) 0 0; padding: 0; list-style: none; }

.sd-footer__social-link {
  display: inline-grid;
  place-items: center;
  width: var(--sd-target-min);
  height: var(--sd-target-min);
  border: var(--sd-border-width) solid rgb(255 255 255 / 0.45);   /* boundary 3.9 : 1 on blue */
  border-radius: var(--sd-radius-md);
  color: var(--sd-color-white);
  transition: background-color var(--sd-transition-feedback), border-color var(--sd-transition-feedback);
}

.sd-footer__social-link svg { width: 1.375rem; height: 1.375rem; }

.sd-footer__social-link:hover,
.sd-footer__social-link[data-state="hover"] { border-color: var(--sd-color-white); background: rgb(255 255 255 / 0.12); color: var(--sd-color-white); }

/* ---------- Contact (address element) ---------- */

.sd-footer__address { font-style: normal; }

.sd-footer__contact-list { display: grid; margin: 0; padding: 0; list-style: none; }

.sd-footer__contact-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--sd-space-3);
  align-items: center;
  min-height: var(--sd-target-min);
}

.sd-footer__contact-list svg { width: 1.25rem; height: 1.25rem; color: var(--sd-color-blue-100); }

.sd-footer__contact-list a,
.sd-footer__contact-list span { font-size: var(--sd-font-size-ui); color: var(--sd-color-white); overflow-wrap: anywhere; }

.sd-footer__contact-list a { display: inline-flex; align-items: center; min-height: var(--sd-target-min); text-decoration: none; }
.sd-footer__contact-list a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.sd-footer__contact-action { margin-top: var(--sd-space-4); }

/* ---------- Page links: one line ---------- */

.sd-footer__nav { border-top: var(--sd-border-width) solid rgb(255 255 255 / 0.2); padding-block: var(--sd-space-2); }

.sd-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sd-grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sd-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--sd-space-5); }
}

@media (min-width: 1280px) {
  .sd-footer__links { flex-wrap: nowrap; justify-content: space-between; gap: var(--sd-space-3); }
}

.sd-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sd-target-min);
  color: var(--sd-color-white);
  font-size: var(--sd-font-size-ui);
  text-decoration: none;
  white-space: nowrap;
}

.sd-footer__link:hover { color: var(--sd-color-white); text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- Base line: company identification + legal links ---------- */

.sd-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--sd-space-5);
  padding-block: var(--sd-space-2);
  border-top: var(--sd-border-width) solid rgb(255 255 255 / 0.2);   /* decorative divider */
  color: var(--sd-color-text-muted);
}

.sd-footer__company { display: flex; flex-wrap: wrap; gap: 0 var(--sd-space-3); padding-block: var(--sd-space-2); }

.sd-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sd-space-4); margin: 0; padding: 0; list-style: none; }
.sd-footer__legal .sd-footer__link { font-size: var(--sd-font-size-small); color: var(--sd-color-blue-100); }
.sd-footer__legal .sd-footer__link:hover { color: var(--sd-color-white); }

@media (max-width: 639.98px) {
  .sd-footer__base { flex-direction: column; align-items: flex-start; }
  .sd-footer__legal .sd-footer__link { white-space: normal; }
}