/* Bank Alkair — site shell: seven header models, menus, search, drawer and five footer models
 * (p02 parts 10, 12). Loaded on every public page by the header partial. Values from tokens.css only. */

body.site { font-synthesis: none; text-rendering: optimizeLegibility; }
a { color: var(--s-link); }
a:hover { color: color-mix(in srgb, var(--s-link) var(--s-tint), var(--s-text)); }
.social { list-style: none; margin: 0; padding: 0; }
@keyframes s-drop { from { opacity: 0; transform: translateY(calc(var(--s-lift) * 2)); } to { opacity: 1; transform: none; } }
@keyframes s-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Top bar ---------- */
.topbar { background: var(--s-primary-dark); color: var(--s-on-primary); font-size: var(--s-text-sm); position: relative; z-index: calc(var(--s-z-header) + 1); }
.topbar-inner { min-height: var(--s-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-2) var(--s-space-6); flex-wrap: wrap; }
.topbar-info { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-1) var(--s-space-6); }
.topbar-info li { display: inline-flex; align-items: center; gap: var(--s-space-2); min-height: var(--s-touch-sm); }
.topbar-info .icon { width: var(--s-text-sm); height: var(--s-text-sm); }
.topbar a, .topbar a:hover { color: var(--s-on-primary); }
.topbar a:hover { text-decoration: underline; text-underline-offset: var(--s-underline-offset); }
.topbar .social { display: flex; gap: var(--s-space-1); }
.topbar .social a { width: var(--s-touch-sm); height: var(--s-touch-sm); border-radius: 50%; display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--s-on-primary); }
.topbar .social a:hover { background: color-mix(in srgb, var(--s-on-primary) var(--s-tint-soft), transparent); transform: none; }
/* Phones: one compact row (licence + first phone); socials live in the footer and the drawer. */
@media (max-width: 760px) {
  .topbar .topbar-social { display: none; }
  .topbar-inner { justify-content: center; min-height: var(--s-touch-sm); }
  .topbar-info { flex-wrap: nowrap; gap: var(--s-space-4); white-space: nowrap; }
  .topbar-info li:nth-child(n+3) { display: none; }
}

/* ---------- Header frame ---------- */
.site-header { background: var(--s-header-bg); color: var(--s-header-text); border-bottom: var(--s-hairline) solid var(--s-border); position: relative; z-index: var(--s-z-header); transition: box-shadow var(--s-normal) var(--s-ease); }
.site-header.is-sticky { position: sticky; top: 0; }
.site-header.is-sticky.is-scrolled { box-shadow: var(--s-shadow-header); }
.hdr-bar { min-height: var(--s-header-h); display: flex; align-items: center; gap: var(--s-space-5); transition: min-height var(--s-normal) var(--s-ease); }
.hdr-bar > .nav { flex: 1 1 auto; min-width: 0; }
.hdr-row { border-top: var(--s-hairline) solid var(--s-border); }
.hdr-row .nav { min-height: var(--s-touch); }
.has-shrink.is-scrolled .hdr-bar { min-height: var(--s-header-h-compact); }
.has-shrink.is-scrolled .brand-logo { max-height: calc(var(--s-header-h-compact) - var(--s-space-3)); }
.has-shrink.is-scrolled .brand-tagline { display: none; }
.has-shrink.is-scrolled .nav-cards, .has-shrink.is-scrolled .nav-icons { padding-block: var(--s-space-1); }
.has-shrink.is-scrolled .nav-icons .nav-icon { display: none; }
.has-shrink.is-scrolled .nav-icons .nav-link { min-height: var(--s-touch); }

