/*
Theme Name: The Gregory Family
Theme URI: https://gregories-family.com
Author: Ian Kaplan <icsk@tutamail.com>
Author URI: https://riot-hose.dev
Description: A warm, earth-toned family website theme: history, family tree, member profiles, and photo/video galleries. Built as a WordPress block (FSE) theme.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gregories
Tags: block-theme, full-site-editing, family, one-page
*/

/* ------------------------------------------------------------------
   Fonts are enqueued from Google Fonts in functions.php.
   Everything below is presentational polish that goes beyond what
   theme.json + block supports can express — applied via custom
   className attributes on ordinary core blocks, so every block stays
   fully editable in the Site Editor.
------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

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

.gregories-header {
  border-bottom: 1px solid rgba(46, 36, 32, 0.1);
}

.gregories-logo,
.gregories-logo a {
  font-family: var(--wp--preset--font-family--script);
  font-size: 32px;
  color: #C4432A;
  line-height: 1;
  text-decoration: none;
}

.gregories-nav-links {
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/*
 * !important is required here: core's navigation block CSS sets
 * `.wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; }`
 * — the doubled class boosts its specificity above a plain `.gregories-nav-links a` rule,
 * so without !important the hover color is silently overridden and never shows.
 */
.gregories-nav-links a {
  color: #2E2420 !important;
  padding: 0 !important;
}

.gregories-nav-links a:hover,
.gregories-nav-links .gregories-nav-link.is-active a {
  color: #C4432A !important;
}

/*
 * Active nav state, keyed off WordPress's own body_class() output rather
 * than a hand-added "current page" class on the nav markup itself — the
 * header's navigation-link blocks are hardcoded (not backed by a real
 * wp_nav_menu), so there's no automatic "current menu item" detection to
 * hook into otherwise. Single/detail pages of a section (a specific recipe,
 * event, or family member) also highlight that section's nav item, not
 * just the section's own archive/landing page.
 */
body.home .gregories-nav-links a[href="/"],
body.page-template-template-our-history .gregories-nav-links a[href="/our-history/"],
body.page-template-template-family-tree .gregories-nav-links a[href="/family-tree/"],
body.single-family-member .gregories-nav-links a[href="/family-tree/"],
body.post-type-archive-recipe .gregories-nav-links a[href="/recipes/"],
body.single-recipe .gregories-nav-links a[href="/recipes/"],
body.page-template-template-gallery .gregories-nav-links a[href="/gallery/"],
body.post-type-archive-event .gregories-nav-links a[href="/events/"],
body.single-event .gregories-nav-links a[href="/events/"] {
  color: #C4432A !important;
}

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

.gregories-footer {
  border-top: 1px solid rgba(46, 36, 32, 0.1);
  text-align: center;
}

.gregories-footer-name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 15px;
  color: #6b5c44;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.gregories-footer-tag {
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  color: #8a7a68;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.gregories-eyebrow {
  font-family: var(--wp--preset--font-family--accent-serif);
  font-style: italic;
  font-size: 17px;
  color: #C4432A;
}

.gregories-stamp-frame {
  padding: 14px;
  background: #fff;
  border: 2px dashed #D98B2B;
  transform: rotate(1.5deg);
}

.gregories-stamp-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ribbon-shaped CTA button with pointed ends, serif type */
.wp-block-button.gregories-cta-ribbon .wp-block-button__link {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  padding: 14px 44px !important;
  clip-path: polygon(0% 50%, 6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%);
}

/* ---------- Teaser / section cards ---------- */

.gregories-teaser-card {
  background: #fff;
  padding: 22px 20px;
  border-top: 4px solid var(--gregories-accent, #D98B2B);
}

.gregories-teaser-card.is-tree { --gregories-accent: #C4432A; }

.gregories-teaser-card .wp-block-heading {
  color: #33503E;
  font-size: 17px;
  margin-bottom: 6px;
}

.gregories-teaser-swatch {
  width: 100%;
  height: 44px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--gregories-accent, #D98B2B) 22%, transparent);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 8px, rgba(0,0,0,0) 8px 16px);
  margin-bottom: 14px;
}

/*
 * ---------- Home CTA row (Family Tree + Events feed) ----------
 * A plain flex group, not wp:columns, because the two children need
 * different width behavior (Family Tree fixed-ish, Events fills the rest)
 * rather than wp:columns' even percentage split.
 */

.gregories-home-cta-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.gregories-home-cta-tree {
  flex: 0 1 263px;
  min-width: 230px;
}

.gregories-home-cta-events {
  flex: 1 1 420px;
  min-width: 320px;
}

.gregories-home-events-card {
  background: #fff;
  border-top: 4px solid #33503E;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gregories-home-events-card__header {
  padding: 22px 22px 14px;
}

.gregories-home-events-card__title {
  font-size: 17px;
  margin: 0;
}

.gregories-home-events-card__see-all {
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  font-weight: 600;
  margin: 0;
}

.gregories-home-events-card__see-all a {
  color: #C4432A;
  text-decoration: none;
}

.gregories-home-events-card__see-all a:hover {
  color: #D98B2B;
}

/*
 * Stack on mobile — the two CTAs go from side-by-side to full-width/full-
 * height rows. The feed's own larger max-height on mobile (see
 * blocks/home-events-feed/style.css) is what keeps this "scrollable
 * without being ugly" once stacked.
 */
@media ( max-width: 768px ) {
  .gregories-home-cta-row {
    flex-direction: column;
  }

  .gregories-home-cta-tree,
  .gregories-home-cta-events {
    flex: 1 1 auto;
    width: 100%;
  }
}

.gregories-teaser-link {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 600;
  color: #C4432A;
}

/* ---------- Member cards ---------- */

.gregories-member-card {
  text-align: center;
}

.gregories-member-portrait {
  border-radius: 999px;
  overflow: hidden;
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
}

.gregories-member-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.gregories-member-name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 17px;
  color: #2E2420;
}

.gregories-member-meta {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  color: #8a7a68;
  margin-top: 3px;
}

.gregories-generation-label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--gregories-accent, #33503E);
}

