/*
 * Coffee & Compass Weather. Theme palette when available, brand fallbacks otherwise.
 */

.ccw-card, .ccw-chip, .ccw-climate, .ccw-editor-note {
	--ccw-ink: var(--wp--preset--color--contrast, #2b1d16);
	--ccw-paper: var(--wp--preset--color--surface, #fffbf5);
	--ccw-crema: var(--wp--preset--color--base, #f6efe4);
	--ccw-red: var(--wp--preset--color--primary, #b9472a);
	--ccw-jade: var(--wp--preset--color--secondary, #2e6b5e);
	--ccw-brass: var(--wp--preset--color--tertiary, #a97b34);
	--ccw-latte: var(--wp--preset--color--line, #dcc7a8);
	--ccw-muted: var(--wp--preset--color--muted, #6a5548);
	--ccw-head: var(--wp--preset--font-family--heading, Georgia, serif);
	--ccw-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	box-sizing: border-box;
	font-family: var(--ccw-body);
}
.ccw-card *, .ccw-climate * { box-sizing: border-box; }
.ccw-icon { display: block; flex: none; }
.ccw-icon .ccw-i-sun { stroke: var(--ccw-brass); }
.ccw-icon .ccw-i-drop { stroke: var(--ccw-jade); }
.ccw-icon .ccw-i-bolt { stroke: var(--ccw-red); }
:where(.ccw-card, .ccw-climate, .ccw-units) .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

.ccw-kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font: 700 0.74rem/1.4 var(--ccw-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ccw-jade); }
.ccw-kicker::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }

/* °C / °F */
.ccw-units { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--ccw-latte); border-radius: 999px; background: var(--ccw-paper); }
.ccw-units button { min-width: 42px; min-height: 34px; padding: 0.15rem 0.6rem 0; border: 0; border-radius: 999px; background: transparent; color: var(--ccw-muted); font: 700 0.8rem/1 var(--ccw-body); cursor: pointer; }
.ccw-units button[aria-pressed="true"] { background: var(--ccw-ink); color: var(--ccw-crema); }
.ccw-units button:focus-visible { outline: 2px solid var(--ccw-red); outline-offset: 2px; }

/* ---------- Forecast card ---------- */

.ccw-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 1.8rem);
	border: 1px solid var(--ccw-latte);
	border-radius: 20px;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ccw-brass) 14%, transparent), transparent 60%), var(--ccw-paper);
	color: var(--ccw-ink);
	box-shadow: 0 2px 4px rgba(43, 29, 22, 0.06), 0 22px 48px -18px rgba(43, 29, 22, 0.28);
	margin: 0 0 2rem;
}
.ccw-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ccw-card__place { margin: 0; font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.08 var(--ccw-head); }
.ccw-card__coords { display: block; margin-top: 0.35rem; font: 700 0.7rem/1.3 var(--ccw-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ccw-muted); }
.ccw-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; margin-top: 1.1rem; }

.ccw-now { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.5rem 1rem; }
.ccw-now .ccw-icon { width: 64px; height: 64px; }
.ccw-now__main { display: flex; flex-direction: column; }
.ccw-now__temp { font: 700 3.4rem/0.95 var(--ccw-head); letter-spacing: -0.02em; }
.ccw-now__cond { font-size: 0.95rem; font-weight: 600; color: var(--ccw-muted); }
.ccw-now__facts { display: flex; flex-direction: column; gap: 0.3rem; justify-self: end; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--ccw-muted); }
.ccw-now__facts li { display: flex; align-items: center; gap: 0.4rem; }
.ccw-now__facts .ccw-icon { width: 16px; height: 16px; }
.ccw-now__updated { font-size: 0.72rem; opacity: 0.8; }

