#local {
	--pane3-bkg: #fcbd70;
}

#local .sticky-bkg {
	height: calc(var(--content-height) * 2);
}

#local .hero .summary-row {
	--grade-size: 15vmin;
	--grade-pad: 2vw;
	--logo-width: clamp(5vw, 120px, 15vh);
	width: 100%;
	height: 50%;

	padding: 0 2vw;
	box-sizing: border-box;
}

#local .pane-1 .summary-row svg.logo {
	max-height: 60%;
}


#local .pane-2.hero div.contents {
	width: max(1080px, 84vw);
	height: calc(var(--content-height) * 0.75) !important;
}

#local .pane-2.hero .title-bar {
	width: 96%;
	margin-left: 4%;
}

#local .pane-2 .title-bar .main {
	--font-size: min(7.2vh, 9vw) !important;

	padding-top: 0.75vh;
}


#local .pane-2 .option-row {
	--btm-pad: 2vh;

	width: 92%;
	height: fit-content;

	position: relative;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	flex-wrap: wrap;
	row-gap: 1vh;
	flex-grow: 0;

	margin: 0.75% 0 var(--btm-pad) 4%;
}

#local .pane-2 .option-row .orgs {
	width: fit-content;
	height: fit-content;

	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;

	gap: 7px;
}

#local .pane-2 .option-row .orgs svg.logo {
	height: 3em;
}

#local .pane-2 .option-row .orgs svg.logo:has([href="#bbc-full"]) {
	height: 2.3em;
	margin: 0 -2px 0 0.5vw;
}

#local .pane-2 .option-row .fcst-type-bar {
	width: fit-content;
	height: 2em;

	display: flex;

	border: 1px solid grey;
	border-radius: 7px;

	margin-left: 5%;
}

#local .pane-2 .option-row .fcst-type-bar .fcst-option {
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	flex-grow: 1;
	flex-basis: 0;

	white-space: nowrap;
	
	border-right: 2px solid grey;

	font-family: "Roboto";
	font-weight: 600;
	font-size: 2vh;

	padding: 3px;
	box-sizing: border-box;

	cursor: pointer;
}

#local .pane-2 .option-row .fcst-type-bar .fcst-option:hover {
	background: rgb(175, 175, 175);
}

#local .pane-2 .option-row .fcst-type-bar .fcst-option.selected {
	background: rgb(140, 140, 140);
}

#local .pane-2 .option-row .fcst-option:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

#local .pane-2 .option-row .fcst-option:last-child {
	border-right-color: rgba(0,0,0,0);
	

	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

#local .pane-2 .option-row .fcst-option a {
	height: fit-content;
}

#local .pane-2 .date {
	position: absolute;
	right: 0;

	bottom: calc(var(--btm-pad) * -1);

	font-family: "Roboto";
	font-weight: 400;
}

#local .pane-2 .flex-grow {
	--key-wid: max(1rem, 3%);
	width: 100%;
	flex-grow: 1;

	white-space: nowrap;
	overflow: visible;

	position: relative;
}

#local .pane-2 .periods {
	width: calc(100% - var(--key-wid) - var(--key-wid));
	height: 100%;
	margin: 0 var(--key-wid);

	display: flex;
	flex-direction: row;
	align-items: center;

	overflow: scroll hidden;
	scrollbar-width: thin;

	position: relative;
}

#local .pane-2 .periods:has(.period.daily) {
	justify-content: center;
}

#local .pane-2 .periods .period {
	--width: 80px;/*max(80px, calc(100vw / 24));*/
	height: 100%;

	width: var(--width);
	
	flex: none; /* was previously inheriting flex-grow from cont */
}

#local .pane-2 .periods .period.hourly {
	width: var(--width);
}

#local .pane-2 .periods .period.three-hr {
	width: calc(var(--width) * 2);
}

#local .pane-2 .periods .period.daily {
	width: 100%;
}


#local .pane-2 .period.key {
	width: var(--key-wid);
	height: 90%;

	overflow-x: scroll;
	scrollbar-width: thin;

	position: absolute;
	bottom: 0;
}