/* ---------- Brand ---------- */
.site-header .brand, .drawer .brand { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-space-3); row-gap: 0; color: var(--s-header-text); min-width: 0; flex: 0 1 auto; }
.drawer .brand { color: var(--s-text); }
.brand:hover { color: var(--s-header-text); }
.brand-logo { max-width: var(--s-logo-w); max-height: var(--s-logo-h); width: auto; height: auto; transition: max-height var(--s-normal) var(--s-ease); }
.brand .mark { width: var(--s-touch); height: var(--s-touch); border-radius: var(--s-radius); display: grid; place-items: center; background: linear-gradient(135deg, var(--s-primary), var(--s-primary-dark)); color: var(--s-on-primary); box-shadow: var(--s-shadow-sm); }
.brand .mark .icon { width: var(--s-icon-md); height: var(--s-icon-md); }
.brand-name { font-weight: var(--s-weight-strong); font-size: var(--s-text-md); line-height: var(--s-line-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand-tagline { flex-basis: 100%; font-size: var(--s-text-xs); line-height: var(--s-line-tight); color: var(--s-header-text); padding-top: var(--s-space-1); }
.hdr-4 .brand .mark { width: var(--s-control-lg); height: var(--s-control-lg); }
.hdr-4 .brand-name { font-size: var(--s-text-card-title); }
.hdr-4 .brand-tagline { font-size: var(--s-text-sm); }

/* ---------- Menu ---------- */
.site-header .nav { display: flex; align-items: center; gap: var(--s-space-1); flex-wrap: nowrap; }
.site-header .nav-item { position: relative; flex: none; }
.site-header .nav-link { position: relative; display: inline-flex; align-items: center; gap: var(--s-space-2); min-height: var(--s-touch); padding: 0 var(--s-space-3); border-radius: var(--s-radius); color: var(--s-header-text); font: inherit; font-weight: var(--s-weight-label); background: transparent; border: 0; cursor: pointer; white-space: nowrap; flex: none; transition: background var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease), transform var(--s-normal) var(--s-ease), box-shadow var(--s-normal) var(--s-ease), border-color var(--s-fast) var(--s-ease); }
.site-header .nav-link::after { content: ""; position: absolute; inset-inline: var(--s-space-3); bottom: var(--s-space-1); height: var(--s-border-w); border-radius: var(--s-radius-pill); background: var(--s-accent); transform: scaleX(0); transition: transform var(--s-normal) var(--s-ease); }
.site-header .nav-link:hover, .site-header .nav-link[aria-expanded="true"] { background: color-mix(in srgb, var(--s-primary) var(--s-tint-faint), transparent); color: var(--s-header-text); }
.site-header .nav-link:hover::after, .site-header .nav-link.is-current::after { transform: scaleX(1); }
.nav-caret { width: var(--s-caret); height: var(--s-caret); transition: transform var(--s-fast) var(--s-ease); }
[aria-expanded="true"] > .nav-caret, details[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-more .nav-link .nav-caret { transform: none; }
.hdr-2 .hdr-row .nav, .hdr-6 .hdr-bar > .nav { justify-content: center; }

/* Dropdown panels */
.site-header .dropdown { min-width: var(--s-dropdown-min); max-width: min(var(--s-dropdown-max), calc(100vw - var(--s-space-7))); max-height: calc(100vh - var(--s-header-h) - var(--s-space-8)); overflow-y: auto; padding: var(--s-space-2); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-lg); animation: s-drop var(--s-fast) var(--s-ease); }
.dd-link { display: flex; align-items: center; gap: var(--s-space-2); min-height: var(--s-touch); padding: 0 var(--s-space-3); border-radius: var(--s-radius-sm); color: var(--s-text); font-weight: var(--s-weight-body); line-height: var(--s-line-tight); }
.dd-link:hover, .dd-link:focus-visible { background: var(--s-primary-light); color: var(--s-text); }
.dd-link.is-lead { font-weight: var(--s-weight-title); color: var(--s-link); }
.dd-link.is-lead .icon { color: var(--s-accent); }
.dd-group-title { display: block; padding: var(--s-space-3) var(--s-space-3) var(--s-space-1); font-size: var(--s-text-xs); font-weight: var(--s-weight-title); color: var(--s-muted); }
.more-row + .more-row { border-top: var(--s-hairline) solid var(--s-border); margin-top: var(--s-space-1); padding-top: var(--s-space-1); }
.dd-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-2); min-height: var(--s-touch); padding: 0 var(--s-space-3); border-radius: var(--s-radius-sm); color: var(--s-muted); font-weight: var(--s-weight-label); cursor: pointer; list-style: none; }
.dd-more > summary::-webkit-details-marker, .drawer-group > summary::-webkit-details-marker { display: none; }
.dd-more > summary:hover { background: var(--s-primary-light); color: var(--s-text); }

