/*
System Name: Samford Valley Weather - Weather station system for South East Queensland, Australia
Component Name: SVW Forecast CSS
Description: Scoped native Forecast presentation.
Module Version: 1.2.1
Author: Steve Parry steve.z.parry@gmail.com
*/

.svwForecast { --svw-fullscreen-max-width: 68rem; color: #ffffff; container-type: inline-size; font-family: var(--svw-block-font-family, Arial, Helvetica, sans-serif); }
.svwForecast__body { background: var(--svw-public-surface-gradient, radial-gradient(circle at center, #0d665d 0%, #0b5a52 62%, #084d46 100%)); border-radius: 8px; padding: 0.72rem; }
.svwForecast__header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.18rem 0.8rem; justify-content: space-between; margin-bottom: 0.56rem; min-width: 0; }
.svwForecast__title { color: #ffffff; flex: 1 1 18rem; font-size: 1.625rem; font-weight: 500; letter-spacing: 0; line-height: 1.25; margin: 0; min-width: 0; text-align: left; }
.svwForecast__lastUpdated { color: #ffffff; flex: 0 1 auto; font-size: 0.78rem; font-weight: 400; line-height: 1.25; margin: 0 0 0 auto; max-width: 100%; min-width: 0; opacity: 0.78; overflow-wrap: break-word; text-align: right; white-space: normal; }
.svwForecast__source, .svwForecast__notice { margin: 0; }
.svwForecast__notice { background: rgba(255, 255, 255, 0.1); border-left: 3px solid rgba(255, 255, 255, 0.68); font-size: 0.78rem; margin-bottom: 0.62rem; padding: 0.38rem 0.5rem; }
.svwForecast__unavailable { background: rgba(255, 255, 255, 0.1); border-radius: 4px; font-weight: 600; padding: 0.85rem; text-align: center; }
.svwForecast__stripSection + .svwForecast__stripSection, .svwForecast__cards, .svwForecast__source { margin-top: 0.58rem; }
.svwForecast__sectionHeader { align-items: center; display: flex; gap: 0.5rem; justify-content: space-between; margin-bottom: 0.36rem; }
.svwForecast__sectionHeader h3 { color: #ffffff; font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; }
.svwForecast__nav { display: flex; gap: 0.3rem; }
.svwForecast__nav button { align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; color: #ffffff; cursor: pointer; display: inline-flex; font-size: 1.08rem; height: 1.8rem; justify-content: center; line-height: 1; padding: 0; width: 1.8rem; }
.svwForecast__nav button:hover, .svwForecast__nav button:focus-visible { background: rgba(255, 255, 255, 0.18); outline: 2px solid rgba(255, 255, 255, 0.82); outline-offset: 2px; }
.svwForecast__strip { display: grid; gap: 0.42rem; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0.04rem 0.16rem 0.1rem 0; scroll-snap-type: x proximity; scrollbar-width: none; }
.svwForecast__strip::-webkit-scrollbar { display: none; }
.svwForecast__strip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.82); outline-offset: 2px; }
.svwForecast__stripSection--hourly .svwForecast__strip { grid-auto-columns: minmax(5.15rem, 5.65rem); }
.svwForecast__stripSection--daily .svwForecast__strip { grid-auto-columns: minmax(6.18rem, 6.78rem); }
.svwForecast__tile { align-items: center; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; display: grid; gap: 0.15rem; justify-items: center; min-height: 5.78rem; min-width: 0; padding: 0.34rem 0.34rem; scroll-snap-align: start; }
.svwForecast__tileTemp, .svwForecast__tileTemps { color: #ffffff; font-size: 1.14rem; font-weight: 700; line-height: 1; }
.svwForecast__tileTemps { align-items: center; display: flex; flex-direction: column; gap: 0.16rem; min-width: 3.2rem; }
.svwForecast__tileTempMax { color: #ffffff; }
.svwForecast__tileTempMin { color: rgba(255, 255, 255, 0.74); font-size: 0.92rem; font-weight: 600; }
.svwForecast__rainChance, .svwForecast__tileTime, .svwForecast__tileDate { color: rgba(255, 255, 255, 0.9); font-size: 0.76rem; line-height: 1.1; text-align: center; }
.svwForecast__tileTime { color: #ffffff; font-weight: 700; }
.svwForecast__conditionIcon { display: block; height: 1.78rem; position: relative; width: 1.78rem; }
.svwForecast__conditionIcon::before, .svwForecast__conditionIcon::after { content: ""; display: block; position: absolute; }
.svwForecast__conditionIcon--clear::before { background: #ffd45c; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 212, 92, 0.24); height: 0.98rem; left: 0.4rem; top: 0.4rem; width: 0.98rem; }
.svwForecast__conditionIcon--partly_cloudy::before, .svwForecast__conditionIcon--cloudy::before, .svwForecast__conditionIcon--fog::before { background: #e6f0f1; border-radius: 999px; bottom: 0.4rem; height: 0.64rem; left: 0.22rem; width: 1.32rem; }
.svwForecast__conditionIcon--partly_cloudy::after { background: #ffd45c; border-radius: 50%; height: 0.82rem; right: 0.24rem; top: 0.22rem; width: 0.82rem; }
.svwForecast__conditionIcon--rain::before, .svwForecast__conditionIcon--storm::before, .svwForecast__conditionIcon--snow::before, .svwForecast__conditionIcon--unknown::before { background: #dbe7ea; border-radius: 999px; height: 0.64rem; left: 0.22rem; top: 0.34rem; width: 1.32rem; }
.svwForecast__conditionIcon--rain::after, .svwForecast__conditionIcon--storm::after { border-left: 2px solid #8ed5ff; border-right: 2px solid #8ed5ff; bottom: 0.22rem; height: 0.52rem; left: 0.56rem; transform: skewX(-12deg); width: 0.38rem; }
.svwForecast__cards { align-items: stretch; display: grid; gap: 0.42rem; grid-template-columns: repeat(7, 10rem); max-width: calc((10rem * 7) + (0.42rem * 6)); width: 100%; }
.svwForecast__miniCard { align-content: start; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; display: grid; min-height: 5.78rem; min-width: 0; padding: 0.42rem 0.48rem 0.38rem; }
.svwForecast__miniHeader { align-items: center; display: flex; gap: 0.34rem; margin-bottom: 0.22rem; min-width: 0; }
.svwForecast__miniCard h3 { color: #ffffff; font-size: 0.8rem; font-weight: 700; hyphens: none; letter-spacing: 0; line-height: 1.16; margin: 0; min-width: 0; overflow-wrap: normal; word-break: normal; }
.svwForecast__miniPrimary { color: #ffffff; font-size: 1.08rem; font-weight: 700; hyphens: none; line-height: 1.12; margin: 0; overflow-wrap: normal; word-break: normal; }
.svwForecast__miniPrimary:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.86); outline-offset: 2px; }
.svwForecast__miniSecondary { color: #ffffff; font-size: 0.73rem; hyphens: none; line-height: 1.12; margin: 0.16rem 0 0; opacity: 0.9; overflow-wrap: normal; word-break: normal; }
.svwForecast__miniIcon { border: 1.5px solid rgba(255, 255, 255, 0.48); border-radius: 50%; box-sizing: border-box; display: inline-block; flex: 0 0 auto; height: 1.34rem; opacity: 0.96; position: relative; width: 1.34rem; }
.svwForecast__miniIcon::before, .svwForecast__miniIcon::after { content: ""; display: block; position: absolute; }
.svwForecast__miniIcon--wind::before { background: rgba(255, 255, 255, 0.9); height: 2.5px; left: 0.22rem; top: 0.41rem; width: 0.76rem; }
.svwForecast__miniIcon--wind::after { border: 2.5px solid rgba(255, 255, 255, 0.9); border-left: 0; border-radius: 0 999px 999px 0; height: 0.3rem; right: 0.2rem; top: 0.28rem; width: 0.28rem; }
.svwForecast__miniIcon--sun::before { background: #ffd45c; border-radius: 50%; height: 0.56rem; left: 0.36rem; top: 0.22rem; width: 0.56rem; }
.svwForecast__miniIcon--sun::after { background: rgba(255, 255, 255, 0.86); bottom: 0.28rem; height: 2px; left: 0.22rem; width: 0.88rem; }
.svwForecast__miniIcon--precip::before { background: #8ed5ff; border-radius: 50% 50% 50% 0; height: 0.56rem; left: 0.39rem; top: 0.28rem; transform: rotate(-45deg); width: 0.56rem; }
.svwForecast__miniIcon--uv::before { background: #ffd45c; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 212, 92, 0.2); height: 0.54rem; left: 0.38rem; top: 0.38rem; width: 0.54rem; }
.svwForecast__miniIcon--humidity::before { border: 2px solid #8ed5ff; border-radius: 50% 50% 50% 0; height: 0.58rem; left: 0.34rem; top: 0.26rem; transform: rotate(-45deg); width: 0.58rem; }
.svwForecast__miniIcon--visibility::before { border: 2px solid rgba(255, 255, 255, 0.86); border-radius: 50%; height: 0.5rem; left: 0.31rem; top: 0.4rem; width: 0.68rem; }
.svwForecast__miniIcon--visibility::after { background: rgba(255, 255, 255, 0.86); border-radius: 50%; height: 0.18rem; left: 0.58rem; top: 0.58rem; width: 0.18rem; }
.svwForecast__miniIcon--pressure::before { border: 2px solid rgba(255, 255, 255, 0.86); border-radius: 50%; height: 0.72rem; left: 0.27rem; top: 0.27rem; width: 0.72rem; }
.svwForecast__miniIcon--pressure::after { background: rgba(255, 255, 255, 0.86); height: 0.34rem; left: 0.64rem; top: 0.44rem; transform: rotate(35deg); transform-origin: bottom; width: 2px; }
.svwForecast__miniIconImage { display: block; flex: 0 0 auto; height: 1.48rem; object-fit: contain; width: 1.48rem; }
.svwForecast__source { color: #ffffff; font-size: 0.8rem; line-height: 1.28; opacity: 0.86; padding-top: 0.05rem; text-align: center; }
.svwForecast__source a { color: #ffffff; text-decoration: underline; }
.svwForecast[data-svw-forecast-loading="true"] .svwForecast__body { opacity: 0.72; }
@container (max-width: 1180px) { .svwForecast__cards { grid-template-columns: repeat(4, 10rem); max-width: calc((10rem * 4) + (0.42rem * 3)); } }
@container (max-width: 700px) { .svwForecast__cards { grid-template-columns: repeat(2, 10rem); max-width: calc((10rem * 2) + 0.42rem); } }
@container (max-width: 420px) { .svwForecast__body { padding: 0.58rem; } .svwForecast__title { font-size: 1.5rem; } .svwForecast__miniCard { min-height: 5.5rem; padding: 0.38rem 0.42rem; } .svwForecast__miniCard h3 { font-size: 0.76rem; } .svwForecast__miniPrimary { font-size: 1rem; } .svwForecast__miniSecondary { font-size: 0.7rem; } .svwForecast__stripSection--hourly .svwForecast__strip { grid-auto-columns: minmax(4.9rem, 5.25rem); } .svwForecast__stripSection--daily .svwForecast__strip { grid-auto-columns: minmax(5.78rem, 6.28rem); } }
@container (max-width: 350px) { .svwForecast__cards { grid-template-columns: 10rem; max-width: 10rem; } }