/* ==========================================================================
   Formium Alliance — Responsive fixes (foldables, dual-screen, tablets, phones)
   Loaded on every page after the base styles. Scoped narrowly; no !important
   unless the framework's utility classes force it.
   ========================================================================== */

/* ---------- Footer ---------- */
footer .main-container > .grid:first-of-type {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 40px 24px !important;
  padding-top: 56px;
  padding-bottom: 40px;
}
footer .main-container > .grid:first-of-type > div {
  grid-column: auto !important;
  min-width: 0;
}
/* brand takes the whole first row until there is room beside the links */
footer .main-container > .grid:first-of-type > div:first-child { grid-column: 1 / -1 !important; }

footer .main-container > .grid:first-of-type p {
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.25 !important;
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}
footer .main-container > .grid:first-of-type ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
footer .main-container > .grid:first-of-type ul > li { margin: 0 !important; }
footer .footer-link { display: inline-flex; align-items: center; min-height: 36px !important; padding: 0; overflow-wrap: break-word; }

/* 3 link columns when there is room (large phones, Fold cover, small tablets) */
@media (min-width: 560px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* all five groups on one row from unfolded-foldable width upward */
@media (min-width: 760px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 44px 24px !important; }
  footer .main-container > .grid:first-of-type > div:first-child { grid-column: 1 / -1 !important; }
}
/* brand beside the 5 columns only on genuinely wide screens */
@media (min-width: 1180px) {
  footer .main-container > .grid:first-of-type { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) !important; gap: 40px 32px !important; padding-top: 80px; }
  footer .main-container > .grid:first-of-type > div:first-child { grid-column: auto !important; }
}

/* copyright + socials: stack on small, side-by-side when wide; touch-sized icons */
footer .main-container > .grid:last-of-type { align-items: center; row-gap: 14px; }
footer .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; }
footer .footer-social-link + .footer-social-link { margin-left: 0; }
footer .main-container > .grid:last-of-type .flex.items-center.gap-4 { gap: 4px; margin-left: -10px; }
@media (min-width: 1180px) { footer .main-container > .grid:last-of-type .flex.items-center.gap-4 { margin-left: 0; margin-right: -10px; } }
footer .main-container > .grid:last-of-type p { font-size: 13px; line-height: 1.5; }

/* ---------- Small stat/benefit cards in 2-up grids (phones, Fold cover) ---------- */
@media (max-width: 479px) {
  .grid.grid-cols-2.gap-6 { gap: 14px; }
  .grid.grid-cols-2.gap-6 > .text-center.p-6 { padding: 18px 10px; min-width: 0; }
  .grid.grid-cols-2.gap-6 > .text-center.p-6 > [class*="text-heading-"] {
    font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto;
  }
}

/* ==========================================================================
   Header: compact when the page is scrolled (class toggled by the site script
   past 100px). At the top of the page nothing here applies, so it looks as
   before. Glass layers follow the box (inset: 0), so the effect is preserved.
   ========================================================================== */
/* One duration + one easing for every part of the compact transition, so nothing
   leads or lags. !important so it also beats the inline `transition` the site's
   scroll script writes. Only layout properties are listed: GSAP's own intro
   animation (opacity/filter/transform) must stay untouched. */
:root { --hdr-dur: .7s; --hdr-ease: cubic-bezier(.45, .05, .2, 1); }
header .header-six {
  transition-property: top, width, max-width, padding-top, padding-bottom, padding-left, padding-right !important;
  transition-duration: var(--hdr-dur) !important;
  transition-timing-function: var(--hdr-ease) !important;
  transition-delay: 0s !important;
}
header .header-six > .pl-3 img, header .header-six > .pl-3 figure, header .header-six nav .nav-item-link-white, header .header-six nav li,
header .header-six a[href*="login.formium.in"], header .header-six .nav-hamburger { transition: all var(--hdr-dur) var(--hdr-ease); }

header .header-six.header-six-scroll {
  top: 12px !important;
  padding-top: 7px !important; padding-bottom: 7px !important;
  width: min(100%, 320px) !important; /* width, not max-width: the site's max-width caps are !important inside a layer */
}
@media (min-width: 425px) { header .header-six.header-six-scroll { width: min(100%, 350px) !important; } }
@media (min-width: 500px) { header .header-six.header-six-scroll { width: min(100%, 410px) !important; } }
@media (min-width: 640px) { header .header-six.header-six-scroll { width: min(100%, 500px) !important; } }
@media (min-width: 768px) { header .header-six.header-six-scroll { width: min(100%, 560px) !important; } }
@media (min-width: 1024px) { header .header-six.header-six-scroll { width: min(100%, 640px) !important; } }
@media (min-width: 1280px) { header .header-six.header-six-scroll { width: min(100%, 940px) !important; } }

header .header-six.header-six-scroll > .pl-3 figure.block { max-width: 34px; }
header .header-six.header-six-scroll > .pl-3 figure.block img { height: auto !important; width: 100%; }
header .header-six.header-six-scroll nav li { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
header .header-six.header-six-scroll nav .nav-item-link-white { min-height: 32px !important; }
header .header-six.header-six-scroll nav ul { gap: 20px; }
header .header-six.header-six-scroll .nav-item-link-white { font-size: 14px !important; }
header .header-six.header-six-scroll a[href*="login.formium.in"] { min-height: 0 !important; height: 30px !important; padding-left: 14px !important; padding-right: 14px !important; font-size: 14px; }
header .header-six.header-six-scroll .nav-hamburger { width: 34px; height: 34px; }

/* ---------- Logo morph: full wordmark at the top, just the "F" when scrolled ---------- */
header .header-six > .pl-3 a { display: flex; align-items: center; }
header .header-six > .pl-3 figure.hidden {            /* wordmark */
  display: block !important; max-width: 140px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width var(--hdr-dur) var(--hdr-ease), opacity .4s ease;
  }
header .header-six > .pl-3 figure.block {             /* "F" icon (same mark as the favicon) */
  display: block !important; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width var(--hdr-dur) var(--hdr-ease), opacity .5s ease .1s;
  }
header .header-six.header-six-scroll > .pl-3 figure.hidden { max-width: 0; opacity: 0; }
header .header-six.header-six-scroll > .pl-3 figure.block { max-width: 34px; opacity: 1; }

/* ---------- Logo size: a touch larger everywhere (about +15%) ---------- */
header .header-six > .pl-3 img[src*="Main_white_logo"] { height: 30px !important; }              /* header wordmark: 26 -> 30px */
aside.sidebar .logo-icon, aside.sidebar .logo-icon img { width: 50px !important; height: 50px !important; max-width: 50px !important; } /* phone menu "F": 44 -> 50px */
footer img[src*="Main_white_logo"] { height: 42px !important; }                                    /* footer wordmark: 36 -> 42px */