.ccw-days { display: grid; grid-template-columns: repeat(var(--ccw-days, 5), minmax(0, 1fr)); gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.ccw-day { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem 0.25rem 0.7rem; border-radius: 14px; background: color-mix(in srgb, var(--ccw-latte) 26%, var(--ccw-paper)); text-align: center; }
.ccw-day:first-child { background: #2b1d16; color: #f6efe4; }
.ccw-day:first-child .ccw-day__low,
.ccw-day:first-child .ccw-day__rain { color: rgba(246, 239, 228, 0.65); }
.ccw-day:first-child .ccw-icon .ccw-i-sun { stroke: #e2b866; }
.ccw-day:first-child .ccw-icon .ccw-i-drop { stroke: #8fbfb2; }
.ccw-day__name { font: 700 0.68rem/1.2 var(--ccw-body); letter-spacing: 0.12em; text-transform: uppercase; }
.ccw-day .ccw-icon { width: 34px; height: 34px; }
.ccw-day__temps { display: flex; gap: 0.35rem; align-items: baseline; }
.ccw-day__high { font: 700 1.15rem/1 var(--ccw-head); }
.ccw-day__low { font-size: 0.85rem; color: var(--ccw-muted); }
.ccw-day__rain { font-size: 0.68rem; font-weight: 600; color: var(--ccw-muted); }
.ccw-day__rain.is-wet { color: var(--ccw-jade); }
.ccw-day:first-child .ccw-day__rain.is-wet { color: #8fbfb2; }
.ccw-credit { margin: 1rem 0 0; font-size: 0.7rem; line-height: 1.5; color: var(--ccw-muted); }
.ccw-credit a { color: inherit; }
.ccw-status { margin: 0; font-size: 0.82rem; color: var(--ccw-muted); }

/* Loading placeholders. */
.ccw-now--ghost span, .ccw-day--ghost span, .ccw-chip__ghost { display: block; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--ccw-latte) 40%, transparent) 0%, color-mix(in srgb, var(--ccw-latte) 75%, transparent) 50%, color-mix(in srgb, var(--ccw-latte) 40%, transparent) 100%) 0 0 / 200% 100%; animation: ccw-shimmer 1.4s linear infinite; }
.ccw-now--ghost { grid-template-columns: 64px 140px; }
.ccw-now--ghost span:first-child { width: 64px; height: 64px; border-radius: 50%; }
.ccw-now--ghost span:last-child { height: 46px; }
.ccw-day--ghost span:nth-child(1) { width: 60%; height: 10px; }
.ccw-day--ghost span:nth-child(2) { width: 34px; height: 34px; border-radius: 50%; }
.ccw-day--ghost span:nth-child(3) { width: 70%; height: 14px; }
.ccw-card.is-failed .ccw-now--ghost, .ccw-card.is-failed .ccw-days { display: none; }
@keyframes ccw-shimmer { to { background-position: -200% 0; } }

@media (max-width: 520px) {
	.ccw-now { grid-template-columns: auto 1fr; }
	.ccw-now__facts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-self: start; gap: 0.3rem 1rem; }
	.ccw-days { gap: 0.25rem; }
	.ccw-day { padding-inline: 0.1rem; border-radius: 10px; }
	.ccw-day__name { font-size: 0.6rem; letter-spacing: 0.06em; }
	.ccw-day .ccw-icon { width: 28px; height: 28px; }
	.ccw-day__temps { flex-direction: column; gap: 0.1rem; align-items: center; }
	.ccw-day__high { font-size: 1rem; }
}

/* ---------- Now chip ---------- */

.ccw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	margin: 0;
	padding: 0.2rem 0.95rem 0.1rem 0.85rem;
	border: 1px solid var(--ccw-latte);
	border-radius: 999px;
	background: var(--ccw-paper);
	color: var(--ccw-ink);
	font-size: 0.86rem;
	font-weight: 600;
}
.ccw-chip .ccw-icon { width: 22px; height: 22px; }
.ccw-chip__place { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ccw-muted); }
.ccw-chip__temp { font: 700 1.05rem/1 var(--ccw-head); }
.ccw-chip__cond { color: var(--ccw-muted); font-weight: 500; }
.ccw-chip__ghost { width: 70px; height: 14px; }

