/*
 * Shared site chrome: the top bar, header width and footer, loaded LAST on every public page
 * (index.php, webcams, world, travel, poll and everything built on inc/publicshell.php) so the
 * header and footer look identical everywhere. Those pages each have their own stylesheet for
 * their content; before this file existed each also had its own copy of the header/footer rules,
 * and they drifted apart (1100px vs 1260px width, 26px vs 30px footer name, different spacing).
 * Change the header/footer look HERE, not in the individual pages. Values match the homepage.
 */
header .wrap,.nav-shell .wrap,footer .wrap{max-width:1260px}

.utility{font-size:13px}
.utility .wrap{min-height:39px;gap:14px}
.utility .wrap>span:not(.date){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utility .wrap>div{flex-shrink:0;white-space:nowrap}

footer{padding:38px 0 25px}
.footer-news{border-bottom:1px solid #ffffff25;padding-bottom:30px;margin-bottom:30px}
.footer-news-head{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#a1d6fc;font-weight:bold}
.footer-news-head span{display:block;font-size:12px;letter-spacing:normal;text-transform:none;color:#8fa9bf;font-weight:normal;margin-top:6px;max-width:600px}
.footer-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:12px}
.footer-news-grid a{display:block;padding:11px 0;border-bottom:1px solid #ffffff15;text-decoration:none;color:inherit}
.footer-news-source{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#63baf3;font-weight:bold;margin-bottom:4px}
.footer-news-title{display:block;font-size:14px;line-height:1.4;color:#e2ebf3}
.footer-news-grid a:hover .footer-news-title{text-decoration:underline}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:35px;flex-wrap:nowrap}
.footer-brand{font:bold 30px/1 Georgia,serif;color:#fff}
.footer-brand small{display:block;font:12px Arial,Helvetica,sans-serif;letter-spacing:2px;margin-top:12px;color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:14px;max-width:550px;justify-content:flex-end;align-items:center}
.footer-links a,.footer-links button{color:#e2ebf3;font:14px/20px Arial,Helvetica,sans-serif;padding:0}
.footer-bottom{border-top:1px solid #ffffff30;margin-top:28px;padding-top:20px;font-size:12px;color:#bed0df;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media(max-width:750px){
  .utility .date{display:none}
  .footer-news-grid{grid-template-columns:1fr}
  .footer-top,.footer-bottom{flex-direction:column}
  .footer-links{justify-content:flex-start;gap:10px}
  .footer-links a,.footer-links button{padding:4px 0;margin-right:10px}
}

/* Logo: same size on every page at every width (the homepage's sizes). */
header .logo{width:285px;height:auto;display:block}
@media(max-width:750px){header .logo{width:215px}}
@media(max-width:600px){header .logo{width:160px}}

/* Phones: no room for the tagline beside the links, so hide it rather than cut it off. */
@media(max-width:480px){.utility .wrap>span:not(.date){display:none}.utility .wrap{justify-content:flex-end}}

/* Header buttons stay on one line. */
.masthead .btn{white-space:nowrap}

/* Masthead height (the poll page had its own shorter one). */
.masthead{min-height:149px}
@media(max-width:750px){.masthead{min-height:120px}}

/* Same side padding everywhere (the poll page used 20px). */
header .wrap,.nav-shell .wrap,footer .wrap{padding-left:28px;padding-right:28px}
@media(max-width:750px){header .wrap,.nav-shell .wrap,footer .wrap{padding-left:18px;padding-right:18px}}

/* "Advertise With Us" in the sections menu, and the button inside every story. */
.nav-links a.nav-ad{color:#ffd66b}
.nav-links a.nav-ad:hover,.nav-links a.nav-ad.active{color:#fff}
.story-ad-cta{background:#ffe9a8!important;color:#6b4a0c!important;border:1px solid #d4a017!important}
.story-ad-cta:hover{background:#ffdd7a!important}

/* Sections menu on tablets and desktops: tighter spacing so it fits on one row at normal desktop
   widths (1280px+), and a tidy wrap onto two rows below that — before this, the homepage menu pushed
   the Saved/Search buttons off the right-hand edge at 800–1100px. Phones keep their own menus. */
@media(min-width:751px){
  .nav-row{gap:8px}
  .nav-links{flex:1 1 auto;min-width:0;flex-wrap:wrap;overflow:visible}
  .nav-links>a,.nav-links>button,.nav-links .nav-drop>button{white-space:nowrap}
  .nav-tools{flex:none}
}
@media(min-width:1100px){.nav-links>a,.nav-links>button,.nav-links .nav-drop>button{padding:17px 9px}}
@media(min-width:751px) and (max-width:1099px){.nav-links>a,.nav-links>button,.nav-links .nav-drop>button{padding:12px 8px}}