/*
Theme Name: Glacier Capital — Mobile
Theme URI: https://www.glaciercapital.lu
Template: glacier-capital
Author: Glacier Capital S.à r.l.
Description: Child theme of Glacier Capital. Adds the phone layout: a collapsing navigation menu, a hero that no longer overlaps its own disclaimer, a stacked investor-area header, and tap targets that meet the 44px minimum. Nothing on desktop changes.
Version: 1.0.0
Requires PHP: 7.4
License: proprietary
Text Domain: glacier-capital-mobile
*/

/* ==========================================================================
   Phone layout — everything below applies at 780px and under.
   The parent theme's own breakpoints (1000px, 800px, 640px) still do their
   work; this file only adds what was missing below tablet width.
   ========================================================================== */

/* --- the burger button: hidden by default, shown only on phones --------- */
.gc-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -4px -8px -4px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
}
.gc-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gc-nav-toggle span {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background 0.15s ease;
}
.gc-nav-toggle span::before,
.gc-nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.18s ease;
}
.gc-nav-toggle span::before { top: -7px; }
.gc-nav-toggle span::after  { top: 7px; }
.gc-header.is-open .gc-nav-toggle span { background: transparent; }
.gc-header.is-open .gc-nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.gc-header.is-open .gc-nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {

  /* --- 1. header: one row, burger on the right, menu drops beneath ------- */
  .gc-header {
    position: sticky;                 /* inherited, restated for clarity   */
    flex-direction: row;              /* parent stacks it at 640px         */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
  }
  .gc-header__logo { display: flex; align-items: center; min-height: 44px; }
  .gc-header__logo img { height: 38px; }
  .gc-nav-toggle { display: inline-flex; }

  .gc-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 4px 18px 14px;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 26px rgba(22, 50, 62, 0.10);
  }
  .gc-header.is-open .gc-nav { display: flex; }

  /* 48px rows — comfortably past the 44px minimum */
  .gc-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 16px;
    border-top: 1px solid var(--hairline);
  }
  .gc-nav a:first-child { border-top: 0; }
  .gc-nav a.gc-nav__login {
    justify-content: center;
    margin-top: 12px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent-dark);
    font-size: 15px;
  }

  /* --- 2. hero: stop the subtitle and the disclaimer colliding ----------- */
  /* The disclaimer is absolutely positioned; on a narrow screen the brand
     block below it grows past it. Give the block room and lift the note.  */
  .gc-hero__inner { padding: 26px 18px 210px; gap: 12px; }
  .gc-hero__mark  { width: 76px; }
  .gc-hero__brand { font-size: 30px; letter-spacing: 0.14em; line-height: 1.15; }
  .gc-hero__tag   { font-size: 11px; letter-spacing: 0.2em; line-height: 1.6; }
  .gc-hero__perfnote {
    bottom: 132px;
    padding: 0 18px;
    font-size: 13px;               /* was 11px — under the readable floor */
    line-height: 1.5;
  }

  /* chips were landing on the mountain mark — stack them above it instead */
  .gc-hero__chip {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    display: block;
    width: fit-content;
    margin: 0 auto 6px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
  .gc-hero__chip--rel { margin-top: 22px; }
  .gc-hero__silhouette { height: 96px; }

  /* --- 3. investor area: stack the header, fix the spilling button ------- */
  .gc-inv-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .gc-investor h1 { font-size: 26px; line-height: 1.2; }

  .gc-inv-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .gc-inv-actions > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* "Request reimbursement (within 22 working days)" was breaking into two
     columns and running 9px past the right edge, which gave the whole page
     a horizontal scrollbar. Let it use two lines instead.                 */
  /* .gc-btn is inline-flex, so the trailing <span> is a flex item: it needs
     a full-width basis on a wrapping line, not display:block, to break.   */
  .gc-inv-request {
    flex-wrap: wrap;
    min-height: 52px;
    padding: 9px 16px;
    line-height: 1.35;
  }
  .gc-inv-request span {
    flex: 0 0 100%;
    margin-left: 0 !important;
    font-size: 13px;
  }
  .gc-inv-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  /* --- 4. tap targets elsewhere ----------------------------------------- */
  .gc-contact__item a,
  .gc-letter,
  .gc-pdf-card { min-height: 48px; }
  .gc-contact__item { align-items: flex-start; }
  .gc-contact__item span { line-height: 1.5; }

  /* --- 5. belt and braces: nothing may scroll sideways ------------------- */
  html, body { overflow-x: hidden; }

  /* --- 6. odds and ends ------------------------------------------------- */
  .gc-page { padding: 36px 0; }
  .gc-pillars { padding: 56px 0 48px; }
  .gc-section-head h2 { font-size: 24px; }
  .gc-inv-tile__num { font-size: 24px; }
  .gc-footer { padding: 22px 18px; gap: 8px; }
}

/* Very narrow phones (360px and under) — keep the wordmark on one line. */
@media (max-width: 380px) {
  .gc-hero__brand { font-size: 25px; letter-spacing: 0.1em; }
  .gc-hero__inner { padding-bottom: 240px; }
}