/*
Theme Name: Bypass-Geneve
Description: Custom theme for bypass-geneve.ch
Author: Redaktion
Version: 1.0
*/

:root{
  --ink:#151312; --body-text:#2b2926; --paper:#ffffff; --muted:#6b665f;
  --line:#e4e0d9; --mark:#1f3a3a; --mark-2:#c9a44c; --maxw:900px; --maxw-text:70ch;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--body-text);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.75; font-size:clamp(1rem, 0.94rem + 0.3vw, 1.08rem);
}
h1,h2,h3,.site-title,nav.main a,.btn,.tag{ font-family:"Segoe UI",Arial,sans-serif; }
a{ color:var(--mark); }
img{ max-width:100%; height:auto; display:block; }

header.site{ border-bottom:1px solid var(--line); padding: 1rem 1.25rem; position:relative; }
.header-row{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand svg{ width:34px; height:34px; flex:none; }
/* Logo colors read the SAME two variables as everything else on the site — one central
   place (:root above) controls the logo, the FAQ icon below, nav highlights, etc. */
.logo-ring{ fill:none; stroke:var(--mark); stroke-width:1.4; }
.logo-tick{ stroke:var(--mark); stroke-width:1.3; }
.logo-diamond{ fill:var(--mark-2); }
.logo-dot{ fill:var(--mark); }
.site-title{ font-size:1.25rem; font-weight:700; margin:0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-title a{ color:inherit; text-decoration:none; }

#nav-toggle{ display:none; }
.nav-toggle-label{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; border-radius:4px; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
  content:""; display:block; position:relative; width:22px; height:2px; background:var(--ink);
}
.nav-toggle-label span::before{ position:absolute; top:-7px; }
.nav-toggle-label span::after{ position:absolute; top:7px; }

/* Mobile: nav.main is a small floating card centered under the header — it
   overlays the page (position:fixed) instead of pushing content down or
   covering the screen. Centered (not right-aligned) because a right-aligned
   calc()/vw-based offset proved unreliable in testing; centering sidesteps
   that entirely and reads just as clean. */
nav.main{
  position:fixed; top:64px; left:50%;
  transform:translateX(-50%) translateY(-6px) scale(0.98);
  width:230px; max-width:calc(100vw - 2.5rem);
  margin:0 auto; flex-basis:auto; display:none; flex-direction:column;
  max-height:min(70vh, 420px); overflow-y:auto; overflow-x:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(21,19,18,0.18); padding:0.4rem;
  opacity:0; pointer-events:none; transition:opacity 0.16s ease, transform 0.16s ease;
  z-index:60;
}
#nav-toggle:checked ~ nav.main{
  display:flex; opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
nav.main a{ display:flex; align-items:center; min-height:44px; padding:0 0.6rem; font-size:0.95rem; text-decoration:none; color:var(--ink); border-bottom:none; border-radius:6px; min-width:0; white-space:normal; line-height:1.3; }
nav.main a[aria-current="page"]{ color:var(--mark); font-weight:600; }
nav.main a:active, nav.main a:focus-visible{ background:var(--mark); color:#fff; outline:none; }
.nav-item-group{ display:flex; align-items:center; gap:0.6rem; min-height:44px; padding:0 0.6rem; border-bottom:none; border-radius:6px; flex-wrap:wrap; }
.nav-item-group a{ border-bottom:none !important; min-height:auto !important; padding:0 !important; }
.nav-item-group a:active, .nav-item-group a:focus-visible{ background:var(--mark); color:#fff; border-radius:6px; }
.lang-switch{ display:flex; align-items:center; gap:0.3rem; font-family:"Segoe UI",sans-serif; font-size:0.85rem; }
.lang-switch a{ display:inline; min-height:auto; padding:0; border-bottom:none; }
.lang-sep{ color:var(--muted); }
.lang-hint{ margin-left:0.4rem; font-size:0.72rem; color:var(--muted); font-weight:400; white-space:nowrap; }

@media (prefers-reduced-motion: reduce){ nav.main{ transition:none; } }

@media (min-width: 760px) and (min-height: 500px){
  .nav-toggle-label{ display:none; }
  nav.main{
    position:static; transform:none; opacity:1; pointer-events:auto; display:flex !important;
    flex-direction:row; align-items:center; gap:1.75rem;
    width:auto; max-width:none; max-height:none; overflow:visible;
    background:none; border:none; box-shadow:none; padding:0; margin:0;
  }
  nav.main a{ min-height:auto; padding:0; border-bottom:none; border-radius:0; }
  nav.main a:active, nav.main a:focus-visible{ background:none; color:var(--ink); }
  nav.main a[aria-current="page"]{ color:var(--mark); }
  .nav-item-group{ min-height:auto; padding:0; border-bottom:none; }
}

main.page{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 3rem; }
.meta{ font-family:"Segoe UI",sans-serif; font-size:0.78rem; color:var(--muted); margin:0 0 1rem; }
main.page h1{ font-size:clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); line-height:1.25; margin:0 0 0.8rem; color:var(--ink); max-width:26ch; }
.page-copy h2{ font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height:1.3; margin:1.8rem 0 0.8rem; color:var(--ink); font-weight:700; }
.figure-block{ width:100%; aspect-ratio:16/9; object-fit:cover; margin:0 0 1.5rem; border-radius:2px; background:#eee6da; }
.page-copy{ max-width:var(--maxw-text); }
.page-copy p{ margin:0 0 1.2rem; }
.page-copy ul, .page-copy ol{ margin:1.6rem 0 1.8rem; padding-left:1.4rem; }
.page-copy li{ margin:0 0 0.6rem; }

/* Table: card bleeds 1rem wider than the text column on both sides (matches
   cell padding) so the TEXT inside still lines up flush with headings/paragraphs
   above it, while the card visually reads as its own distinct component. */
.page-copy .table-wrap{
  overflow-x:auto; margin:1.8rem -1rem 2rem; padding:0 1rem;
  border:1px solid var(--line); border-radius:10px; background:#faf7f1;
}
.page-copy table{ width:100%; border-collapse:collapse; margin:0; font-size:0.95rem; }
.page-copy th, .page-copy td{ text-align:left; padding:0.75rem 0; border-bottom:1px solid var(--line); }
.page-copy th:not(:last-child), .page-copy td:not(:last-child){ padding-right:1rem; }
.page-copy thead th{ text-align:left; background:rgba(31,58,58,0.07); font-weight:700; color:var(--mark); font-family:"Segoe UI",Arial,sans-serif; font-size:0.85rem; letter-spacing:0.02em; text-transform:uppercase; border-bottom:2px solid var(--mark); padding-top:0.75rem; padding-bottom:0.75rem; }
.page-copy thead th:first-child{ padding-left:1rem; margin-left:-1rem; }
.page-copy tbody tr:nth-child(even){ background:rgba(31,58,58,0.03); }
.page-copy tr:last-child td{ border-bottom:none; }

/* Mobile: a 3-column table crammed into a phone width either forces
   horizontal scrolling or squashes text — stack each row into its own
   labeled block instead. Requires td[data-label] in the HTML. */
@media (max-width: 640px){
  .page-copy .table-wrap{ overflow-x:visible; margin:1.6rem 0 1.8rem; padding:0; }
  .page-copy table, .page-copy tbody, .page-copy tr, .page-copy td{ display:block; width:100%; }
  .page-copy thead{ display:none; }
  .page-copy tr{ padding:0.9rem 1rem; border-bottom:1px solid var(--line); }
  .page-copy tr:last-child{ border-bottom:none; }
  .page-copy td{ border-bottom:none; padding:0.2rem 0; }
  .page-copy td::before{
    content:attr(data-label); display:block; font-family:"Segoe UI",Arial,sans-serif;
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--mark); margin-bottom:0.15rem;
  }
}

.page-copy .fact-line{ color:var(--muted); font-size:0.92rem; margin:1.75rem 0 0; padding-top:1.25rem; border-top:1px solid var(--line); }
.faq{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:var(--maxw-text); }
.faq .faq-label{ font-family:"Segoe UI",sans-serif; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--mark); margin:0 0 1rem; }
.faq details{ border-bottom:1px solid var(--line); padding:0.9rem 0; }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:1rem; position:relative; padding-right:30px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ font-size:1rem; font-weight:600; margin:0; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; min-width:0; }
.faq details p{ margin:0.75rem 0 0; color:var(--body-text); font-size:0.98rem; }

/* FAQ toggle icon — logo mark in miniature. Shape comes from a CSS mask (two layers:
   ring+ticks, diamond); actual color comes from background-color:var(...), so it always
   matches whatever the logo currently uses. Rotates 90deg on open; the diamond additionally
   flips from gold to teal on open, both properties animate via transition. */
.faq summary::before, .faq summary::after{
  content:""; position:absolute; right:0; top:50%; width:22px; height:22px;
  transform:translateY(-50%) rotate(0deg);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:transform 0.2s ease, background-color 0.2s ease;
}
.faq summary::before{
  background-color:var(--mark);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='10' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='20' y1='30' x2='20' y2='38' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='2' y1='20' x2='10' y2='20' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='30' y1='20' x2='38' y2='20' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='10' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='20' y1='30' x2='20' y2='38' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='2' y1='20' x2='10' y2='20' stroke='%23fff' stroke-width='2.4'/%3E%3Cline x1='30' y1='20' x2='38' y2='20' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E");
}
.faq summary::after{
  background-color:var(--mark-2);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 8 L26 20 L20 32 L14 20 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 8 L26 20 L20 32 L14 20 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.faq details[open] summary::before,
.faq details[open] summary::after{ transform:translateY(-50%) rotate(90deg); }
.faq details[open] summary::after{ background-color:var(--mark); }

@media (prefers-reduced-motion: reduce){
  .faq summary::before, .faq summary::after{ transition:none; }
}
/* Mobile portrait: slightly smaller icon, tighter text-to-icon gap so long questions
   (which wrap to 2+ lines here) don't feel cramped against it. */
@media (max-width: 480px){
  .faq summary{ padding-right:26px; gap:0.75rem; }
  .faq summary::before, .faq summary::after{ width:19px; height:19px; }
}
/* Mobile landscape (short viewport height): same narrow-width fix applies, since a
   phone in landscape is width-constrained in the other axis but the FAQ column doesn't
   change width-wise here — this just keeps the icon proportionate at small heights too. */
@media (max-height: 480px) and (orientation: landscape){
  .faq summary::before, .faq summary::after{ width:18px; height:18px; }
}

.intro{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 1rem; }
.intro h1{ font-size:clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); margin:0 0 0.6rem; color:var(--ink); }
.history-teaser{ max-width:var(--maxw); margin:0 auto; padding:1.5rem 1.25rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.history-teaser .tag{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--mark); }
.history-teaser h2{ margin:0.4rem 0 0.6rem; }
.btn{ display:inline-block; margin-top:0.6rem; color:var(--mark); font-weight:600; text-decoration:none; }
main.posts{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 3rem; }
.post{ padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--line); }
.post .thumb{ aspect-ratio:16/9; object-fit:cover; border-radius:2px; margin-bottom:1rem; }
.post h2{ font-size:1.2rem; margin:0 0 0.5rem; }
.post h2 a{ color:var(--ink); text-decoration:none; }
.readmore{ font-weight:600; }

