/* Light and dark switch, the same on every Gravita site. Same look as the Share button; uses the host page's tokens. */
.gtheme-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px;border:1px solid var(--line,rgba(12,24,68,.16));border-radius:999px;background:transparent;color:var(--text,#0C1844);font:inherit;font-size:17px;font-weight:700;white-space:nowrap;cursor:pointer;flex:none}
.gtheme-btn:hover{border-color:var(--accent,#2A4BB0);color:var(--accent-text,var(--accent,#2A4BB0))}
.gtheme-btn:focus-visible{outline:3px solid var(--focus,#2A4BB0);outline-offset:2px}
.gtheme-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the button shows what a tap does: a moon and "Dark" in the light theme, a sun and "Light" in the dark theme */
.gtheme-btn .i-sun,.gtheme-btn[data-next="light"] .i-moon{display:none}
.gtheme-btn[data-next="light"] .i-sun{display:block}
.gtheme-btn .gtheme-t:empty{display:none}
/* icon only (the name is still read out): narrow headers, laptop widths and phones */
.gtheme-icon,.gtheme-btn.is-icon{width:44px;padding:0;justify-content:center;gap:0}
.gtheme-icon .gtheme-t,.gtheme-btn.is-icon .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* gravitatech.com, apps and the demo gallery: one button in the menu row on wide screens, one beside the menu button up to 960 px */
.theme-narrow{display:none;margin-left:auto}
.theme-narrow + .share-narrow{margin-left:0}
@media (max-width:960px){.theme-narrow{display:inline-flex}.theme-wide{display:none}}
@media (min-width:961px) and (max-width:1279px){.theme-wide{width:44px;padding:0;justify-content:center;gap:0}.theme-wide .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:600px){.theme-narrow{width:44px;padding:0;justify-content:center;gap:0}.theme-narrow .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* apps.gravitatech.com headers with no menu (Sign a PDF, PDF Tools): one button beside Share, icon only on phones as Share is */
@media (max-width:600px){.gtheme-compact{width:44px;padding:0;justify-content:center;gap:0}.gtheme-compact .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* apps.gravitatech.com headers with no menu (Sign a PDF, PDF Tools), measured 1 Nov 2026: logo, All apps, language, switch and
   Share need about 290 px, a 360 px phone has about 200. Up to 960 px the switch and Share show their icons only; up to 760 px
   the buttons take a second row under the logo, so every word stays whole; the logo keeps the phone size of the other apps
   pages (54 px tall, 165 px wide; the brand sheet asks for at least 160 px). */
@media (max-width:960px){.hdr-end .gtheme-compact,.hdr-end:has(.gtheme-compact) .gshare-compact{width:44px;padding:0;justify-content:center;gap:0}.hdr-end .gtheme-compact .gtheme-t,.hdr-end:has(.gtheme-compact) .gshare-compact .gshare-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:760px){.site-header .wrap:has(.hdr-end .gtheme-compact){flex-wrap:wrap;row-gap:12px;padding-block:12px}.site-header .hdr-end:has(.gtheme-compact) .all-apps{margin-right:auto}.site-header .wrap:has(.hdr-end .gtheme-compact) .brand img{width:auto!important;height:54px!important;min-width:0!important}.site-header .hdr-end:has(.gtheme-compact){flex:1 0 100%;margin-left:0;justify-content:flex-end}}
/* apps.gravitatech.com headers with the menu and "All apps" (QR Generator, LookLook): the row is full at every width, in English
   and Indonesian, so the switch shows its icon only (its name is still read out), as Share does there up to 1499 px */
.site-header:has(.all-apps):has(.nav) .gtheme-btn[data-theme-toggle]{width:44px;padding:0;justify-content:center;gap:0}
.site-header:has(.all-apps):has(.nav) .gtheme-btn[data-theme-toggle] .gtheme-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* QR Generator and LookLook on phones under 420 px: logo, All apps, switch, Share and the menu button need 373 px and the row
   has 358 at 390 px, so the buttons were squeezed to half width (measured 1 Nov 2026). Two rows: logo and menu button, then
   All apps with its word at the left (the second row has room for it), the switch and Share at the right; the menu sheet
   opens under the taller header. */
@media (max-width:419px){
  .site-header:has(.all-apps):has(.nav) .wrap{flex-wrap:wrap;row-gap:12px;padding-block:12px}
  .site-header:has(.all-apps):has(.nav) .wrap::after{content:"";flex-basis:100%;order:2}
  .site-header:has(.all-apps):has(.nav) .menu-toggle{order:1;margin-left:auto}
  .site-header:has(.all-apps):has(.nav) .all-apps{order:3;margin:0 auto 0 0;width:auto;padding:0 14px 0 10px}
  .site-header:has(.all-apps):has(.nav) .all-apps span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .site-header:has(.all-apps):has(.nav) .theme-narrow,.site-header:has(.all-apps):has(.nav) .share-narrow{order:3;margin-left:0}
  .site-header:has(.all-apps):has(.nav) .nav{top:100%}
}
/* room for the switch in the header (measured 1 Nov 2026 on 6 pages at 360 to 1440 px):
   menu names never break in two; the buttons sit closer together; on small phones Share shows its icon only too */
.site-header .nav li a{white-space:nowrap}
/* the header's backdrop blur makes it the frame of the phone menu sheet; when a window is widened past 960 px Chrome kept the
   sheet's old width as header overflow, so the page scrolled sideways (found 1 Nov 2026, also on the live site before the switch).
   Clipping sideways only keeps the sheet's downward drop; the Share menu sits in the page body, not in the header. */
.site-header{overflow-x:clip}
@media (max-width:600px){.site-header:has(.theme-narrow) .wrap{gap:8px}}
@media (max-width:420px){.site-header:has(.theme-narrow) .share-narrow{width:44px;padding:0;justify-content:center;gap:0;font-size:0}.site-header:has(.theme-narrow) .share-narrow svg{width:20px;height:20px}}
@media (min-width:961px) and (max-width:1199px){.site-header:has(.theme-wide) .wrap{gap:12px}.site-header:has(.theme-wide) .nav,.site-header:has(.theme-wide) .nav ul{gap:8px}.site-header:has(.theme-wide) .nav li a{font-size:17px}.site-header:has(.theme-wide) .brand img{width:150px!important;height:auto!important}}
@media (min-width:1200px){.site-header:has(.theme-wide) .nav,.site-header:has(.theme-wide) .nav ul{gap:16px}}
/* apps headers with "All apps" (last, so they win over the rules above): 961 to 1023 px, gaps of 8 px and a slimmer language
   button; from 1200 px, 16 px between the header parts; from 1500 px Share stays an icon as it is below 1500 (its name is still
   read out), because the English row ran 21 px past the content edge with its word (measured 1 Nov 2026) */
@media (min-width:961px) and (max-width:1023px){.site-header:has(.all-apps) .wrap,.site-header:has(.all-apps) .nav,.site-header:has(.all-apps) .nav ul{gap:8px}.site-header:has(.all-apps) .nav ul{gap:6px}.site-header:has(.all-apps) .nav .lang{padding-inline:10px}}
@media (min-width:1200px){.site-header:has(.all-apps) .wrap{gap:16px}}
@media (min-width:1500px){.site-header:has(.all-apps) .share-wide{width:44px;padding:0;justify-content:center;gap:0}.site-header:has(.all-apps) .share-wide .gshare-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}