/* for /climate/ocean/long-range-forecasts/ */

:root {
    --primary-dark: hsl(193, 96%, 18%); 
    --primary: hsl(188, 96%, 28%);
    --primary-mid: hsl(188, 96%, 48%);
    --primary-light: hsl(188, 96%, 74%);
    --primary-lightest:hsl(188, 56%, 91%);

    --active-bg: #06c;
    --active-text: #fff;
    --bom-blue: #2461e5;
}


#root img, #figure-img {
    display:block;
    margin:auto;
    width:auto;
    max-width:100%;
    max-height: auto; /* 90vh*/;
    }

#root > div > div {background-color: #efefef !important; border:none;  background:#efefef ;}
#root a[style] {margin:auto !important; width: fit-content !important;}

.flex {display: flex;}
ul.buttons {margin:0;}
.buttons > * {padding:8px; border: 0px solid #ddd; border-radius: 4px; margin: 4px; background-color:#efefef;}
.buttons a { text-decoration: none;}
.buttons a:hover { box-shadow: 2px 2px 4px rgba(0,0,0,0.3);}


/* bom-2012 css overrides */
.l_shadow {display: none;}
#header {height: unset ;}
#container, #container.two-column { width:100%; float:none;} 
.two-column #content {
    width: 97%;
    margin: 0 20px;
    box-sizing:border-box;
}
#content {padding-right:10px;}

@media (min-width: 280px) and (max-width: 767px) {
    .two-column #content {
        width: 100%;
        margin: 0;
    } 
}


#breadcrumb { margin: 0 0 1em -0.4em;} 
#breadcrumb a:link , #breadcrumb a:visited{text-decoration:none;}
#breadcrumb {
    margin: 0 0 0.4em -.2em;
    background-color: #e6e6e6;
    height:30px;
    box-sizing:border-box;
    padding:0;
    font-size:.9em;
}
#breadcrumb li { 
    display:block; width:auto; float:left;
    height: 30px; 
    line-height:30px;
    box-sizing:border-box;
    background-image:none; 
    padding-left:0;
    margin-left:6px;
}
#breadcrumb li:before {
    content: '/ ';
    color: #999;
    font-size: 1.2em;
    display:inline-block;
    width:10px;
}
#breadcrumb li:first-child:before {
    content: '';
    width:0;
    margin-left:0px;
 }

#breadcrumb li:first-child  a {
    background: url(/climate/images/symbols/icon-home-16x16.svg) no-repeat 14px 6px;
    display:inline-block;
    box-sizing: border-box;
    width: 30px;
    height:30px;
    overflow: hidden;
    text-indent: 40px;
    white-space: nowrap;
}


h1.banner {
    background: linear-gradient( 75deg,#003366 20%,#1964AA 70%);/* fall back */
    background-image: url(gbr4-banner.jpg); 
    background-position: 0 -40px;
    padding: 20px;
    margin: 7px 0 20px 0;
    color: #fff;
    font-weight: normal;
    font-size: 2.8em;
    min-height: 80px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
}
@media (max-width: 600px) {
    h1 {font-size: smaller;}
}

/* hide site announcement bar */
#site-announcement {display:none;}

/* form controls */
.controls { padding:8px; text-align:left; }

.flex     {display: flex; justify-content: center;}
.flex > * {padding-right:10px;}
/* fieldset.flex { gap: 16px; }*/

fieldset {width:auto; margin:0 auto; padding: 12px; background-color: var(--primary-lightest); border:none; border-radius: 6px;} 

@media screen and (min-width: 768px )  { 
    .flex {
        flex-wrap: wrap;
    }
}
@media screen and (min-width:860px) {
    .flex {
        flex-wrap: nowrap;
    }
}


select {
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid var(--primary-light); 
    background: #fff;
    line-height: 30px;
    font-size: 1em;
    min-width: 180px;
    margin:2px 0 2px 4px;
}
select:focus {
    outline: none; 
    box-shadow: 0 0 3px 0px var(--primary-mid);
}

label {
    font-weight: 500;
    color: #006699; /* var(--primary-dark);*/
    margin-left:5px;
}

a.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: var(--bom-blue);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: var(--primary-lightest);
    color: #000;
}

.figure-primary { text-align: center; margin: auto; margin-top:16px; max-width:900px; /*680px;*/ position: relative; box-sizing: border-box;}
img { max-width: 100%; height: auto;}
.figure-primary img {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 0;
}

/*
@media (min-width: 900px) {

    .figure-primary img:active {
        box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
        animation-name: zoom;
        animation-duration: 4s;
        animation-delay: 300ms;
        animation-fill-mode: forwards;
    }
    @keyframes zoom {
    0% {transform: scale(1);}
    10% {transform: scale(1.5);}
    90% {transform: scale(1.5);}
    100% {transform: scale(1.5);}
    }

}
*/

/* info sections below maps */
details {  
    border-radius: 5px;
    margin-bottom: 10px;
    padding:15px;
    border: 1px solid var(--primary-lightest);
}
details[open] {
    border-color: var(--primary-light);
}
summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    border-radius: 5px;
    padding:20px;
    background-color: var(--primary-lightest);
}
summary:focus {
    background-color: var(--primary-lightest);
}
summary figure { margin:10px; }

.sponsor-block {
    background: linear-gradient(var(--primary-lightest), #ffffff);
    border-top: 4px solid var(--primary);
    color: var(--primary-dark);
    padding: 10px;
    margin: 20px 0;
}

.sponsor-block img {
    mix-blend-mode: darken
}

.notice {
    background-color: #fff8e6;
    padding: 10px 20px;
    margin-bottom: 20px;
    /*
    border-left: 6px solid #ffecb3;
   
    
    font-size: 1em;
    border: 1px solid var(--primary-light); 
    */

}