/* Model 6 — pill buttons */
.nav-pills { gap: var(--s-space-2); }
.site-header .nav-pills .nav-link { border-radius: var(--s-radius-pill); border: var(--s-hairline) solid var(--s-border); background: var(--s-card-bg); padding-inline: var(--s-space-5); }
.site-header .nav-pills .nav-link::after { display: none; }
.site-header .nav-pills .nav-link:hover, .site-header .nav-pills .nav-link.is-current, .site-header .nav-pills .nav-link[aria-expanded="true"] { background: var(--s-primary); border-color: var(--s-primary); color: var(--s-on-primary); box-shadow: var(--s-shadow-sm); }

/* Model 5 — four title cards */
.nav-cards { gap: var(--s-space-3); padding-block: var(--s-space-3); }
.nav-cards > .nav-link, .nav-cards > .nav-item:not(.nav-more) { flex: 1 1 0; min-width: 0; }
.nav-cards > .nav-item > .nav-link { width: 100%; }
.site-header .nav-cards .nav-link { justify-content: center; min-height: var(--s-nav-card-h); padding-inline: var(--s-space-4); background: var(--s-card-bg); border: var(--s-hairline) solid var(--s-border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); font-weight: var(--s-weight-title); white-space: normal; text-align: center; line-height: var(--s-line-tight); }
.site-header .nav-cards .nav-link::after { inset-inline: 30%; bottom: 0; }
.site-header .nav-cards .nav-link:hover, .site-header .nav-cards .nav-link.is-current, .site-header .nav-cards .nav-link[aria-expanded="true"] { transform: translateY(calc(var(--s-lift) / 2)); box-shadow: var(--s-shadow); border-color: var(--s-accent); background: var(--s-card-bg); }

/* Model 7 — icon cards */
.nav-icons { gap: var(--s-space-3); padding-block: var(--s-space-3); justify-content: center; }
.site-header .nav-icons .nav-link { flex-direction: column; justify-content: center; gap: var(--s-space-1); min-width: var(--s-nav-card-min); min-height: var(--s-nav-icon-card-h); padding: var(--s-space-2) var(--s-space-4); background: var(--s-card-bg); border: var(--s-hairline) solid var(--s-border); border-radius: var(--s-radius-lg); font-size: var(--s-text-sm); font-weight: var(--s-weight-title); box-shadow: var(--s-shadow-sm); }
.site-header .nav-icons .nav-link::after { display: none; }
.nav-icon { width: var(--s-nav-icon); height: var(--s-nav-icon); border-radius: 50%; display: inline-grid; place-items: center; background: var(--s-primary-light); color: var(--s-link); flex: none; transition: background var(--s-normal) var(--s-ease), color var(--s-normal) var(--s-ease); }
.nav-icon .icon { width: var(--s-icon); height: var(--s-icon); }
.site-header .nav-icons .nav-link .nav-caret { position: absolute; top: var(--s-space-2); inset-inline-end: var(--s-space-2); }
.site-header .nav-icons .nav-link:hover, .site-header .nav-icons .nav-link.is-current, .site-header .nav-icons .nav-link[aria-expanded="true"] { transform: translateY(calc(var(--s-lift) / 2)); box-shadow: var(--s-shadow); border-color: var(--s-accent); background: var(--s-card-bg); }
.site-header .nav-icons .nav-link:hover .nav-icon, .site-header .nav-icons .nav-link.is-current .nav-icon { background: var(--s-primary); color: var(--s-on-primary); }