#local .pane-2 .period .info {
	--border: 0.75px solid rgba(0, 0, 0, .2);

	width: inherit;
	height: 90%;
	border-right: var(--border);

	display: flex;
	flex-direction: column;
}

#local .pane-2 .period.key label {
	writing-mode: sideways-lr;
	text-orientation: mixed;

	height: 50%;

	text-align: center;

	font-family: "Roboto";
	font-weight: 300;
	font-size: clamp(1rem, 20px, 2vw);
	
	position: absolute;
	right: 50%;
	translate: 50% 0;
}

#local .pane-2 .period.key label:last-of-type {
	bottom: 0;
}
	

#local .pane-2 .period > * {
	display: block;
	position: relative;
}

#local .pane-2 .period .time {
	height: 10%;
	
	text-align: center;
	font-family: "Lilita One";
	width: 100%;
	box-sizing: border-box;
	transform: translateY(30%);
}

#local .pane-2 .period .fcst > :not(.wt),
#local .pane-2 .period .obs > :not(.wt) {
	height: 1em;
}

#local .pane-2 .period * > a {
	filter: drop-shadow(0 0 1em rgba(0,0,0,1))
}

#local .pane-2 .periods .period:last-child .info {
	border-right: none;
}

#local .pane-2 .period .underline {
	flex: none;
}

#local .pane-2 .period .obs, #local .pane-2 .period .fcst {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: space-between;

	height: 50%;
	flex-grow: 0;
	flex-shrink: 0;

	font-family: "Viga";
}

#local .pane-2 .period img.wt {
	width: min(90%, 6vh);
	image-rendering: crisp-edges;
}


#local .pane-2 .period .wind .spd {
	height: 1em;
	line-height: 1em;

	display: inline-block;
	vertical-align: middle;
}

#local .pane-2 .period .wind .dir {
	height: 1em;
	
	stroke: black;

	vertical-align: middle;
}

#local .pane-2 .period .rain {
	margin-bottom: 4px;
}


#local .pane-3 .contents {
	--padding-tb: 8vh;
	--padding-lr: 10vw;
	--n-weeks: 6;
}

#local .pane-3 .title-bar {
	width: calc(var(--content-width) - var(--date-square) * 8);

	display: inline-block;
	
	position: absolute;
	right: var(--padding-lr);
	vertical-align: top;
}

#local .pane-3 .title-bar .main {
	padding-top: 0;
}

#local .pane-3 .calendar {
	box-shadow: -5px 5px black;
}

/*@media screen and (max-width: 1500px) {	
	body #local .pane-3 .title-bar {
		position: static;
		width: 100%;

		padding-top: 2vh;
		padding-right: 5vw;
	}
}*/


@media screen and (max-width: 900px) {
	#local .pane-2 .option-row {
		justify-content: space-between;
	}
	
	#local .pane-2 .option-row .fcst-type-bar {
		margin-left: 0;
	}
}



@media screen and (max-width: 650px) {
	#local .pane-1 .summary-row {
		--row-width: min(400px, 80vw);
		--grade-size: 15vh;
		--table-height: calc(1.5vh * 6);

		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#local .pane-1 table.summary-table {
		--underline-len: 100%;
		font-size: 1.5vh;

		width: var(--row-width);
		min-height: var(--table-height);

		margin: 0;

		flex-shrink: 0;
		flex-grow: 0;
	}

	#local .pane-1 table.summary-table.conditions tr > :nth-child(1) {
		width: 40%;
	}
	
	#local .pane-1 .summary-row .left-items {
		width: var(--row-width);
		max-height: 50%;

		justify-content: center;
		align-items: center;

		flex-shrink: 1;
		flex-grow: 0;

		min-height: 0px;
	}

	#local .pane-1 .summary-row .left-items svg.logo {
		max-height: 60%;
	}

	#local .pane-2 .option-row:has(.fcst-freq .fcst-option.selected[org="B1"]) .fcst-time > :not(.selected):nth-child(n+4):nth-last-child(n+4) {
		display: none;
	}
}