/* GeckoFlag: shared nav + footer styles (sub-pages, i.e. all pages except index.html) */

/* ---------- NAV ---------- */

  .top-nav { width: 100%; background: var(--gf-panel); padding: 14px 0; position: sticky; top: 0; z-index: 20; }
  .top-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
  .brand img { width: 72px; height: 72px; }
  .brand-title {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    background: linear-gradient(90deg, #4CAF6D 0%, #2FA88A 50%, #1E7FBF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .nav-right { display: flex; align-items: center; gap: 14px; position: relative; }
  .menu-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 44px; height: 44px; border: none; border-radius: 10px;
    background: var(--gf-panel); box-shadow: var(--shadow-card); cursor: pointer;
    transition: box-shadow 0.2s ease; flex-shrink: 0;
  }
  .menu-toggle:hover { box-shadow: var(--shadow-raised); }
  .menu-toggle-bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--gf-text); transition: transform 0.25s ease, opacity 0.2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 220px;
    background: var(--gf-surface); border-radius: 16px; box-shadow: var(--shadow-raised-lg);
    padding: 10px; display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 30;
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; color: var(--gf-text); transition: background 0.15s ease, color 0.15s ease; }
  .nav-menu a svg { width: 18px; height: 18px; stroke: var(--gf-brand); flex-shrink: 0; }
  .nav-menu a:hover { background: var(--gf-panel); color: var(--gf-brand-dark); }
  .lang-switch { display: flex; background: var(--gf-panel); border-radius: 10px; box-shadow: var(--shadow-inset); padding: 3px; gap: 2px; }
  .lang-switch button {
    border: none; background: transparent; padding: 6px 12px; font-size: 0.85rem; font-weight: 600;
    font-family: 'Inter', sans-serif; color: var(--gf-text-muted); border-radius: 8px; cursor: pointer; transition: all 0.15s ease;
  }
  .lang-switch button.active { background: var(--gf-surface); color: var(--gf-brand-dark); box-shadow: var(--shadow-card); }
  .lang-select {
    appearance: none; -webkit-appearance: none; background: var(--gf-panel); border: none; border-radius: 10px;
    padding: 10px 38px 10px 38px; font-size: 0.9rem; font-weight: 600; font-family: 'Inter', sans-serif;
    color: var(--gf-text); box-shadow: var(--shadow-inset); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat; background-position: left 14px center, right 14px center;
  }
  .lang-select:focus { outline: none; box-shadow: inset 6px 6px 12px rgba(163,177,198,.65), inset -6px -6px 12px rgba(255,255,255,.95); }

  @media (max-width: 600px) {
    .top-nav .wrap { gap: 8px 10px; flex-wrap: wrap; padding-left: 16px; padding-right: 16px; }
    .brand { gap: 8px; }
    .brand-title { font-size: 2rem; }
    .nav-right { gap: 8px; }
    .lang-select { padding: 8px 28px 8px 32px; font-size: 0.8rem; background-position: left 10px center, right 10px center; }
    .menu-toggle { width: 38px; height: 38px; }
    .nav-menu { min-width: 190px; }
  }

/* ---------- FOOTER ---------- */

  footer { background: var(--gf-surface); padding: 56px 0 40px; }
  footer .wrap { display: flex; flex-direction: column; gap: 28px; }
  .footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
  .footer-brand { display: flex; align-items: center; gap: 14px; }
  .footer-brand img { width: 72px; height: 72px; }
  .footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; color: var(--gf-text-muted); }
  .footer-links a { display: inline-flex; align-items: center; gap: 8px; }
  .footer-links a svg { width: 16px; height: 16px; stroke: var(--gf-brand); flex-shrink: 0; }
  .footer-links a:hover { color: var(--gf-brand); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--gf-border); padding-top: 24px; font-size: 0.82rem; color: var(--gf-text-muted); }

  @media (max-width: 499px) {
    .brand img, .footer-brand img { width: 32px; height: 32px; }
    .brand-title { font-size: 1.4rem; }
  }


  .footer-bottom .lang-select { margin-left: auto; }

  /* iPhone SE (1st gen) and other 320px-wide screens: keep logo, language and menu on one row */
  @media (max-width: 359px) {
    .top-nav .wrap { padding-left: 12px; padding-right: 12px; gap: 6px; flex-wrap: nowrap; }
    .brand { gap: 6px; min-width: 0; }
    .brand-title { font-size: 1.1rem; }
    .nav-right { gap: 6px; }
    .lang-select { padding: 7px 22px 7px 28px; font-size: 0.75rem; background-position: left 8px center, right 6px center; }
    .menu-toggle { width: 34px; height: 34px; }
  }

  /* Narrow phones (iPhone SE, small Android): never wrap; shrink logo text with viewport width */
  @media (max-width: 499px) {
    .top-nav .wrap { flex-wrap: nowrap; }
    .brand { min-width: 0; flex-shrink: 1; }
    .brand img { flex-shrink: 0; }
    .brand-title { font-size: clamp(1rem, 5.4vw, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: clip; }
    .nav-right { flex-shrink: 0; }
  }

  /* Footer: review badges row (between .footer-top and .footer-bottom) */
  .footer-middle { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; font-weight: 600; color: var(--gf-text-muted); }
  .footer-middle a:hover { color: var(--gf-brand); }
  @media (max-width: 860px) {
    .footer-middle { justify-content: flex-start; }
  }