/* ---------- Tools ---------- */
.header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-space-2); flex: none; }
.site-header .tool-btn { color: var(--s-header-text); }
.site-header .tool-btn:hover, .site-header .tool-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--s-primary) var(--s-tint-soft), transparent); color: var(--s-header-text); }
.header-tools.is-round .tool-btn { border: var(--s-hairline) solid var(--s-border); background: var(--s-card-bg); box-shadow: var(--s-shadow-sm); }
.site-header .cart-pill { animation: s-drop var(--s-normal) var(--s-ease); box-shadow: var(--s-shadow-sm); }
.site-header .cart-pill .icon, .drawer .cart-pill .icon { width: var(--s-icon); height: var(--s-icon); }
.hdr-social { display: flex; gap: var(--s-space-1); }
.site-header .social a { width: var(--s-touch-sm); height: var(--s-touch-sm); background: var(--s-card-bg); border: var(--s-hairline) solid var(--s-border); color: var(--s-link); }
.site-header .social a:hover { background: var(--s-primary); border-color: var(--s-primary); color: var(--s-on-primary); }
@media (max-width: 1279px) { .hide-compact { display: none; } }

/* Model 2 — centred logo */
.hdr-centered { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.hdr-centered .brand { justify-self: center; justify-content: center; text-align: center; }
.hdr-side { display: flex; align-items: center; min-width: 0; }
.hdr-centered .header-tools { justify-self: end; margin: 0; }

/* Desktop menu only from 1100px; below that the drawer carries every entry (no "more" dropdown). */
@media (max-width: 1099px) {
  .site-header .nav, .hdr-row { display: none; }
  .site-header .menu-toggle { display: inline-grid; }
  .hdr-centered { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hdr-centered .hdr-side .social { display: none; }
}
@media (min-width: 1100px) { .site-header .menu-toggle { display: none; } }
/* Phones: the logo shrinks to the space left by the tools, and a filled cart pill stays compact. */
@media (max-width: 480px) {
  .hdr-bar { gap: var(--s-space-2); }
  .site-header .brand { flex: 1 1 0; }
  .site-header .brand-logo { max-width: 100%; max-height: calc(var(--s-header-h-compact) - var(--s-space-3)); }
  .site-header .brand-tagline { display: none; }
  .site-header .cart-pill { padding-inline: var(--s-space-3); font-size: var(--s-text-sm); gap: var(--s-space-1); }
  .brand-name { font-size: var(--s-text-base); }
}

/* ---------- Search panel ---------- */
.hdr-search { position: relative; z-index: calc(var(--s-z-header) - 1); background: var(--s-card-bg); border-bottom: var(--s-hairline) solid var(--s-border); box-shadow: var(--s-shadow); padding-block: var(--s-space-5); animation: s-drop var(--s-normal) var(--s-ease); }
.is-sticky ~ .hdr-search { position: sticky; top: var(--s-header-h); }
.hdr-search-form { max-width: var(--s-search-w); margin-inline: auto; display: flex; align-items: center; gap: var(--s-space-2); position: relative; }
.hdr-search-icon { position: absolute; inset-inline-start: var(--s-space-5); top: 50%; transform: translateY(-50%); color: var(--s-muted); pointer-events: none; display: inline-flex; }
.hdr-search-input { flex: 1; min-width: 0; min-height: var(--s-control-lg); border: var(--s-border-w) solid var(--s-border); border-radius: var(--s-radius-pill); padding: 0 var(--s-space-5) 0 var(--s-space-5); padding-inline-start: calc(var(--s-space-7) + var(--s-icon)); font: inherit; font-size: var(--s-text-md); background: var(--s-page-bg); color: var(--s-text); transition: border-color var(--s-fast) var(--s-ease), box-shadow var(--s-fast) var(--s-ease), background var(--s-fast) var(--s-ease); }
.hdr-search-input::placeholder { color: var(--s-muted); }
.hdr-search-input:focus { outline: none; border-color: var(--s-primary); box-shadow: var(--s-ring); background: var(--s-card-bg); }
.hdr-search-form .btn { border-radius: var(--s-radius-pill); min-height: var(--s-control-lg); }
.hdr-search-status { max-width: var(--s-search-w); margin: var(--s-space-2) auto 0; font-size: var(--s-text-sm); color: var(--s-muted); }
.hdr-search-status:empty { display: none; }
.hdr-suggest { max-width: var(--s-search-w); margin: var(--s-space-3) auto 0; border: var(--s-hairline) solid var(--s-border); border-radius: var(--s-radius-lg); background: var(--s-card-bg); max-height: var(--s-suggest-max-h); overflow-y: auto; box-shadow: var(--s-shadow-sm); animation: s-fade-in var(--s-fast) var(--s-ease); }
.suggest-item { display: flex; align-items: center; gap: var(--s-space-3); min-height: var(--s-touch); padding: var(--s-space-2) var(--s-space-4); color: var(--s-text); border-bottom: var(--s-hairline) solid var(--s-border); }
.suggest-item:hover, .suggest-item:focus-visible { background: var(--s-primary-light); color: var(--s-text); outline: none; }
.suggest-type { flex: none; }
.suggest-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-all { display: flex; align-items: center; justify-content: center; gap: var(--s-space-2); min-height: var(--s-touch); font-weight: var(--s-weight-title); color: var(--s-link); }
.suggest-all:hover { background: var(--s-primary-light); }
@media (max-width: 600px) {
  .hdr-search { padding-block: var(--s-space-3); }
  .hdr-search-form .btn { display: none; }
  .is-sticky ~ .hdr-search { top: var(--s-header-h); }
}

/* ---------- Drawer ---------- */
/* Closed: off-canvas, no shadow bleeding into the page, and not reachable by keyboard. */
.drawer { width: min(var(--s-drawer-w), var(--s-drawer-max)); gap: 0; visibility: hidden; box-shadow: none; transition: transform var(--s-normal) var(--s-ease), visibility 0s linear var(--s-normal); }
.drawer.is-open { visibility: visible; box-shadow: var(--s-shadow-lg); transition: transform var(--s-normal) var(--s-ease), visibility 0s; }
.drawer-head { gap: var(--s-space-3); }
.drawer-head .brand-logo { max-height: var(--s-touch); }
.drawer-search { position: relative; display: flex; margin: var(--s-space-4) var(--s-space-4) var(--s-space-2); }
.drawer-search .input { border-radius: var(--s-radius-pill); padding-inline-end: var(--s-touch); }
.drawer-search .icon-btn { position: absolute; inset-inline-end: 0; top: 0; color: var(--s-link); }
.drawer-cart { margin: var(--s-space-2) var(--s-space-4); justify-content: center; }
.drawer-body { flex: 1; padding: var(--s-space-2) var(--s-space-3) var(--s-space-4); }
.drawer-body .drawer-link, .drawer-group > summary { display: flex; align-items: center; gap: var(--s-space-3); min-height: var(--s-touch); padding: 0 var(--s-space-3); border-radius: var(--s-radius); color: var(--s-text); font-weight: var(--s-weight-label); cursor: pointer; list-style: none; }
.drawer-group > summary .nav-caret { margin-inline-start: auto; }
.drawer-group > summary:hover, .drawer-body .drawer-link:hover { background: var(--s-primary-light); color: var(--s-text); }
.drawer-body .drawer-link[aria-current="page"] { background: var(--s-primary-light); box-shadow: inset calc(-1 * var(--s-border-w) * 2) 0 0 var(--s-accent); }
.drawer-sub { margin-block: 0 var(--s-space-2); margin-inline: var(--s-space-5) 0; padding-inline-start: var(--s-space-3); border-inline-start: var(--s-border-w) solid var(--s-border); }
.drawer-body .drawer-sub .dd-link { padding-inline-start: var(--s-space-3); font-weight: var(--s-weight-body); }
.drawer .nav-icon { width: var(--s-touch-sm); height: var(--s-touch-sm); }
.drawer-foot { padding: var(--s-space-4); border-top: var(--s-hairline) solid var(--s-border); display: grid; gap: var(--s-space-3); }
.drawer-foot-title { font-size: var(--s-text-sm); color: var(--s-muted); font-weight: var(--s-weight-label); }
.drawer .social a { background: var(--s-primary-light); border: 0; color: var(--s-link); }
.drawer .social a:hover { background: var(--s-primary); color: var(--s-on-primary); }

/* ---------- Footer frame ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--s-space-1); background: linear-gradient(90deg, var(--s-accent), var(--s-primary), var(--s-accent)); }
.site-footer a:hover { color: var(--s-footer-text); text-decoration: underline; text-underline-offset: var(--s-underline-offset-lg); }
.site-footer .social a:hover { text-decoration: none; }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--s-space-8) var(--s-space-7); padding-block: var(--s-space-9) var(--s-space-8); }
.footer-brand { flex: 1.5 1 var(--s-footer-brand-min); min-width: 0; display: grid; align-content: start; gap: var(--s-space-4); }
.footer-col { flex: 1 1 var(--s-footer-col-min); min-width: 0; }
.footer-logo { display: inline-flex; align-items: center; gap: var(--s-space-3); color: var(--s-footer-text); font-weight: var(--s-weight-strong); font-size: var(--s-text-md); justify-self: start; }
.footer-logo:hover { text-decoration: none !important; }
.footer-logo img { max-width: var(--s-footer-logo-w); max-height: var(--s-footer-logo-h); width: auto; height: auto; }
.footer-logo .mark { width: var(--s-touch); height: var(--s-touch); border-radius: var(--s-radius); display: grid; place-items: center; background: var(--s-accent); color: var(--s-on-accent); }
.footer-desc { margin: 0; max-width: var(--s-container-narrow); line-height: var(--s-line); }
.site-footer .footer-title { position: relative; font-size: var(--s-text-md); font-weight: var(--s-weight-title); margin: 0 0 var(--s-space-5); padding-bottom: var(--s-space-2); }
.site-footer .footer-title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: var(--s-space-7); height: var(--s-border-w); border-radius: var(--s-radius-pill); background: var(--s-accent); }
.site-footer .footer-list { gap: var(--s-space-1); }
.site-footer .footer-list li { align-items: center; min-height: var(--s-touch-sm); }
.site-footer .footer-list .icon { flex: none; }
.footer-base { border-top: var(--s-hairline) solid var(--s-footer-divider); }
.footer-base-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-3) var(--s-space-6); flex-wrap: wrap; padding-block: var(--s-space-4); font-size: var(--s-text-sm); }
.footer-copy, .footer-license { margin: 0; display: inline-flex; align-items: center; gap: var(--s-space-2); }
.footer-privacy { color: inherit; text-decoration: underline; text-underline-offset: var(--s-underline-offset); }
.footer-top { width: var(--s-touch); height: var(--s-touch); border-radius: 50%; display: inline-grid; place-items: center; border: var(--s-hairline) solid var(--s-glass-border); background: var(--s-glass); color: var(--s-footer-text); cursor: pointer; transition: transform var(--s-fast) var(--s-ease), background var(--s-fast) var(--s-ease); }
.footer-top:hover { background: var(--s-accent); color: var(--s-on-accent); transform: translateY(var(--s-lift)); }
@media (max-width: 600px) {
  .footer-grid { padding-block: var(--s-space-8) var(--s-space-7); gap: var(--s-space-7); }
  .footer-brand, .footer-col { flex-basis: 100%; }
  .footer-base-inner { justify-content: center; text-align: center; }
}

/* Model 2 — compact centred */
.footer-compact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-space-5); padding-block: var(--s-space-8); }
.footer-compact .footer-brand { justify-items: center; flex: none; }
.footer-compact .footer-logo { justify-self: center; }
.footer-compact .social { justify-content: center; }
.footer-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-space-5); }
.footer-inline a { display: inline-flex; align-items: center; min-height: var(--s-touch); font-weight: var(--s-weight-label); }
.footer-contact.is-inline { flex: none; }
.footer-contact.is-inline .footer-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-space-1) var(--s-space-6); }