/* ---------- Tabs (Gallery + Family Tree view switcher) ---------- */

.gregories-tabs .wp-block-button__link,
.wp-block-buttons.gregories-tabs {
  font-family: var(--wp--preset--font-family--body);
}

.gregories-tab-group {
  background: #fff;
  border: 1px solid rgba(46, 36, 32, 0.12);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding: 4px;
  gap: 1rem;

  width: fit-content;
  margin-inline: auto;
}

.gregories-tab-group .wp-block-button__link {
  background: transparent;
  color: #2E2420;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.gregories-tab-group .wp-block-button__link.is-active {
  background: #2F5D5A;
  color: #fff;
}

.gregories-panel,
.gregories-tree-view {
  display: none;
}

.gregories-panel.is-active,
.gregories-tree-view.is-active {
  display: block;
}

/* ---------- Gallery carousel ---------- */

/*
 * The carousel panel carries both `gregories-panel is-active` (2-class
 * selector, sets display:block above) and `gregories-carousel` (1-class
 * selector, wants display:flex) on the same element. `.gregories-panel.
 * is-active` has higher specificity, so plain `.gregories-carousel {
 * display:flex }` was silently losing that fight — this 3-class selector
 * is needed to actually win.
 */
.gregories-panel.is-active.gregories-carousel {
  display: flex;
}

.gregories-carousel {
  align-items: center;
  gap: 18px;
}

.gregories-carousel-arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(46, 36, 32, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  font-size: 18px;
  color: #2E2420;
}

.gregories-carousel-arrow:hover {
  background: #2F5D5A;
  color: #fff;
}

.gregories-carousel-viewport {
  flex: 1;
  overflow: hidden;
}

.gregories-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
}

.gregories-carousel-track > figure {
  flex: none;
  width: 320px;
  height: 240px;
  margin: 0;
}

.gregories-carousel-track img {
  width: 320px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------- Video grid ---------- */

/* Same specificity fix as .gregories-carousel above — an inline style used
   to set this panel's grid layout, which always beat display:none regardless
   of is-active; now it's class-based so the show/hide toggle actually works. */
.gregories-panel.is-active.gregories-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.gregories-video-thumb {
  position: relative;
}

.gregories-video-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/*
 * Real photo/video content (once wired to an actual media source) will use
 * an <img>, sized by the rules above — these placeholders exist only until
 * then. Rendered as styled text, not an empty <img src="">, since a broken
 * image's alt-text fallback isn't reliably stylable across browsers (wrong
 * font, wrong size, no layout control).
 */
.gregories-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
  background: #eee2d1;
  border-radius: 8px;
  text-align: center;
  padding: 0 16px;
}

.gregories-video-thumb.gregories-media-placeholder {
  height: 200px;
  align-items: flex-end;
  padding-bottom: 16px;
}

.gregories-media-placeholder span {
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  color: #8a7a68;
}

.gregories-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(46, 36, 32, 0.55);
  pointer-events: none;
}

