/*
  Responsive tweaks for header logo/button and footer logo.
  - Desktop: logo left, button right
  - Mobile: logo and button centered, stacked vertically
  - Footer logo responsive across breakpoints
*/

/* Header: logo scales between 36px and 60px in height */
.header-with-sky #logo {
  height: clamp(36px, 8vw, 60px);
  width: auto;
  max-width: 100%;
  display: block;
}

/* Header: CTA button scales and avoids overflow */
.header-with-sky .custom-btn {
  font-size: clamp(12px, 2.2vw, 16px);
  padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2.2vw, 18px);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}

/* Provide a tiny gap between columns to avoid visual squeeze */
.header-with-sky .container > .row {
  row-gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Keep header fully visible with notches and above other UI */
.header-with-sky {
  /* Respect iOS/Android notch area so the logo never gets clipped */
  padding-top: calc(15px + env(safe-area-inset-top)) !important;
  padding-bottom: 15px !important;
  /* Ensure header stays above any ribbons/banners */
  z-index: 1050 !important;
}

/* MOBILE: Layout centré vertical (logo en haut, bouton en bas) */
@media (max-width: 991.98px) {
  /* Empêcher tout scroll horizontal sur mobile */
  html, body { overflow-x: hidden; }

  .header-with-sky .container > .row {
    /* Sur mobile: logo centré, bouton masqué */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px !important;
    row-gap: 8px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Sécuriser les paddings pour éviter les dépassements */
  .header-with-sky .container { padding-left: 12px; padding-right: 12px; overflow: hidden; }
  .header-with-sky .container > .row { margin-left: 0; margin-right: 0; }
  
  .header-with-sky .container > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px !important;
  }
  
  /* Logo parfaitement centré */
  .header-with-sky .container > .row > [class*="col-"]:first-child {
    order: 1;
    justify-content: center !important;
  }
  
  .header-with-sky .container > .row > [class*="col-"]:first-child a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  /* Ensure the CTA container centers its content too */
  .header-with-sky .container > .row > [class*="col-"]:last-child a { display: none; }
  
  /* Bouton centré et plus grand sur mobile */
  .header-with-sky .container > .row > [class*="col-"]:last-child { display: none !important; }
  
  #logo {
    height: 50px !important;
    max-height: 50px !important;
    margin: 0 auto;
  }
  
  .custom-btn {
    font-size: 13px !important; /* réduit légèrement */
    padding: 10px 20px !important; /* réduit légèrement */
    white-space: normal !important; /* autoriser la coupure de ligne dans le bouton */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
  }
}

/* Footer: All Indonesia logo scales responsively */
.ai-footer-logo {
  width: clamp(160px, 30vw, 360px);
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Slightly smaller on very narrow devices */
@media (max-width: 375px) {
  .ai-footer-logo {
    width: clamp(140px, 45vw, 240px);
  }
}

/* Très petits écrans */
@media (max-width: 575.98px) {
  .header-with-sky .container > .row {
    min-height: 100px !important;
    row-gap: 10px;
  }
  
  #logo {
    height: 46px !important; /* réduit encore un peu sur très petits écrans */
    max-height: 46px !important;
  }
  
  .custom-btn {
    font-size: 12px !important;
    padding: 9px 18px !important;
  }

  /* Ajoute un peu d'espace latéral au contenu principal sur mobile
     sans impacter le main interne du header */
  body > main {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Forcer le retour à la ligne des textes trop longs pour éviter
     qu'ils collent aux bords ou génèrent un scroll horizontal */
  body > main p,
  body > main li,
  body > main h1,
  body > main h2,
  body > main h3,
  body > main h4,
  body > main h5,
  body > main h6 {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

@media (max-width: 400px) {
  .header-with-sky .container > .row {
    min-height: 95px !important;
  }
  
  #logo {
    height: 44px !important; /* garde lisible mais évite l'overflow */
    max-height: 44px !important;
  }
  
  .custom-btn {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }
}