/* ==========================================================================
   HILDGUND — CUSTOM WIDGET STYLES
   Paste into Punchmark Site Manager > Design or Theme Settings > Global CSS.
   Do NOT paste into the page editor.

   This file REPLACES hildgund-history-split.css. It contains everything that
   file had, plus the two About Us widgets and the Legacy Collection intro.
   Paste this one and remove any older block so the rules are not duplicated.

   Contents
     0. Brand tokens
     1. Shared typography (timeline + monarch + new widgets)
     2. Timeline widget          .hildgund-timeline-widget
     3. Monarch widget           .hildgund-monarch-widget
     4. About Us — Family panels .hildgund-people-widget
     5. About Us — Milestones    .hildgund-milestones-widget
     6. Responsive scroll management
     7. Legacy Collection intro  .hg-legacy-intro
     8. Header logo legibility   (header logo image, by file path)
   ========================================================================== */


/* ==========================================================================
   0. BRAND TOKENS
   ========================================================================== */

:root {
  --hg-blue:        #739AB2;  /* Official Hildgund Blue */
  --hg-blue-deep:   #3A5C70;  /* Deep Hildgund Blue    */
  --hg-blue-tint:   #EAF0F3;  /* Hildgund Blue Tint    */
  --hg-ink:         #111111;
  --hg-body:        #444444;
  --hg-muted:       #6E7679;

  --hg-display: "Aviano Contrast", "Georgia", serif;
  --hg-accent:  "Copperplate Gothic", "Copperplate", sans-serif;
  --hg-body-font: "Jost", "Mulish", sans-serif;
}


/* ==========================================================================
   1. SHARED TYPOGRAPHY
   ========================================================================== */

.hildgund-timeline-widget,
.hildgund-monarch-widget,
.hildgund-people-widget,
.hildgund-milestones-widget {
  color: var(--hg-ink) !important;
}

.hildgund-timeline-widget .history-eyebrow,
.hildgund-monarch-widget .history-eyebrow,
.hildgund-people-widget .history-eyebrow,
.hildgund-milestones-widget .history-eyebrow {
  font-family: var(--hg-accent);
  color: var(--hg-blue);
  font-size: 0.85rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.hildgund-timeline-widget .history-main-title,
.hildgund-monarch-widget .history-main-title,
.hildgund-people-widget .history-main-title {
  font-family: var(--hg-display);
  color: var(--hg-ink);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 1px;
}


/* ==========================================================================
   2. TIMELINE WIDGET
   ========================================================================== */

.hildgund-timeline-widget .history-card {
  background-color: #FFFFFF;
  border-color: var(--hg-blue-tint) !important;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.hildgund-timeline-widget .history-card:hover { transform: translateY(-4px); }

.hildgund-timeline-widget .card-date {
  font-family: var(--hg-accent);
  color: var(--hg-blue-deep);
  font-size: 0.8rem;
  font-weight: 600;
}

.hildgund-timeline-widget .card-block-title {
  font-family: var(--hg-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.hildgund-timeline-widget .card-text {
  font-family: var(--hg-body-font);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hg-body);
}

.hildgund-timeline-widget .card-bullets li {
  font-family: var(--hg-body-font);
  margin-bottom: 4px;
}

.hildgund-timeline-widget .object-cover-card {
  height: 240px;
  object-fit: cover;
}


/* ==========================================================================
   3. MONARCH WIDGET
   ========================================================================== */

.hildgund-monarch-widget.bg-light-tint { background-color: var(--hg-blue-tint) !important; }

.hildgund-monarch-widget .portrait-card    { border-color: var(--hg-blue-tint) !important; border-radius: 0; }
.hildgund-monarch-widget .portrait-wrapper { background-color: #FAFBFB; border-color: var(--hg-blue-tint) !important; }

.hildgund-monarch-widget .monarch-title {
  font-family: var(--hg-display);
  font-size: 1.1rem;
  font-weight: 400;
}

.hildgund-monarch-widget .monarch-subtitle {
  font-family: var(--hg-body-font);
  letter-spacing: 0.5px;
}

.hildgund-monarch-widget .object-cover-portrait {
  height: 280px;
  object-fit: cover;
}


/* ==========================================================================
   4. ABOUT US — FAMILY PANELS
   Fixed-ratio frames force all three portraits to identical dimensions no
   matter what the source crop is. This is what keeps the captions aligned.
   ========================================================================== */

.hildgund-people-widget .people-intro {
  font-family: var(--hg-body-font);
  max-width: 640px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--hg-muted);
}

.hildgund-people-widget .people-figure {
  display: flex;
  flex-direction: column;
}

/* Frame ratio (2:3, matching the founder portrait) is set inline in the
   widget markup so it holds even before this stylesheet is pasted.
   Do not add width/height/aspect-ratio here -- it would be redundant. */
.hildgund-people-widget .people-image-frame { border-radius: 0; }

.hildgund-people-widget .people-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.hildgund-people-widget .people-figure:hover .people-image { transform: scale(1.03); }

.hildgund-people-widget .people-body {
  flex: 1 1 auto;
  padding-top: 1.35rem;
  margin-top: 1.35rem;
  border-top: 2px solid var(--hg-blue);
}

.hildgund-people-widget .people-date {
  font-family: var(--hg-accent);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hg-blue-deep);
  font-weight: 600;
}

.hildgund-people-widget .people-name {
  font-family: var(--hg-display);
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--hg-ink);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.hildgund-people-widget .people-text {
  font-family: var(--hg-body-font);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hg-body);
}


/* ==========================================================================
   5. ABOUT US — MILESTONES TIMELINE
   Deliberately quieter than the section above: rule-and-dot timeline, small
   square thumbnails, reduced type. Reads as a footnote, not a feature.
   ========================================================================== */

.hildgund-milestones-widget {
  border-top: 1px solid var(--hg-blue-tint);
}

.hildgund-milestones-widget .milestones-title {
  font-family: var(--hg-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--hg-ink);
}

.hildgund-milestones-widget .milestone-node {
  position: relative;
  padding-top: 2.5rem;
}

/* Thumbnail box (260 x 195, 4:3) is set inline in the widget markup. */
.hildgund-milestones-widget .milestone-thumb { border-radius: 0; }

.hildgund-milestones-widget .milestone-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.92);
}