footer{ border-top:1px solid var(--line); padding:2rem 1.25rem; }
.footer-row{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; font-family:"Segoe UI",sans-serif; font-size:0.8rem; color:var(--muted); }

@media (max-height: 480px) and (orientation: landscape){
  header.site{ padding:0.5rem 1.25rem; }
  main.page{ padding:1rem 1.25rem 2rem; }
  .figure-block{ max-height:42vh; }
}
@media (max-width: 380px){
  .header-row, main.page, .footer-row, .intro, .history-teaser, main.posts{ padding-left:1rem; padding-right:1rem; }
}

/* Blog archive page — card grid, distinct from the homepage's simple stacked list */
main.blog-index{ padding-bottom:1rem; }
main.blog-index > .page-copy{ max-width:var(--maxw-text); margin-bottom:2rem; }
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:var(--maxw); }
@media (min-width: 640px){
  .blog-grid{ grid-template-columns:1fr 1fr; gap:1.75rem; }
}
.blog-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper); transition:border-color 0.15s ease; }
.blog-card:hover{ border-color:var(--mark); }
.blog-card-link{ display:block; color:inherit; text-decoration:none; }
.blog-card-thumb{ aspect-ratio:16/9; object-fit:cover; margin:0; }
.blog-card-body{ padding:1.1rem 1.25rem 1.35rem; }
.blog-card-body .meta{ margin:0 0 0.5rem; }
.blog-card-body h2{ font-size:1.05rem; line-height:1.35; margin:0 0 0.5rem; color:var(--ink); }
.blog-card-body p{ font-size:0.92rem; color:var(--body-text); margin:0 0 0.75rem; }
.blog-card-body .readmore{ font-weight:600; font-size:0.9rem; }