/* Responsive tweaks (mobile header layout)
   - Keeps logo + auth + language on the top row
   - Moves primary CTAs (Publish buttons) to a second row on mobile
   - Prevents horizontal scrolling on small screens
*/

@media (max-width: 768px){
  /* Safety: prevent any accidental horizontal overflow on small screens */
  html, body{ overflow-x: hidden; }
  /* Allow header content to wrap instead of forcing horizontal scroll */
  .gh-header .max-w-6xl{
    flex-wrap: wrap;
  }

  /* Auth row (Login/Register/Panel/Salir + language) stays on the first row */
  .gh-header .gh-header-auth{
    margin-left: auto;
    order: 2;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  

/* Tighten + align auth (Ingresar/Registrarse + EN) on real devices */
.gh-header .max-w-6xl{
  align-items: center;     /* alinea verticalmente con el logo */
  gap: .5rem;              /* reduce “aire” general entre bloques */
}

.gh-header .gh-header-auth{
  display: flex;
  align-items: center;
  gap: .5rem;              /* reduce separación entre Ingresar / Registrarse / EN */
}

/* Reduce padding / font-size ONLY for the auth links/buttons */
.gh-header .gh-header-auth a,
.gh-header .gh-header-auth button{
  padding: .25rem .35rem;
  font-size: .9rem;
  line-height: 1.1;
}
/* CTA row becomes full width under the first row */
  .gh-header .gh-header-cta{
    order: 3;
    width: 100%;
    margin-left: 0; /* override ml-auto */
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
  }

  /* Make the two primary actions share the CTA row */
  .gh-header .gh-header-cta > a.gh-btn-primary,
  .gh-header .gh-header-cta > a.gh-btn-outline{
    flex: 1 1 calc(50% - .5rem);
    justify-content: center;
    text-align: center;
    min-width: 0;
    white-space: normal; /* allow wrap on very small screens */
  }

  /* Slightly tighter buttons in header on small screens */
  .gh-header .gh-btn{
    padding: .5rem .8rem;
    font-size: .95rem;
  }

  /* Single (entry) header: avoid ultra-narrow titles on mobile.
     On small screens, stack the action buttons under the title. */
  .gh-single-header{
    flex-direction: column;
    align-items: stretch;
  }

  .gh-single-actions{
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .gh-single-actions .gh-btn{
    flex: 1 1 calc(50% - .5rem);
    justify-content: center;
    min-width: 0;
    white-space: normal;
  }

  /* Footer menu: long ES labels should wrap nicely without causing horizontal scroll */
  .gh-footer-nav{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1.25rem;
  }

  .gh-footer-nav a{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gh-footer-copy{
    text-align: center;
  }

  /* Dashboard (user panel): make the table mobile-friendly and align action buttons */
  .gh-dashboard table thead{ display:none; }
  .gh-dashboard table,
  .gh-dashboard table tbody,
  .gh-dashboard table tr,
  .gh-dashboard table td{
    display:block;
    width:100%;
  }

  .gh-dashboard table tbody tr{
    padding: .75rem 0;
  }

  .gh-dashboard table td{
    padding: .35rem 0;
  }

  /* Buttons under each entry: 2-column grid + delete full width */
  .gh-dashboard table td .flex{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  .gh-dashboard table td .flex > a.gh-btn,
  .gh-dashboard table td .flex > button.gh-btn{
    width:100%;
    justify-content:center;
    text-align:center;
    white-space: normal;
    padding: .55rem .75rem;
  }

  .gh-dashboard table td .flex > .gh-btn-danger{
    grid-column: 1 / -1;
  }
}


/* === Dashboard: center top action buttons + tabs on mobile === */
@media (max-width: 768px){
  /* Center "Editar cuenta" + "Salir" buttons in the account summary card */
  .gh-dashboard .bg-white.border.border-slate-200.flex{
    align-items: center;
    text-align: center;
  }
  .gh-dashboard .bg-white.border.border-slate-200.flex > .sm\:ml-auto{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Center the tab chips ("Mis Grupos / Mis Perfiles") and status chips */
  .gh-dashboard .mt-5.flex.flex-wrap.gap-2,
  .gh-dashboard .mt-4.flex.flex-wrap.gap-2{
    justify-content: center;
  }
}

/* === Account modal: enable vertical scroll on mobile === */
@media (max-width: 768px){
  /* Make the OVERLAY scrollable (most reliable on mobile) */
  #gh-account-modal .absolute.inset-0.flex.items-center.justify-center.p-4{
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Respect safe-areas + keep a little breathing room */
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* The panel itself scrolls if content is taller than the viewport */
  #gh-account-modal .w-full.max-w-lg{
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem; /* ensure footer buttons are reachable */
  }
}