.hildgund-milestones-widget .milestone-date {
  font-family: var(--hg-accent);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hg-blue-deep);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.hildgund-milestones-widget .milestone-heading {
  font-family: var(--hg-display);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--hg-ink);
}

.hildgund-milestones-widget .milestone-text {
  font-family: var(--hg-body-font);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--hg-muted);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Connector rule with a dot per node — desktop only */
@media (min-width: 768px) {
  .hildgund-milestones-widget .milestones-track {
    border-top: 1px solid var(--hg-blue-tint);
  }

  .hildgund-milestones-widget .milestone-node::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background-color: var(--hg-blue);
    border-radius: 50%;
  }
}

@media (max-width: 767.98px) {
  .hildgund-milestones-widget .milestone-node { padding-top: 0; margin-bottom: 2.25rem; }
  .hildgund-milestones-widget .milestone-node:last-child { margin-bottom: 0; }
}


/* ==========================================================================
   6. RESPONSIVE SCROLL MANAGEMENT
   ========================================================================== */

@media (max-width: 767.98px) {
  .extreme-compact-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .extreme-compact-scroll > div { scroll-snap-align: start; }

  .hildgund-timeline-widget .history-main-title,
  .hildgund-monarch-widget .history-main-title,
  .hildgund-people-widget .history-main-title { font-size: 1.75rem; }

  .hildgund-timeline-widget .object-cover-card    { height: 200px; }
  .hildgund-monarch-widget  .object-cover-portrait { height: 300px; }
}

@media (min-width: 768px) {
  .extreme-compact-scroll {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}


/* ==========================================================================
   7. LEGACY COLLECTION INTRO
   Page Summary (Intro) on the Legacy Collection brand page. Works with
   both intro versions (text only, and lead plus three fact highlights).
   Uses the brand tokens above. Links and the eyebrow use Deep Hildgund
   Blue because the lighter Official Blue is under 4.5:1 on white.
   ========================================================================== */

.hg-legacy-intro {
  padding: 2.5rem 0 2rem;
  color: var(--hg-ink);
}

.hg-legacy-intro .hg-legacy-intro__eyebrow {
  font-family: var(--hg-accent);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hg-blue-deep);
  margin-bottom: 0.75rem;
}

