/*
Theme Name: CICA Heritage Harbor
Theme URI: https://chesapeakeisle.org/
Author: Chesapeake Isle Civic Association
Description: The Heritage Harbor theme for the Chesapeake Isle Civic Association. Navy, sailcloth and signal red, Libre Caslon headings, Source Sans 3 text. Pairs with the CICA Core plugin, which provides documents, events, notices, the contact form and the residents area.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: cica-heritage
*/

/* ---------- Basics ---------- */

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	background: var(--wp--preset--color--white);
	padding: 10px 16px;
}

:where(.wp-site-blocks) > * { margin-block-start: 0; }

a:where(:not(.wp-element-button)) { text-underline-offset: 0.18em; }

.cica-eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0;
}

.cica-eyebrow.is-brass { color: var(--wp--preset--color--brass-text); }
.cica-eyebrow.is-muted { color: var(--wp--preset--color--slate); }

.cica-lead {
	font-size: 19px;
	color: var(--wp--preset--color--body);
	max-width: 34em;
}

.cica-muted { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); }

.cica-rule-top { border-top: 2px solid var(--wp--preset--color--navy); }

.cica-hairline {
	height: 1px;
	background: var(--wp--preset--color--brass);
	border: 0;
	margin: 6px 0 8px;
}

/* A hairline under a heading spans its column, even in a constrained page layout. */
hr.wp-block-separator.cica-hairline:not(.is-style-dots) { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Header ---------- */

.cica-utility {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--sailcloth);
	font-size: 15px;
}

.cica-utility a { color: var(--wp--preset--color--sailcloth); }
.cica-utility a:hover { color: var(--wp--preset--color--white); }

.cica-utility__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 9px clamp(16px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	justify-content: space-between;
	align-items: center;
}

.cica-utility__links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

.cica-utility__login { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }

.cica-masthead__brand {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.cica-masthead__seal { width: 76px; height: 76px; }

.cica-masthead__name {
	font-family: var(--wp--preset--font-family--caslon-display);
	font-size: clamp(30px, 4.4vw, 46px);
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: center;
}

.cica-masthead__tagline {
	font-family: var(--wp--preset--font-family--caslon);
	font-style: italic;
	font-size: 17px;
	color: var(--wp--preset--color--slate);
	margin-top: 6px;
	text-align: center;
}

.cica-nav-bar {
	border-top: 1px solid var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass);
	padding: 4px 0;
}

.cica-nav-bar .wp-block-navigation__container { gap: 6px 34px; }

.cica-nav-bar .wp-block-navigation-item__content { padding: 8px 0; text-decoration: none; }

.cica-nav-bar .current-menu-item > .wp-block-navigation-item__content,
.cica-nav-bar .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--red);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--red);
}

.cica-nav-bar .cica-nav-pay .wp-block-navigation-item__content {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	padding: 10px 18px;
	letter-spacing: 0.08em;
}

.cica-nav-bar .cica-nav-pay .wp-block-navigation-item__content:hover { background: #7f151c; }

@media (max-width: 599px) {
	.cica-masthead__brand { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; }
	.cica-masthead__seal { width: 56px; height: 56px; }
	.cica-masthead__name { font-size: 26px; text-align: left; }
	.cica-masthead__tagline { font-size: 14px; text-align: left; }
	.cica-nav-bar { border-bottom: 0; }
}

.cica-nav-bar .wp-block-navigation__responsive-container-open {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--navy);
	padding: 10px 16px;
	min-height: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--sailcloth) !important;
	color: var(--wp--preset--color--navy) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 18px; padding: 10px 0; }

