/* Ginfo preview header: warm neutral, forest green and muted gold. */
#gh-header{font:14px/1.4 Arial,sans-serif;color:#263f36;background:#f3f1ea;border-bottom:1px solid #d6ddd6;position:relative}
#gh-header *{box-sizing:border-box}
#gh-header a{text-decoration:none;color:inherit}
#gh-header button,#gh-header input{font:inherit}
#gh-header svg{flex-shrink:0}
#gh-header .gh-top{display:flex;align-items:center;gap:28px;padding:20px 26px}
#gh-header .gh-brand{display:flex;align-items:center;flex-shrink:0;height:44px}
#gh-header .gh-wordmark{display:block;color:#263f36;font:700 36px/1 Arial,sans-serif;letter-spacing:-1.5px;white-space:nowrap}
#gh-header .gh-initial{color:#ffc600;font-family:Verdana,Arial,sans-serif;font-weight:700}
#gh-header .gh-domain{color:#7b847c;font-size:26px;font-weight:400;letter-spacing:-1px}
#gh-header .gh-location{display:flex;align-items:center;gap:14px;min-width:0;position:relative;top:4px}
#gh-header .gh-city{display:flex;align-items:center;gap:5px;max-width:230px;font-weight:600;line-height:1.2}
#gh-header .gh-city>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gh-header .gh-city>svg{width:16px;height:16px;color:#7a8b7f}
#gh-header .gh-city>svg:last-child{width:13px;height:13px}
#gh-header .gh-weather{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#718075;font-size:13px}
#gh-header .gh-weather svg{width:17px;height:17px}
#gh-header .gh-search{display:flex;align-items:center;flex:1;min-width:120px;max-width:350px;margin:0 0 0 auto;padding:4px 5px 4px 14px;border:1px solid #d4dad2;background:#fff;border-radius:7px}
#gh-header .gh-search input{background:transparent;border:0;outline:0;min-width:0;width:100%;padding:6px 0;color:#263f36;box-shadow:none;font-size:15px}
#gh-header .gh-search input::placeholder{color:#808a80}
#gh-header .gh-search:focus-within{border-color:#718c7b;box-shadow:0 0 0 3px #718c7b1a}
#gh-header .gh-search button{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;padding:0;background:transparent;color:#496754;border:0;border-radius:4px;cursor:pointer}
#gh-header .gh-search button:hover{background:#edf1eb}
#gh-header #gh-nav{display:flex;align-items:stretch;gap:4px;background:#263f36;padding:9px 24px}
#gh-header #gh-nav a{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px;border-radius:5px;font-size:14px;font-weight:400;white-space:nowrap;color:#edf0e9}
#gh-header #gh-nav a svg{width:19px;height:19px;color:#aabbad}
#gh-header #gh-nav a:hover{background:#ffffff12;color:#fff}
#gh-header #gh-nav a:hover svg{color:#ded2aa}
#gh-header #gh-nav a[aria-current]{background:#e8c98a;color:#283d31;font-weight:600}
#gh-header #gh-nav a[aria-current] svg{color:#536144}
#gh-header .gh-toggle{display:none}
#gh-header a:focus-visible,#gh-header button:focus-visible{outline:2px solid #ba963b;outline-offset:3px;border-radius:5px}
@media(max-width:760px){
 #gh-header .gh-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px 14px;padding:16px}
 #gh-header .gh-location{justify-self:end;gap:8px}
 #gh-header .gh-city{max-width:150px;font-size:13px}
 #gh-header .gh-weather{font-size:12px}
 #gh-header .gh-search{grid-column:1;max-width:none;width:100%;margin:0;padding-left:10px}
 #gh-header .gh-search input{font-size:16px}
 #gh-header .gh-toggle{display:flex;align-items:center;justify-content:center;gap:6px;align-self:stretch;background:#263f36;border:1px solid #263f36;border-radius:7px;padding:0 12px;color:#fff;cursor:pointer}
 #gh-header .gh-toggle[aria-expanded=true]{background:#e8c98a;border-color:#caab6e;color:#283d31}
 #gh-header #gh-nav{display:grid;grid-template-columns:1fr 1fr;padding:10px 12px;gap:5px}
 #gh-header.gh-interactive #gh-nav{display:none}
 #gh-header.gh-interactive:has(.gh-toggle[aria-expanded=true]) #gh-nav{display:grid}
 #gh-header #gh-nav a{justify-content:flex-start;padding:12px 10px;font-size:13px;gap:7px}
 #gh-header #gh-nav a:last-child{grid-column:1/-1}
}
@media(max-width:380px){
 #gh-header .gh-top{padding:13px 12px;gap:12px 8px}
 #gh-header .gh-brand{height:36px}#gh-header .gh-wordmark{font-size:30px}#gh-header .gh-domain{font-size:22px}
 #gh-header .gh-location{gap:6px;top:3px}#gh-header .gh-city{max-width:102px;font-size:12px}
 #gh-header .gh-toggle{padding:0 10px}#gh-header .gh-toggle span{display:none}
}