.gregories-video-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
  transform: translate(-40%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Family tree: branching view ---------- */

.gregories-tree-gen {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.gregories-tree-row {
  display: inline-flex;
  gap: 60px;
  border-top: 2px solid var(--gregories-accent, #33503E);
  padding-top: 30px;
  margin: 0 auto;
}

.gregories-tree-trunk {
  width: 1px;
  height: 30px;
  background: var(--gregories-accent, #33503E);
  margin: 0 auto;
}

.gregories-tree-branch {
  position: relative;
}

.gregories-tree-branch::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 30px;
  background: var(--gregories-accent, #33503E);
}

.gregories-tree-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gregories-accent, #33503E);
  margin: 0 auto 8px;
  overflow: hidden;
}

.gregories-tree-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Family tree: timeline view ---------- */

/* ---------- Events ---------- */

.gregories-event-card {
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  border-left: 4px solid var(--gregories-accent, #C4432A);
}

.gregories-event-card.is-past {
  opacity: 0.75;
}

.gregories-event-date {
  flex: none;
  width: 80px;
  text-align: center;
}

.gregories-event-day {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--gregories-accent, #C4432A);
  line-height: 1;
}

.gregories-event-month {
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7a68;
}

/* ---------- Recipes ---------- */

.gregories-eyebrow-light {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D98B2B;
  margin: 0 0 6px;
}

.gregories-featured-recipe .wp-block-columns {
  background: #33503E;
  border-radius: 8px;
  overflow: hidden;
}

/*
 * The text column determines the row's height (via its padding + content);
 * the image column stretches to match (default flex align-items behavior,
 * now that the row no longer forces align-items:center) and the image
 * itself fills that full stretched height, instead of a fixed pixel height
 * that left a gap whenever the text column was taller.
 */
.gregories-featured-recipe-image-col {
  display: flex;
}

.gregories-featured-recipe-image-col .wp-block-post-featured-image {
  width: 100%;
  height: 100%;
  margin: 0;
}

.gregories-featured-recipe-image-col .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gregories-featured-recipe .wp-block-post-title,
.gregories-featured-recipe .wp-block-post-title a {
  color: #F6EFE4;
}

.gregories-recipe-sidebar-label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7a68;
  margin: 0 0 4px;
}

.gregories-recipe-meta-panel {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee2d1;
}

.gregories-recipe-row {
  border-bottom: 1px solid #eee2d1;
}

.gregories-recipe-row:last-child {
  border-bottom: none;
}

.gregories-recipe-card {
  background: #fff;
  padding: 24px 28px;
  border-radius: 8px;
  border: 1px solid #eee2d1;
}

/* ---------- Family member detail ---------- */

.gregories-related-members-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
  gap: 32px;
}

/*
 * ---------- Events ----------
 * Shared by both the event-list block (archive Upcoming/Past sections) and
 * templates/events-on-date.php (the /events/{year}/{month}/{day} route,
 * which renders outside the block pipeline) — kept sitewide, not in a
 * per-block stylesheet, since events-on-date.php has no block styles enqueued.
 */

.gregories-event-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C4432A;
  margin: 0 0 20px;
}

.gregories-event-section-label.is-past {
  color: #33503E;
}

.gregories-event-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gregories-event-row {
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  border-left: 4px solid var( --gregories-accent, #C4432A );
  text-decoration: none;
}

.gregories-event-row.is-past {
  opacity: 0.75;
}

.gregories-event-row__date {
  flex: none;
  width: 80px;
  text-align: center;
}

.gregories-event-row__day {
  font-family: var( --wp--preset--font-family--heading );
  font-weight: 700;
  font-size: 28px;
  color: var( --gregories-accent, #C4432A );
  line-height: 1;
}

.gregories-event-row__month {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7a68;
}

.gregories-event-row__title {
  font-family: var( --wp--preset--font-family--heading );
  font-weight: 700;
  font-size: 19px;
  color: #2E2420;
  margin-bottom: 4px;
}

.gregories-event-row__meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var( --gregories-accent, #C4432A );
  margin-bottom: 4px;
}

.gregories-event-row__excerpt {
  font-size: 13px;
  color: #6b5c44;
  line-height: 1.5;
}

.gregories-back-link a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a7a68;
  text-decoration: none;
}

.gregories-back-link a:hover {
  color: #C4432A;
}

/*
 * ---------- Our History ----------
 * The real "Our History" page content (whatever prose/chapters the family
 * has actually written) renders through wp:post-content — this just applies
 * the design brief's typography to it, rather than baking fake placeholder
 * chapters into the template. See patterns/history-chapter-*.php for the
 * matching "insert a new illustrated chapter" building block.
 */

.gregories-history-content p {
  color: #5c4d38;
  line-height: 1.7;
}

.gregories-history-content h3 {
  font-family: var( --wp--preset--font-family--heading );
  font-weight: 700;
  font-size: 24px;
  color: #2E2420;
}

.gregories-history-content .wp-block-image img {
  border-radius: 6px;
}

.gregories-history-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/*
 * ---------- Protected-minor initials avatar ----------
 * Shared across every context that renders one (family-tree-branching,
 * family-member-hero, family-member-descendants, ...) — lives in the
 * global stylesheet (not a block-specific one) since it's a cross-block
 * component; each context still supplies its own font-size, since the
 * circle it fills is a different diameter in each place.
 */
.gregories-initials-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  letter-spacing: 0.02em;
}