/* Inner pages use a one-line header */
.cica-header--compact .cica-masthead__brand { justify-content: flex-start; gap: 12px; }
.cica-header--compact .cica-masthead__seal { width: 52px; height: 52px; }
.cica-header--compact .cica-masthead__name { font-size: 26px; letter-spacing: 0.07em; }

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-pay > .wp-block-button__link { background: var(--wp--preset--color--red); }
.wp-block-button.is-style-pay > .wp-block-button__link:hover { background: #7f151c; }

/* ---------- Framed photo ---------- */

.is-style-cica-frame {
	border: 1px solid var(--wp--preset--color--brass);
	padding: 10px;
	background: var(--wp--preset--color--white);
}

.is-style-cica-frame img { display: block; width: 100%; height: auto; }

.cica-photo-placeholder {
	min-height: 260px;
	background: #DCE3E8;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	color: var(--wp--preset--color--body);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cica-photo-placeholder.is-dark { background: var(--wp--preset--color--navy-light); color: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--brass); }
.cica-photo-placeholder.is-archive { background: #E4DCCB; }

/* ---------- Task rows ---------- */

.cica-tasks { border-top: 2px solid var(--wp--preset--color--navy); }

.cica-task {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	min-height: 44px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.cica-task:hover .cica-task__title { color: var(--wp--preset--color--red); }

.cica-task__title { display: block; font-family: var(--wp--preset--font-family--caslon); font-size: 21px; }
.cica-task__help { display: block; font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-task__arrow { font-size: 22px; color: var(--wp--preset--color--red); }

/* ---------- Badges ---------- */

.cica-badge {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	white-space: nowrap;
	line-height: 1.4;
}

.cica-badge--residents { color: var(--wp--preset--color--brass-text); border: 1px solid var(--wp--preset--color--brass); }
.cica-badge--current { color: var(--wp--preset--color--navy); border: 1px solid var(--wp--preset--color--navy); }
.cica-badge--superseded { color: var(--wp--preset--color--slate); border: 1px dashed var(--wp--preset--color--slate); }

/* ---------- Notices strip ---------- */

.cica-notices {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cica-notices__item { padding: 22px 24px; border-right: 1px solid var(--wp--preset--color--rule); }
.cica-notices__item:last-child { border-right: 0; }

.cica-notices__item.is-alert { background: var(--wp--preset--color--red); color: var(--wp--preset--color--white); border-right: 0; }

.cica-notices__label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--slate); }
.cica-notices__item.is-alert .cica-notices__label { color: var(--wp--preset--color--white); }

.cica-notices__headline { font-family: var(--wp--preset--font-family--caslon); font-size: 22px; color: var(--wp--preset--color--navy); margin-top: 6px; }
.cica-notices__item.is-alert .cica-notices__headline { color: var(--wp--preset--color--white); }

.cica-notices__detail { font-size: 15px; margin-top: 4px; }
.cica-notices__item.is-alert a { color: var(--wp--preset--color--white); }

/* ---------- News and events lists ---------- */

.cica-news .wp-block-post { padding: 18px 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.cica-news .wp-block-post:last-child { border-bottom: 0; }
.cica-news .wp-block-post-title { margin: 4px 0 6px; font-size: 22px; }
.cica-news .wp-block-post-title a { text-decoration: none; }
.cica-news .wp-block-post-excerpt { color: var(--wp--preset--color--body); }
.cica-news .wp-block-post-excerpt__excerpt { margin: 0; }

.cica-events { list-style: none; margin: 0; padding: 0; }

.cica-events__item {
	display: flex;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	align-items: baseline;
}

.cica-events__date { min-width: 74px; font-family: var(--wp--preset--font-family--caslon); color: var(--wp--preset--color--red); font-size: 18px; }
.cica-events__title { font-weight: 600; color: var(--wp--preset--color--navy); }
.cica-events__meta { font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-events__month { margin: 32px 0 4px; }
.cica-empty { color: var(--wp--preset--color--body); padding: 14px 0; }

/* ---------- Event photos ---------- */

.cica-gatherings { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.cica-gathering__cover { display: block; border: 1px solid var(--wp--preset--color--brass); padding: 8px; background: var(--wp--preset--color--white); }
.cica-gathering__cover img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cica-gathering__title { margin: 14px 0 2px; font-size: 22px; }
.cica-gathering__title a { text-decoration: none; }
.cica-gathering__title a:hover { text-decoration: underline; }
.cica-gathering__meta { margin: 0; font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-gatherings__more { margin-top: 20px; font-weight: 600; }

.cica-photo-archive__year { margin: 40px 0 4px; }
.cica-photo-archive__year:first-child { margin-top: 0; }
.cica-recap { padding: 22px 0 28px; border-bottom: 1px solid var(--wp--preset--color--rule); }
.cica-recap__title { margin: 0 0 2px; font-size: 24px; }
.cica-recap__meta { margin: 0 0 14px; font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-recap.is-residents .cica-recap__meta { margin: 0; }
.cica-recap__more { margin: 12px 0 0; font-size: 15px; }
.cica-recap__removal { margin: 12px 0 0; font-size: 15px; color: var(--wp--preset--color--slate); }

.cica-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cica-photos li { margin: 0; }
.cica-photos__link { display: block; }
.cica-photos__link img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cica-photos__link:focus-visible { outline: 3px solid var(--wp--preset--color--red); outline-offset: 2px; }
@media (max-width: 600px) { .cica-photos { grid-template-columns: repeat(2, 1fr); } }

.cica-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(13, 22, 40, 0.94); color: var(--wp--preset--color--sailcloth); }
.cica-viewer::backdrop { background: rgba(13, 22, 40, 0.94); }
.cica-viewer__figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 24px; box-sizing: border-box; }
.cica-viewer__figure img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; }
.cica-viewer figcaption { margin-top: 12px; font-size: 15px; text-align: center; }
.cica-viewer__count { color: var(--wp--preset--color--mist); }
.cica-viewer__btn { position: absolute; min-width: 48px; min-height: 48px; font-size: 32px; line-height: 1; border: 0; background: transparent; color: var(--wp--preset--color--white); cursor: pointer; }
.cica-viewer__btn:focus-visible { outline: 2px solid var(--wp--preset--color--white); }
.cica-viewer__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.cica-viewer__next { right: 8px; top: 50%; transform: translateY(-50%); }
.cica-viewer__close { right: 8px; top: 8px; }
.cica-viewer.is-single .cica-viewer__prev, .cica-viewer.is-single .cica-viewer__next { display: none; }
@media (max-width: 600px) { .cica-viewer__figure { padding: 56px 8px 24px; } .cica-viewer__prev, .cica-viewer__next { top: auto; bottom: 8px; transform: none; } }

/* ---------- Dark band ---------- */

.cica-band-dark { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--sailcloth); }
.cica-band-dark :where(h2, h3) { color: var(--wp--preset--color--sailcloth); }
.cica-band-dark a { color: var(--wp--preset--color--white); }
.cica-band-dark p { color: var(--wp--preset--color--mist); }

/* ---------- Footer ---------- */

.cica-footer { border-top: 2px solid var(--wp--preset--color--navy); background: var(--wp--preset--color--linen); font-size: 15px; color: var(--wp--preset--color--body); }
.cica-footer h2 { font-family: var(--wp--preset--font-family--sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin: 0 0 6px; }
.cica-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- At-a-glance facts ---------- */

.cica-facts {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--brass);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cica-facts > * { padding: 22px 24px; border-right: 1px solid var(--wp--preset--color--rule); margin: 0 !important; }
.cica-facts > *:last-child { border-right: 0; }
.cica-facts .cica-facts__value { font-family: var(--wp--preset--font-family--caslon); font-size: 34px; color: var(--wp--preset--color--navy); line-height: 1.2; display: block; }
.cica-facts .cica-facts__value.is-red { color: var(--wp--preset--color--red); }

/* ---------- Line items ---------- */

.cica-line-items { border-top: 2px solid var(--wp--preset--color--navy); }
.cica-line-items > * {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	margin: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.cica-line-items .cica-line-items__amount { font-family: var(--wp--preset--font-family--caslon); font-size: 20px; color: var(--wp--preset--color--navy); white-space: nowrap; }

.cica-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wp--preset--color--brass); }
.cica-timeline li { padding: 0 0 18px 20px; }
.cica-timeline li:last-child { padding-bottom: 0; }

/* ---------- Panels ---------- */

.cica-panel { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--brass); padding: 24px; }
.cica-panel-dark { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--sailcloth); padding: 26px; }
.cica-panel-dark :where(h2, h3) { color: var(--wp--preset--color--white); }
.cica-panel-dark p { color: var(--wp--preset--color--mist); }

/* Dues page: Pay online and Pay by check, side by side */
.cica-pay-options { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.cica-pay-options > * { flex: 1 1 300px; max-width: 600px; margin: 0 !important; }
.cica-pay-online h3 { margin-top: 0; }

/* ---------- Breadcrumb ---------- */

.cica-breadcrumb { font-size: 15px; color: var(--wp--preset--color--slate); }

/* ---------- Documents ---------- */

.cica-docs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wp--preset--color--navy); }

.cica-doc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cica-doc[hidden], .cica-library__group[hidden] { display: none; }

.cica-doc__main { flex: 1 1 320px; min-width: 0; }
.cica-doc__title { font-family: var(--wp--preset--font-family--caslon); font-size: 20px; text-decoration: none; }
.cica-doc__title:hover { text-decoration: underline; }
.cica-doc.is-superseded .cica-doc__title { color: var(--wp--preset--color--slate); }
.cica-doc__meta { font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-doc__note { font-size: 15px; color: var(--wp--preset--color--body); font-style: italic; }
.cica-doc__badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.cica-library { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cica-library__filters { flex: 1 1 250px; display: flex; flex-direction: column; gap: 22px; }
.cica-library__filters[hidden] { display: none; }
.cica-library__results { flex: 999 1 560px; min-width: 0; }
.cica-library__group { margin-bottom: 36px; }
.cica-library__group h2 { margin: 0 0 8px; font-size: 26px; }
.cica-library__count { margin: 0 0 12px; font-size: 15px; color: var(--wp--preset--color--slate); }
.cica-library__help h2 { font-size: 20px; margin: 0 0 6px; }
.cica-library__help p { margin: 0; font-size: 15px; }
.cica-library__label,
.cica-field label {
	display: block;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin-bottom: 8px;
}

.cica-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cica-chip {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 9px 14px;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.cica-chip[aria-pressed="true"] { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.cica-chip:focus-visible { outline: 2px solid var(--wp--preset--color--red); outline-offset: 2px; }

.cica-check { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.cica-check input { width: 22px; height: 22px; accent-color: var(--wp--preset--color--navy); }

/* ---------- Forms ---------- */

.cica-form { max-width: 640px; }
.cica-field { margin: 0 0 18px; }

.cica-field input,
.cica-field select,
.cica-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 17px;
	padding: 12px 14px;
	min-height: 48px;
	border: 1px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
}

.cica-field :focus { outline: 2px solid var(--wp--preset--color--red); outline-offset: 1px; }

.cica-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cica-form-message { padding: 12px 16px; background: var(--wp--preset--color--linen); border: 1px solid var(--wp--preset--color--brass); }
.cica-form-message.is-error { background: #FBEAEA; border-color: var(--wp--preset--color--red); color: #6E1218; }

/* ---------- Pavilion calendar ---------- */

.cica-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cica-pavcal__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.cica-pavcal__key .is-reserved { margin-left: 12px; }
.cica-pavcal__swatch { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--wp--preset--color--navy); }
.cica-pavcal__swatch.is-available { background: var(--wp--preset--color--white); }
.cica-pavcal__swatch.is-reserved { background: var(--wp--preset--color--navy); }

.cica-pavcal__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.cica-pavcal__month { width: 100%; border-collapse: collapse; font-size: 15px; text-align: center; }
.cica-pavcal__month caption { font-weight: 700; color: var(--wp--preset--color--navy); text-align: left; padding-bottom: 6px; }
.cica-pavcal__month th { font-size: 13px; color: var(--wp--preset--color--slate); padding: 4px 0; }
.cica-pavcal__month abbr { text-decoration: none; }
.cica-pavcal__month td { padding: 6px 0; border: 1px solid var(--wp--preset--color--rule); }
.cica-pavcal__month td.is-available { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); }
.cica-pavcal__month td.is-reserved { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); font-weight: 700; }
.cica-pavcal__month td.is-past { color: var(--wp--preset--color--slate); background: var(--wp--preset--color--linen); }

.wp-element-button.is-outline { background: transparent; color: var(--wp--preset--color--navy); border: 1px solid var(--wp--preset--color--navy); }
.wp-element-button.is-outline:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }

.cica-residents-form { max-width: 520px; }
.cica-residents-form h2, .cica-residents h2 { margin-top: 0; }
.cica-residents :is(.cica-docs, .cica-empty) + h2 { margin-top: 40px; }
.cica-logout { margin-top: 28px; }

.cica-next-meeting__date { font-family: var(--wp--preset--font-family--caslon); font-size: 28px; color: var(--wp--preset--color--navy); margin: 4px 0; }

button.wp-element-button { cursor: pointer; border: 0; font-family: inherit; }

.wp-block-details summary { font-size: var(--wp--preset--font-size--medium); font-weight: 600; color: var(--wp--preset--color--navy); cursor: pointer; min-height: 28px; }
.wp-block-details > :not(summary) { margin-top: 10px; color: var(--wp--preset--color--body); }