/* ===========================================================
   WordPress-only styles (theme-owned; the sync script never
   overwrites this file). Uses the prototype tokens from tokens.css.
   - admin bar offsets and WordPress core classes
   - inner page layouts (DESIGN PENDING: simple, on-brand layouts
     until the inner pages are designed and approved)
   =========================================================== */

/* ---------- admin bar ---------- */
.admin-bar .topbar, .admin-bar .fab { top: 32px; }
@media (max-width: 782px) { .admin-bar .topbar, .admin-bar .fab { top: 46px; } }

/* ---------- WordPress core ---------- */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; display: block; height: auto; left: 1rem; top: 1rem; width: auto; z-index: 100000; padding: .6rem 1rem; background: var(--cream); color: var(--ink); }
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption, .gallery-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.sticky, .bypostauthor { position: relative; }

/* ---------- page head ---------- */
.page-head { padding-top: calc(74px + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.page-head__grid { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.page-head--media .page-head__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.page-head__title { font-size: clamp(2.2rem, 4.6vw, 3.8rem); color: var(--wine); max-width: 18ch; }
.page-head__title em { font-style: italic; color: var(--crimson); font-weight: 400; }
.page-head__lead { margin-top: 1rem; max-width: 46ch; font-size: 1.05rem; color: var(--muted); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
.page-head__media { aspect-ratio: 4 / 5; }
.page-head__media video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .page-head--media .page-head__grid { grid-template-columns: 1fr; } .page-head__media { aspect-ratio: 3 / 2; } }

/* ---------- facts strip ---------- */
.details { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-block: 1.2rem; border-block: 1px solid var(--line); }
.details div { display: grid; gap: .15rem; }
.details dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.details dd { margin: 0; color: var(--ink); }

/* ---------- long text ---------- */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.8em; color: var(--wine); }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.prose h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.prose a { color: var(--wine); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--crimson); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.6em 0; padding-left: 1.2rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.4; color: var(--wine); }
.prose img { height: auto; border-radius: var(--r); }
.prose figure { margin: 1.6em 0; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- card grids ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.card { display: grid; gap: .65rem; align-content: start; }
.card .frame { aspect-ratio: 4 / 5; }
.cards--landscape .card .frame { aspect-ratio: 3 / 2; }
.card .frame img { transition: transform 1s var(--ease-out); }
.card:hover .frame img { transform: scale(1.04); }
.card__meta { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.card__title { font-size: clamp(1.2rem, 1.7vw, 1.45rem); color: var(--wine); }
.card__text { font-size: .92rem; color: var(--muted); }

/* ---------- photo grid (wedding gallery) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.photo-grid .frame { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- questions ---------- */
.faq { display: grid; gap: .6rem; max-width: 46rem; }
.faq details { padding: .9rem 1.1rem; border-radius: var(--r); background: var(--band); }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.15rem; color: var(--wine); }
.faq details p { margin-top: .6rem; color: var(--muted); }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.quote { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--r); background: var(--band); }
.quote__text { white-space: pre-line; color: var(--ink); }
.quote__name { margin-top: 1rem; font-family: var(--serif); font-size: 1.15rem; color: var(--wine); }
.quote__src { font-size: .8rem; color: var(--muted-2); }

/* ---------- people & figures (About) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.split .frame { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; }
.figures strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--wine); line-height: 1.1; }
.figures span { font-size: .85rem; color: var(--muted); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem 2rem; margin-top: 1.75rem; }
.features h3 { font-size: 1.2rem; color: var(--wine); }
.features p { margin-top: .35rem; font-size: .92rem; color: var(--muted); }

/* ---------- closing band ---------- */
.end-band { text-align: center; }
.end-band .h2 { margin-inline: auto; max-width: 22ch; }
.end-band p { margin: .9rem auto 0; max-width: 46ch; color: var(--muted); }
.end-band .cta { margin-top: 1.5rem; }
.center-link { margin-top: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }

/* ---------- pagination, search, 404 ---------- */
.pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.pagination .page-numbers { min-width: 2.5rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-align: center; font-size: .85rem; }
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.search-form { display: flex; gap: .6rem; max-width: 32rem; margin-top: 1.4rem; }
.search-form input[type="search"] { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1.1rem; }
.search-form input[type="search"]:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110, 28, 42, .12); }
.search-form button { cursor: pointer; }
.empty-note { color: var(--muted); }
