/* Scoped to the refreshed homepage header; legacy pages keep their styles. */
.mc-header { background: #526f80; border-top: 4px solid #167d8d; border-bottom: 1px solid #718b99; color: #183247; }
.mc-masthead { margin: auto; min-height: 180px; padding: 36px max(28px, calc((100% - 1184px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(90deg, rgba(28, 48, 60, .24), rgba(28, 48, 60, .02) 55%, rgba(28, 48, 60, .28)), url('../images/meteocam-beach-v1.png') center 53% / cover no-repeat; color: #fff; }
.mc-brand { text-shadow: 0 1px 4px rgba(0, 0, 0, .45); display: inline-flex; flex-direction: column; color: #fff; text-decoration: none; }
.mc-brand:hover, .mc-brand:focus { color: #fff; text-decoration: none; }
.mc-brand-name { font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -2px; }
.mc-brand-name > span { color: #8de0e5; }
.mc-brand-name .mc-brand-dot { color: #ec9e42; }
.mc-brand-caption { margin-top: 6px; color: #e1edf4; font-size: 12px; letter-spacing: .8px; }
.mc-header-note { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); margin: 0; font-size: 15px; font-weight: 700; text-align: right; }
.mc-header-note span { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: #e1edf4; }
.mc-masthead a:focus-visible { outline-color: #8de0e5; outline-offset: 5px; }
.mc-scenes { position: relative; }
.mc-scenes.mc-motion-playing { background-image: linear-gradient(90deg, rgba(28,48,60,.30), rgba(28,48,60,.04) 55%, rgba(28,48,60,.38)), url('../images/meteocam-beach-mountain-v1.gif'); }
.mc-motion-toggle { position: absolute; right: 20px; bottom: 8px; padding: 6px 10px; min-height: 32px; border: 1px solid rgba(255,255,255,.65); border-radius: 5px; background: #405f70; color: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.mc-motion-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .mc-scenes.mc-motion-playing { background-image: linear-gradient(90deg, rgba(28,48,60,.24), rgba(28,48,60,.02) 55%, rgba(28,48,60,.28)), url('../images/meteocam-beach-v1.png'); }
}
.mc-partner img { max-width: 160px; max-height: 56px; }
.mc-header #mainNav { background: #526f80; border-top: 1px solid #718b99; margin: 0; min-height: 56px; }
.mc-header #mainNav > .container-fluid { max-width: 1240px; padding: 0 16px; }
.mc-header #myNavbar { padding: 0; box-shadow: none; }
.mc-header #mainNav ul.nav.navbar-nav { display: flex; float: none; flex-wrap: wrap; margin: 0; justify-content: flex-start !important; }
.mc-header #mainNav .navbar-nav > li { float: none; }
.mc-header #mainNav #myNavbar > ul > li > a { min-height: 56px; padding: 16px 12px; gap: 6px; color: #fff !important; font-size: 13px; font-weight: 600; background: transparent; border-radius: 6px; }
.mc-header #mainNav .navbar-nav > li > a font { color: inherit; }
.mc-header #mainNav #myNavbar > ul > li > a:hover,
.mc-header #mainNav #myNavbar > ul > li > a[aria-expanded="true"] { color: #a5edf0 !important; background: #405f70; }
.mc-header #mainNav a:focus-visible, .mc-header #mainNav button:focus-visible { outline-color: #8de0e5; }
.mc-header a:focus-visible, .mc-header button:focus-visible { outline: 3px solid #167d8d; outline-offset: -3px; }
.mc-header #mainNav .dropdown-menu { border: 1px solid #dde5ec !important; border-radius: 10px; padding: 8px; margin-top: 4px; box-shadow: 0 12px 30px rgba(24,50,71,.14); max-height: min(60vh, 520px) !important; overflow-y: auto !important; max-width: calc(100vw - 40px); }
.mc-header #mainNav #myNavbar > ul > li > ul.dropdown-menu a { padding: 9px 12px; font-size: 13px; line-height: 1.5; border-radius: 5px; white-space: normal; }
.mc-header #mainNav #myNavbar > ul > li > ul.dropdown-menu a:hover { background: #edf6f7 !important; color: #116877; }
.mc-header #mainNav .navbar-toggle { border: 1px solid #8ba2af; border-radius: 7px; padding: 10px 14px; color: #e1edf4; background: #405f70; font-size: 14px; }
.mc-header #mainNav .navbar-toggle .icon-bar { display: none; }
.mc-header #mainNav .navbar-toggle::after { content: 'Menu'; }
@media (min-width: 1100px) {
    .mc-header #myNavbar { display: block !important; }
    .mc-header #mainNav .navbar-header { display: none; }
    .mc-header #mainNav .navbar-nav > li:nth-last-child(-n+4) .dropdown-menu { right: 0; left: auto; }
}
@media (max-width: 1099px) {
    .mc-masthead { min-height: 150px; padding: 28px 20px; }
    .mc-header #mainNav .navbar-header { float: none; }
    .mc-header #mainNav .navbar-toggle { display: block; float: none !important; margin: 8px 0 !important; }
    .mc-header #myNavbar { display: none !important; border-top: 1px solid #718b99; }
    .mc-header #myNavbar.mc-menu-open { display: block !important; }
    .mc-header #mainNav ul.nav.navbar-nav { display: block; padding-bottom: 12px; }
    .mc-header #mainNav #myNavbar > ul > li > a { min-height: 44px; padding: 12px; }
    .mc-header #mainNav .dropdown-menu { position: static; float: none; width: 100%; box-shadow: none; margin: 0 0 8px; }
    .mc-header #mainNav #cameras { width: 100% !important; padding: 0; }
    .mc-header #mainNav .camera_col { width: 100%; float: none; }
}
@media (max-width: 540px) {
    .mc-brand-name { font-size: 32px; }
    .mc-header-note { display: none; }
    .mc-partner img { max-width: 110px; }
}