/* Palette taken from the original Ginfo header. */
#gh-header{background:#0c2108;color:#fff;border-bottom-color:#848b83}
#gh-header .gh-top{background:linear-gradient(135deg,#46694d 0%,#294c35 55%,#183723 100%)}
#gh-header .gh-wordmark,#gh-header .gh-domain{color:#fff}
#gh-header .gh-city,#gh-header .gh-city>svg{color:#d8c173}
#gh-header .gh-weather{color:#eee}
#gh-header .gh-search{background:#fff;border-color:#fff}
#gh-header .gh-search input{color:#0c2108}
#gh-header .gh-search input::placeholder{color:#848b83}
#gh-header .gh-search button{color:#4b6c45}
#gh-header .gh-search button:hover{background:#4b6c45;color:#fff}
#gh-header .gh-search:focus-within{border-color:#ffc600;box-shadow:0 0 0 3px #ffc60026}
#gh-header #gh-nav{background:#0c2108}
#gh-header #gh-nav a{color:#fff}
#gh-header #gh-nav a svg{color:#d8c173}
#gh-header #gh-nav a:hover,#gh-header #gh-nav a:hover svg{color:#ffc600}
#gh-header #gh-nav a[aria-current]{background:#ffc600;color:#0c2108}
#gh-header #gh-nav a[aria-current] svg{color:#4b6c45}
#gh-header a:focus-visible,#gh-header button:focus-visible{outline-color:#ffc600}
#gh-header .gh-toggle{background:#4b6c45;border-color:#848b83;color:#fff}
#gh-header .gh-toggle[aria-expanded=true]{background:#ffc600;border-color:#ffc600;color:#0c2108}

