/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle
 * display: Georgia · body: Segoe UI · hero: kept · nav: kept · footer: kept
 * signature: sun-framed community photographs · axes: light/roman-serif/cool · posture: welcoming · v2.0.0 */
/* Hallmark · pre-emit critique: weakest: an overly quiet restyle; restored sunny surfaces and rounded photo frames. */
/* Hallmark · copy: verbatim · layout: kept by request · render review blocked by sandbox. */
/*
Theme Name: NSCCS
Theme URI: https://nsccs.ca
Description: Custom WordPress child theme for North Shore Community Connection Society.
Author: Think Web Strategy
Template: twentytwentyfive
Version: 1.3.8
Text Domain: nsccs
*/
@import url("./tokens.css");
@import url("./base.css");

@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/roboto-slab-latin-600-normal.woff2") format("woff2");
}

.wrap { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; }
.brand > span { max-width: 270px; font: 600 1.125rem/1.35 "Roboto Slab", Rockwell, Georgia, serif; }
.photo-grid a[data-lightbox] { cursor: zoom-in; }
.photo-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(16px, 3vw, 32px); border: 0; color: var(--paper); background: rgb(16 30 28 / 96%); }
.photo-lightbox[open] { display: flex; flex-direction: column; gap: var(--space-md); }
.photo-lightbox::backdrop { background: rgb(16 30 28 / 96%); }
.lightbox-toolbar, .lightbox-navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex: none; }
.lightbox-status { margin: 0; font-size: var(--text-sm); }
.photo-lightbox button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--paper); border-radius: var(--radius-pill); background: transparent; color: var(--paper); cursor: pointer; }
.photo-lightbox button:hover { background: var(--paper); color: var(--ink); }
.photo-lightbox :focus-visible { outline-color: var(--sun); }
.lightbox-figure { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 0; margin: 0; gap: var(--space-sm); pointer-events: none; }
.lightbox-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; pointer-events: auto; }
.lightbox-figure figcaption { flex: none; max-width: 75ch; max-height: 25vh; overflow-y: auto; text-align: center; pointer-events: auto; }
.lightbox-error { margin: auto; text-align: center; }
.photo-lightbox a:hover { color: var(--sun); }
.site-logo { width: 94px; height: 94px; flex: none; object-fit: contain; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 600; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--space-xs); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current] { border-color: var(--teal); color: var(--teal); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--space-2xl); padding-block: var(--section-gap); }
.hero.text-only { display: block; }
.hero-copy { min-width: 0; }
.hero-copy h1 { max-width: 580px; }
.hero-copy > p { color: var(--muted); max-width: 505px; }
.hero-copy .intro { font-size: var(--text-lg); color: var(--ink); line-height: 1.6; }
.hero.text-only .hero-copy { max-width: 720px; }
.hero.text-only .hero-copy > p { max-width: 640px; }
.hero-photo { min-width: 0; margin: var(--space-sm); padding: var(--space-sm); background: var(--sun); border-radius: var(--radius-hero); }
.hero-photo img { width: 100%; height: 465px; object-fit: cover; border-radius: var(--radius-hero-image); }
.hero-photo figcaption { margin-top: var(--space-sm); color: var(--muted); font-size: var(--text-sm); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-lg); }
.button, #wpforms-form-13 button.wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; height: auto;
  padding: var(--space-sm) var(--space-lg); border: 1px solid var(--teal); border-radius: var(--radius-pill);
  background: var(--teal); color: var(--on-dark); font: 600 var(--text-sm)/1.5 var(--body);
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
.button:hover, #wpforms-form-13 button.wpforms-submit:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--on-dark); }
.button:active, #wpforms-form-13 button.wpforms-submit:active { transform: translateY(1px); }
.button[aria-disabled="true"], #wpforms-form-13 button.wpforms-submit:disabled {
  background: var(--disabled-fill); border-color: var(--field-line); color: var(--disabled-ink); cursor: not-allowed; transform: none;
}
.button[aria-busy="true"], #wpforms-form-13 button.wpforms-submit[aria-busy="true"] { cursor: progress; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-size: var(--text-sm); font-weight: 600; }
.section { padding-block: var(--section-gap); border-top: 1px solid var(--line); }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.activity-grid article { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-xl); background: var(--soft); border-radius: var(--radius-card); }
.activity-grid article:nth-child(2) { background: var(--peach); }
.activity-grid article > a { margin-top: auto; }
.activity-grid p { color: var(--muted); }
.purpose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: var(--gap-columns); padding: var(--space-xl); margin-top: var(--space-xl); background: var(--sun-soft); border-radius: var(--radius-card); }
.purpose h3 { margin: 0; }
.purpose h4 { margin: 0 0 var(--space-xs); font-size: var(--text-md); font-weight: 600; }
.purpose p { margin: 0; }
.purpose p + h4 { margin-top: var(--space-lg); }
.gallery-section { padding-block: var(--section-gap); background: var(--surface); border-block: 1px solid var(--line); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.section-heading h2 { margin-bottom: 0; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.album-card { display: block; min-width: 0; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out); }
.album-card:hover { transform: translateY(-4px); }
.album-cover { aspect-ratio: 4/3; margin-bottom: var(--space-md); border-radius: var(--radius-input); overflow: clip; background: var(--soft); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-cover-empty { display: none; }
.album-card:has(.album-cover-empty) { display: flex; flex-direction: column; justify-content: center; min-height: 180px; padding: var(--space-lg); }
.album-card:has(.album-cover-empty) { background: var(--soft); }
.album-events:has(.album-cover-empty) { background: var(--peach); }
.album-soup-shops:has(.album-cover-empty) { background: var(--sun-soft); }
.album-label h3 { margin: 0; font: 600 1.125rem/1.4 var(--body); }
.album-count { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-xs); font-variant-numeric: tabular-nums; }
.future-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); border-top: 0; }
.future-section p { color: var(--muted); }
.future-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.future-list li { padding-block: var(--space-md); border-bottom: 1px solid var(--line); color: var(--muted); }
.future-list strong { color: var(--ink); font-weight: 600; }
.contact-section { background: var(--teal-dark); color: var(--on-dark); padding-block: var(--space-2xl); border-top: var(--space-xs) solid var(--sun); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.contact-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap-columns); }
.contact-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); min-width: 0; padding-top: var(--space-md); }
.contact-inner h2 { color: var(--on-dark); margin-bottom: var(--space-md); }
.contact-inner p { color: var(--on-dark-muted); margin: 0; max-width: 435px; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.contact-links .text-link, .contact-links .email-link { color: var(--on-dark); }
.contact-section :focus-visible { outline-color: var(--sun); }
.contact-section .button { border-color: var(--on-dark-muted); }
.email-link { font-size: var(--text-sm); overflow-wrap: anywhere; }
.contact-form { width: 100%; max-width: 540px; justify-self: end; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--paper); color: var(--ink); }
.contact-form :focus-visible { outline-color: var(--focus); }
.contact-form h3 { margin-bottom: var(--space-md); }
.contact-form div.wpforms-container { margin-bottom: 0; }
.contact-form div.wpforms-container .wpforms-field-label,
.contact-form div.wpforms-container .wpforms-field-sublabel,
.contact-form div.wpforms-container .wpforms-field-description { color: var(--ink); }
#wpforms-form-13 { margin: var(--space-md) 0 0; font-family: var(--body); }
#wpforms-form-13 .wpforms-field { padding: 0 0 var(--space-md); }
#wpforms-form-13 .wpforms-field-label { margin-bottom: var(--space-xs); font-size: var(--text-md); font-weight: 600; line-height: 1.5; }
#wpforms-form-13 .wpforms-field-row { max-width: 100%; }
#wpforms-form-13 .wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
#wpforms-form-13 .wpforms-field select,
#wpforms-form-13 .wpforms-field textarea {
  width: 100%; max-width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--field-line);
  border-radius: var(--radius-input); background: var(--field); color: var(--ink); font: 400 var(--text-md)/1.5 var(--body); box-shadow: none;
}
#wpforms-form-13 .wpforms-field textarea { height: 120px; min-height: 120px; resize: vertical; }
#wpforms-form-13 .wpforms-field input:focus,
#wpforms-form-13 .wpforms-field select:focus,
#wpforms-form-13 .wpforms-field textarea:focus { border-color: var(--teal); outline: 3px solid var(--focus); outline-offset: 2px; }
#wpforms-form-13 .wpforms-field-sublabel,
#wpforms-form-13 .wpforms-field-description { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; }
#wpforms-form-13 .wpforms-required-label,
#wpforms-form-13 label.wpforms-error,
#wpforms-form-13 em.wpforms-error { color: var(--error); }
#wpforms-form-13 .wpforms-field input[aria-invalid="true"],
#wpforms-form-13 .wpforms-field textarea[aria-invalid="true"],
#wpforms-form-13 .wpforms-field select[aria-invalid="true"] { border-color: var(--error); }
#wpforms-form-13 .wpforms-confirmation-container-full { background: var(--soft); border: 1px solid var(--teal); color: var(--ink); padding: var(--space-md); border-radius: var(--radius-input); }
#wpforms-form-13 .wpforms-submit-container { padding: 0; margin-top: var(--space-2xs); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-columns); padding-block: var(--space-xl); }
.footer-name { font: 600 var(--text-md)/1.5 var(--body); text-decoration: none; }
.site-footer p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.gallery-main { padding-block: var(--space-xl) var(--section-gap); min-height: 65vh; }
.back-link { margin-bottom: var(--space-lg); }
.gallery-main h1 { max-width: 900px; margin-bottom: var(--space-md); }
.gallery-intro { color: var(--muted); }
.album-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-xl); padding-block: var(--space-md); border-block: 1px solid var(--line); }
.album-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); font-size: var(--text-sm); text-decoration: none; }
.album-nav a:hover { border-color: var(--teal); }
.album-nav a[aria-current] { background: var(--teal); border-color: var(--teal); color: var(--on-dark); font-weight: 600; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.photo-grid figure { margin: 0; min-width: 0; }
.photo-grid a { display: block; border-radius: var(--radius-input); }
.photo-grid img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-input); }
.photo-grid figcaption { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-xs); }
.gallery-empty { background: var(--soft); padding: var(--space-xl); border-radius: var(--radius-card); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); }
.pagination .current { color: var(--on-dark); background: var(--teal); }
.skip-link { position: fixed; left: var(--space-md); top: var(--space-md); z-index: 100; transform: translateY(-200%); padding: var(--space-sm) var(--space-lg); background: var(--ink); color: var(--on-dark); }
.skip-link:focus-visible { transform: none; }
.prose { max-width: 850px; }