.hg-legacy-intro .hg-legacy-intro__lead {
  font-family: var(--hg-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--hg-ink);
  margin-bottom: 1rem;
}

.hg-legacy-intro .hg-legacy-intro__body {
  font-family: var(--hg-body-font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hg-body);
  margin-bottom: 0;
}

.hg-legacy-intro .hg-legacy-intro__body a {
  color: var(--hg-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hg-legacy-intro .hg-legacy-intro__body a:hover,
.hg-legacy-intro .hg-legacy-intro__body a:focus {
  color: var(--hg-ink);
}

.hg-legacy-intro .hg-legacy-intro__facts {
  margin: 1.5rem 0 1.75rem;
}

.hg-legacy-intro .hg-legacy-intro__fact {
  height: 100%;
  padding: 1.25rem 1rem;
  background-color: var(--hg-blue-tint);
  border-top: 2px solid var(--hg-blue);
  text-align: center;
}

.hg-legacy-intro .hg-legacy-intro__fact-title {
  display: block;
  font-family: var(--hg-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--hg-ink);
  margin-bottom: 0.35rem;
}

.hg-legacy-intro .hg-legacy-intro__fact-text {
  display: block;
  font-family: var(--hg-body-font);
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--hg-body);
}

@media (max-width: 767.98px) {
  .hg-legacy-intro { padding: 2rem 0 1.5rem; }
  .hg-legacy-intro .hg-legacy-intro__lead { font-size: 1.2rem; }
}

/* Center the page H1 and breadcrumb on pages that use the Legacy intro */
body:has(.hg-legacy-intro) h1 {
  text-align: center !important;
  width: 100%;
}

body:has(.hg-legacy-intro) .breadcrumb {
  justify-content: center;
}


/* ==========================================================================
   8. HEADER LOGO LEGIBILITY
   Keeps the logo readable over any hero image. Targets the header logo by
   file path; the footer logo (no ?width param) is unaffected.

   The soft glow is painted as the image's own background, so it can never
   extend past the logo's box (the earlier ::before version leaked across
   the top of the page). Padding gives the glow room to fade out; the
   matching negative margin cancels it so the logo does not move or resize.
   ========================================================================== */

/* Corner wash, built from a blurred box-shadow.

   Earlier versions used padding plus negative margins on the logo. That
   overrode the theme's own margins and shifted the logo off the left edge.
   This version touches NO padding, margin, width or position, so the logo
   stays exactly where the theme puts it.

   How it works:
   - background-color fills the area directly behind the logo.
   - box-shadow (same color) extends that fill outward with a soft,
     naturally eased blur. Shadows never affect layout.
   - The negative offset shifts the glow up and left, so it pools toward
     the page corner and fades down and to the right. Whatever runs past
     the page edge is cropped, which reads as light from the corner.
   - Spread minus offset must stay at least half the blur, or a faint
     seam appears at the logo's right/bottom edge. Keep that if you tune. */

img[src*="store-pics/hildgund.png?width"] {
  --hg-wash-color:  rgba(255, 255, 255, 0.45);
  --hg-wash-x:     -40px;  /* pull toward left edge  */
  --hg-wash-y:     -30px;  /* pull toward top edge   */
  --hg-wash-blur:  120px;  /* softness of the fade   */
  --hg-wash-spread: 100px; /* size of the glow       */

  background-color: var(--hg-wash-color);
  box-shadow:
    var(--hg-wash-x) var(--hg-wash-y)
    var(--hg-wash-blur) var(--hg-wash-spread)
    var(--hg-wash-color);
}

@media (max-width: 767.98px) {
  img[src*="store-pics/hildgund.png?width"] {
    --hg-wash-x:     -24px;
    --hg-wash-y:     -18px;
    --hg-wash-blur:   72px;
    --hg-wash-spread: 60px;
  }
}