/* Original typography and the requested white row divider. */
#gh-header{font-family:"Blogger Sans","Trebuchet MS",Helvetica,Arial,sans-serif;border-radius:0 0 8px 8px;overflow:hidden}
#gh-header .gh-wordmark{font-family:inherit;font-size:34px;font-weight:700;letter-spacing:normal}
#gh-header .gh-domain{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal}
#gh-header .gh-city,#gh-header .gh-weather{font-size:14px;font-weight:400}
#gh-header #gh-nav{border-top:1px solid #b8c1b5}
#gh-header #gh-nav a,#gh-header #gh-nav a[aria-current]{font-family:inherit;font-size:16px;font-weight:500}
#gh-header .gh-search input{font-family:Arial,sans-serif;font-size:14px}
@media(max-width:760px){#gh-header #gh-nav a,#gh-header #gh-nav a[aria-current]{font-size:15px}#gh-header .gh-search input{font-size:16px}}
@media(max-width:380px){#gh-header .gh-wordmark{font-size:25px}#gh-header .gh-city,#gh-header .gh-weather{font-size:13px}}

#gh-header .gh-wordmark{text-shadow:1px 1px 3px #000}

#gh-header .gh-city{color:#ffc600}

#gh-header .gh-city,#gh-header .gh-weather{text-shadow:1px 1px 3px #000}

#gh-header .gh-weather svg{filter:drop-shadow(1px 1px 2px #000)}

#gh-header .gh-city>svg{filter:drop-shadow(1px 1px 2px #000)}

#gh-header #gh-nav a[aria-current] svg{color:inherit}

/* Mobile: collapse the entire header to the brand and menu control. */
@media(max-width:760px){
 #gh-header .gh-top{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:10px 16px}
 #gh-header .gh-brand{grid-column:1;grid-row:1;height:40px}
 #gh-header .gh-wordmark{font-size:27px}
 #gh-header .gh-domain{font-size:inherit}
 #gh-header .gh-toggle{grid-column:2;grid-row:1;min-height:40px;padding:0 10px;background:transparent;border-color:transparent;color:#fff;border-radius:4px}
 #gh-header .gh-toggle span{display:inline}
 #gh-header .gh-toggle[aria-expanded=true]{background:#ffffff18;border-color:#ffffff30;color:#fff}
 #gh-header .gh-location{grid-column:1/-1;grid-row:2;justify-self:start;top:0;gap:14px}
 #gh-header .gh-city{max-width:calc(100vw - 120px);font-size:14px}
 #gh-header .gh-weather{font-size:14px}
 #gh-header .gh-search{grid-column:1/-1;grid-row:3}
 #gh-header.gh-interactive:not(:has(.gh-toggle[aria-expanded=true])) .gh-location,
 #gh-header.gh-interactive:not(:has(.gh-toggle[aria-expanded=true])) .gh-search{display:none}
}

@media(max-width:760px){#gh-header{border-radius:0}}

/* Compact spacing, keeping the established typography and mobile collapse. */
#gh-header .gh-top{padding:7px 20px;gap:22px}
#gh-header .gh-brand{height:38px}
#gh-header .gh-search{padding:0 3px 0 11px;max-width:320px}
#gh-header .gh-search button{width:28px;height:28px}
#gh-header .gh-search input{padding:4px 0}
#gh-header #gh-nav{padding:8px 18px;gap:3px}
#gh-header #gh-nav a{padding:4px 12px;gap:7px}
@media(max-width:760px){
 #gh-header .gh-top{padding:4px 12px;gap:9px}
 #gh-header .gh-brand{height:40px}
 #gh-header .gh-toggle{min-height:40px}
 #gh-header .gh-search{max-width:none;margin-bottom:4px;padding:1px 4px 1px 10px}
 #gh-header .gh-search button{width:30px;height:30px}
 #gh-header #gh-nav{padding:9px 8px;gap:3px}
 #gh-header #gh-nav a{padding:7px 10px;min-height:36px}
}

#gh-header .gh-city,#gh-header .gh-weather{border-radius:3px}
#gh-header .gh-city:hover,#gh-header .gh-weather:hover,
#gh-header .gh-city:focus-visible,#gh-header .gh-weather:focus-visible{background:#ffffff18;box-shadow:0 0 0 5px #ffffff18}

/* Align the first menu icon with the logo, including without an active background. */
@media(min-width:761px){#gh-header #gh-nav{padding-left:8px}}

/* Compensate the active first item background on desktop. */
@media(min-width:761px){#gh-header #gh-nav:has(>a:first-child[aria-current]){padding-left:20px}}

/* Match the vertical offset of the city and weather row. */
@media(min-width:761px){#gh-header .gh-search{position:relative;top:4px}}

/* Compact search: balanced text and a quiet inset search control. */
#gh-header .gh-search{height:28px;padding:0 0 0 6px;background:#071c1460;border:1px solid #ffffff70;border-radius:5px;overflow:hidden}
#gh-header .gh-search input{height:26px;padding:0;line-height:normal;color:#fff}
#gh-header .gh-search input::placeholder{color:#ffffff99;opacity:1}
#gh-header .gh-search button{width:26px;height:26px;border-radius:0;background:transparent;color:#ffc600}
#gh-header .gh-search button svg{width:18px;height:18px}
#gh-header .gh-search button:hover{background:#ffffff18;color:#ffc600}
#gh-header .gh-search:focus-within{background:#071c1445;border-color:#ffffffc4;box-shadow:0 0 0 2px #ffffff0c}
@media(max-width:760px){
 #gh-header .gh-search{height:34px}
 #gh-header .gh-search input,#gh-header .gh-search button{height:32px}
 #gh-header .gh-search button{width:30px}
}

@media(min-width:761px){#gh-header .gh-search input{font-size:13px}}

#gh-header .gh-city>svg{color:inherit}