/* Model 3 — donation bar */
.footer-donate { padding-top: var(--s-space-8); }
.donate-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--s-space-5) var(--s-space-6); padding: var(--s-space-6) var(--s-space-7); border-radius: var(--s-radius-xl); background: linear-gradient(120deg, var(--s-primary), var(--s-primary-dark)); color: var(--s-on-primary); border: var(--s-hairline) solid var(--s-glass-border); box-shadow: var(--s-shadow-lg); }
.donate-bar::after { content: ""; position: absolute; inset-block: calc(-1 * var(--s-space-9)); inset-inline-end: calc(-1 * var(--s-space-9)); width: calc(var(--s-space-10) * 3); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--s-accent) var(--s-tint-mid), transparent), transparent var(--s-glow-stop)); pointer-events: none; }
.donate-bar-mark { position: relative; z-index: 1; width: var(--s-donate-mark); height: var(--s-donate-mark); flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: var(--s-on-accent); box-shadow: 0 0 0 var(--s-space-2) color-mix(in srgb, var(--s-accent) var(--s-tint-mid), transparent); }
.donate-bar-mark .icon { width: var(--s-icon-lg); height: var(--s-icon-lg); }
.donate-bar-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.site-footer .donate-bar-title { margin: 0; color: var(--s-on-primary); font-size: var(--s-text-section); font-weight: var(--s-weight-strong); line-height: var(--s-line-heading); }
.donate-bar-sub { margin: var(--s-space-1) 0 0; }
.site-footer .donate-bar-btn { position: relative; z-index: 1; flex: none; color: var(--s-on-accent); }
.site-footer .donate-bar-btn:hover { color: var(--s-on-accent); text-decoration: none; }
@media (max-width: 760px) {
  .donate-bar { flex-direction: column; text-align: center; padding: var(--s-space-6) var(--s-space-5); }
  .site-footer .donate-bar-btn { width: 100%; }
}

/* Model 4 — numbers */
.footer-stats { padding-top: var(--s-space-8); }

/* Model 5 — one slim line */
.footer-slim { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-space-2) var(--s-space-6); padding-block: var(--s-space-4); font-size: var(--s-text-sm); }
.footer-slim .footer-inline { justify-content: flex-start; }
.footer-slim .footer-copy { margin-inline-start: auto; }
.footer-logo.is-small { font-size: var(--s-text-base); }
.footer-logo.is-small img { max-height: var(--s-footer-small-logo-h); }
.footer-social.is-small a { width: var(--s-touch-sm); height: var(--s-touch-sm); }
@media (max-width: 760px) {
  .footer-slim { flex-direction: column; text-align: center; }
  .footer-slim .footer-inline { justify-content: center; }
  .footer-slim .footer-copy { margin-inline-start: 0; }
}

/* Only the copyright is visible: one centred line */
.site-footer.ftr-copyright-only { margin-top: var(--s-space-8); }
.footer-line { padding-block: var(--s-space-4); text-align: center; font-size: var(--s-text-sm); }
.footer-line .footer-copy { display: block; }

/* ---------- Admin preview (inside the control panel iframe) ---------- */
body.is-preview a, body.is-preview form button[type="submit"] { cursor: default; }