/* ---------- Month by month ---------- */

.ccw-climate { color: var(--ccw-ink); scroll-margin-top: 6rem; }
.ccw-climate__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.ccw-climate__title { margin: 0; font: 700 clamp(2.05rem, 1.35rem + 2.8vw, 3.7rem)/1.04 var(--ccw-head); letter-spacing: -0.015em; }
.ccw-climate__intro { margin: 0.8rem 0 0; max-width: 560px; color: var(--ccw-muted); }
.ccw-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.25rem, 0.8vw, 0.6rem); list-style: none; margin: 0; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--ccw-latte); border-radius: 22px; background: var(--ccw-paper); }
.ccw-month { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 0.15rem 0.7rem; border-radius: 14px; }
.ccw-month.is-best { background: color-mix(in srgb, var(--ccw-jade) 10%, transparent); }
.ccw-month.is-now { box-shadow: inset 0 0 0 2px var(--ccw-red); }
.ccw-month__name { font: 700 0.72rem/1 var(--ccw-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ccw-month__name abbr { text-decoration: none; }
.ccw-month__bar { position: relative; display: flex; align-items: flex-start; justify-content: center; width: min(100%, 44px); height: 150px; }
.ccw-month__bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ccw-h, 50%); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--ccw-brass), color-mix(in srgb, var(--ccw-brass) 45%, var(--ccw-paper))); }
.ccw-month.is-best .ccw-month__bar::before { background: linear-gradient(180deg, var(--ccw-jade), color-mix(in srgb, var(--ccw-jade) 45%, var(--ccw-paper))); }
.ccw-month__temp { position: absolute; bottom: calc(var(--ccw-h, 50%) + 6px); font: 700 1rem/1 var(--ccw-head); }
.ccw-month__rain { display: flex; gap: 1px; min-height: 14px; color: var(--ccw-jade); }
.ccw-month__rain .ccw-icon { width: 12px; height: 12px; }
.ccw-rain-0 { opacity: 0.25; }
.ccw-month__tag { padding: 0.25rem 0.45rem 0.15rem; border-radius: 999px; background: var(--ccw-jade); color: #fff; font: 700 0.58rem/1.1 var(--ccw-body); letter-spacing: 0.1em; text-transform: uppercase; }
.ccw-month.is-shoulder .ccw-month__tag { background: color-mix(in srgb, var(--ccw-jade) 30%, var(--ccw-paper)); color: var(--ccw-ink); }
.ccw-climate__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.9rem 0 0; font: 600 0.72rem/1.3 var(--ccw-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ccw-muted); }
.ccw-legend { display: inline-flex; align-items: center; gap: 0.45rem; }
.ccw-legend::before { content: ""; width: 12px; height: 12px; border-radius: 4px; }
.ccw-legend--best::before { background: var(--ccw-jade); }
.ccw-legend--good::before { background: color-mix(in srgb, var(--ccw-jade) 30%, var(--ccw-paper)); }
.ccw-legend--rain::before { width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--ccw-jade); }
.ccw-legend--now::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ccw-red); }
@media (max-width: 760px) {
	.ccw-months { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ccw-months::-webkit-scrollbar { display: none; }
	.ccw-month { flex: 0 0 56px; scroll-snap-align: start; }
	.ccw-month__bar { height: 120px; }
}

/* ---------- Editor ---------- */

.ccw-editor-note { padding: 1.25rem 1.5rem; border: 1px dashed var(--ccw-latte); border-radius: 14px; background: var(--ccw-paper); color: var(--ccw-muted); font-size: 0.95rem; }
.ccw-panel__now { padding: 0.6rem 0.75rem; border-radius: 6px; background: #f6f7f7; font-size: 12px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
	.ccw-now--ghost span, .ccw-day--ghost span, .ccw-chip__ghost { animation: none; }
}
@media print {
	.ccw-units { display: none !important; }
	.ccw-card { box-shadow: none; break-inside: avoid; }
}