@media (max-width: 1050px) {
  :root { --gutter: 32px; }
  .site-header { gap: var(--space-lg); }
  .brand { gap: var(--space-sm); }
  .brand > span { font-size: var(--text-md); max-width: 230px; }
  .site-logo { width: 76px; height: 76px; }
  .main-nav { gap: var(--space-md); }
  .hero { gap: var(--space-lg); }
  .hero-photo img { height: 430px; }
  .album-grid { gap: var(--space-md); }
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-form { max-width: 100%; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --section-gap: 48px; --gap-columns: 24px; }
  .site-header { align-items: flex-start; flex-direction: column; gap: var(--space-md); padding-block: var(--space-md); }
  .brand > span { font-size: var(--text-md); max-width: 250px; }
  .site-logo { width: 70px; height: 70px; }
  .main-nav { justify-content: space-between; width: 100%; gap: var(--space-xs); font-size: var(--text-xs); }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); gap: var(--space-lg); }
  .hero h1 { font-size: clamp(2.25rem, 8.6vw, 3.0625rem); }
  .hero-copy > p { max-width: none; }
  .hero-photo { max-width: 520px; margin: 0; }
  .hero-photo img { height: auto; aspect-ratio: 4/3; }
  .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-grid article { padding: var(--space-lg); }
  .purpose { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .album-label h3 { font-size: var(--text-md); }
  .future-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .site-footer { flex-wrap: wrap; gap: var(--space-lg); }
  .site-footer > p:last-child { width: 100%; }
  .gallery-main { padding-block: var(--space-lg) var(--section-gap); }
  .gallery-main h1 { font-size: 2.25rem; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .photo-grid img { aspect-ratio: 1; }
  .gallery-empty { padding: var(--space-lg); }
}
@media (max-width: 600px) {
  #wpforms-form-13 .wpforms-field-row { display: flex; flex-direction: column; gap: var(--space-md); }
  #wpforms-form-13 .wpforms-field-row-block { width: 100%; margin-left: 0; float: none; }
  #wpforms-form-13 button.wpforms-submit, .activity-button { width: 100%; }
}
@media (max-width: 380px) {
  .album-grid, .photo-grid { grid-template-columns: minmax(0, 1fr); }
  .album-cover { aspect-ratio: 3/2; }
  .photo-grid img { aspect-ratio: 4/3; }
  .main-nav { column-gap: var(--space-xs); font-size: .75rem; }
}