/*
Theme Name: San Antonio Genealogical and Historical Society
Template: societypress
Version: 1.0.4
Text Domain: saghs
Description: Private child theme that carries the San Antonio Genealogical and Historical Society site design (palette, type, and layout) captured from its live SocietyPress install. Intentionally minimal: it overrides no templates, so it inherits every parent template unchanged and only owns the Design settings applied on activation. Not part of the public SocietyPress product; never distributed.
*/

/*
 * No custom CSS is needed: the SAGHS design is expressed entirely through the
 * plugin's Design settings (written on activation in functions.php), which the
 * plugin emits as a :root {} block after this stylesheet. If the site's
 * "Custom CSS" Design field is ever used, mirror it here so it travels with
 * the theme.
 */

/* ---------------------------------------------------------------------------
   Content width in REAL screen pixels.
   The content-width preference is the author's own pixels. functions.php sets
   The content column follows --sp-content-width straight from Design settings
   renders at that many PHYSICAL pixels on any display. The hero lives outside
   .site-content, so it stays full-bleed.
--------------------------------------------------------------------------- */
.site-content { max-width: var(--sp-content-width, 1200px); }

/* ---------------------------------------------------------------------------
   Cap the header and footer bands to the content width, using the same
   same --sp-content-width the content column uses, so their edges land on the
   content edges at any pixel ratio. The hero is intentionally full-bleed.
--------------------------------------------------------------------------- */
.site-header,
.site-footer {
    width: 100%;
    max-width: var(--sp-content-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Stretch ONLY the tan across the full window: a full-width layer behind the
   footer supplies the color, so the footer box and its content stay capped and
   in place. */
.site-footer { position: relative; background: transparent; }
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    background: var(--sp-color-footer-bg, #f7ecd6);
    z-index: 0;
}
/* Every direct child of the footer has to be lifted above that band, not just
   .footer-inner. WHY: ::before is absolutely positioned, and in CSS painting
   order a positioned element — even at z-index: 0 — paints on top of ALL
   non-positioned content, text included. Lifting only .footer-inner meant the
   tan layer covered everything after the columns: the affiliation logos the
   plugin prints and the copyright line beneath them both rendered into the
   page and were then painted over, so the footer just looked short.
   Using > * instead of naming the children keeps anything SocietyPress adds to
   the footer later visible without another fix here. */
.site-footer > * { position: relative; z-index: 1; }

/* Footer hours column (middle): match the footer's body text styling. */
.footer-col-hours { color: var(--sp-color-footer-text); }
.footer-col-hours .footer-hours-widget p { margin: 0 0 10px; line-height: 1.7; font-size: 0.7rem; }
.footer-col-hours .footer-hours-widget p:last-child { margin-bottom: 0; }

/* Footer type sized to match the top nav (0.7rem) per request — the parent
   theme sets larger sizes (base 0.85, columns/links 0.9, headings 1.1, bottom
   bar 0.8), so override each here. */
.site-footer { font-size: 0.7rem; }
.footer-heading { font-size: 0.7rem; }
.footer-text,
.footer-nav a,
.footer-bottom,
.footer-powered-by { font-size: 0.7rem; }

/* Header height per the SAGHS design. */
.header-inner { height: 146px; min-height: 146px; }

/* Header band: paint the SAME full-window background as the footer so the top
   and bottom of the page bookend in one color. Mirrors the footer's full-bleed
   ::before (tracks --sp-color-footer-bg, so a footer recolor carries here too);
   the header box itself stays capped to content width. Doubled class + drop the
   parent's partial-width box-shadow, which would otherwise streak across the
   full-width tan. */
/* Lock the header to the top: sticky keeps it in normal flow (no body-padding
   compensation) but pins it to the viewport top as the page scrolls under it.
   z-index sits it above the page content and the hero. */
.site-header.site-header { position: sticky; top: 0; z-index: 99990; background: transparent; box-shadow: none; }
/* When the WP admin bar is present (logged-in users only), it's fixed over the
   top 32px of the viewport. Drop the sticky header below it so the header's top
   strip — where the social icons sit at top:0 — isn't hidden behind the bar as
   you scroll. Public visitors have no admin bar, so the top:0 above stands. */
body.admin-bar .site-header.site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header.site-header { top: 46px; } }
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    background: var(--sp-color-footer-bg, #fbebd2);
    z-index: 0;
}
/* Same lift as the footer, and for the same reason: the band above is an
   absolutely positioned ::before, so any non-positioned child of the header
   would be painted over by it. A no-op today (.header-inner is the only child)
   — it's here so adding a second child later doesn't silently vanish. */
.header-inner.header-inner { position: relative; z-index: 1; }
.site-header > * { position: relative; z-index: 1; }

/* Pull the logo flush to the left content edge (the content-width boundary). The outer
   .site-header carries 20px of side padding and the inner wrapper adds its own;
   zero both left paddings so the logo touches the line. Doubled class outranks
   the parent's padding shorthand, which loads later. */
.site-header.site-header { padding-left: 0; padding-right: 0; }
.header-inner.header-inner { padding-left: 0; padding-right: 0; }

/* Center the menu in the band between the logo's right edge and the right
   content line. The nav container already fills that band, so centering its
   items places the menu midway between the logo and the right line. */
.main-navigation.main-navigation > ul { justify-content: center; }

/* Smaller nav menu font and tighter spacing between items (the gap between
   items is link side-padding, not a flex gap). Doubled class outranks parent. */
.main-navigation.main-navigation a { font-size: 0.7rem; padding-left: 10px; padding-right: 10px; }

/* Hide the footer social column only; header social icons are shown below. */
.footer-col-social { display: none !important; }

/* Social icons float at the top-right of the header, above the menu, taken out
   of flow (absolute) so the menu row keeps its original centered position. */
.header-inner.header-inner { position: relative; }
.header-nav-area .sp-social-icons {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}

/* Profile menu: name "Charles" on the left, circular avatar on the right,
   vertically centered on the name's midline. Reorders the trigger's children,
   rounds the photo, and drops the dropdown caret. Doubled classes outrank the
   parent theme, which loads after this stylesheet. */
.sp-user-trigger.sp-user-trigger { display: flex; align-items: center; gap: 8px; }
.sp-user-name.sp-user-name { order: 1; }
.sp-user-avatar.sp-user-avatar { order: 2; border-radius: 50%; object-fit: cover; }
.sp-user-caret.sp-user-caret { display: none; }

/* ---------------------------------------------------------------------------
   Hero size matches the original ENS site's banner: full-bleed width (kept
   from the parent) and a fixed 495px height. The doubled class raises
   specificity above the parent's vh-based .sp-hero-* rules, which load after
   this stylesheet, without resorting to !important.
--------------------------------------------------------------------------- */
.sp-front-hero.sp-front-hero {
    min-height: 500px;
    height: 500px;
}

/* Remove the animated scroll-down chevron at the bottom of the hero. */
.sp-front-hero-scroll.sp-front-hero-scroll { display: none; }

/* Hero headline: bold and smaller. */
.sp-front-hero-headline.sp-front-hero-headline {
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

/* Shift the hero video down a bit (center below 50%) so more of its upper
   half shows within the frame. */
.sp-front-hero-video.sp-front-hero-video { top: 65%; }

/* ---------------------------------------------------------------------------
   HOMEPAGE — recreates the SAGHS front page (hero handled by the parent
   front-page template; these rules cover the page-builder content below it):
   a Library media row, the three feature cards, and the "Open in Maps" link.
   Layout-only; all copy and images are editable from Pages → Home.
--------------------------------------------------------------------------- */

/* Library: image | text | More button, three columns that stack on narrow screens. */
/* Stretch the media row out to both red lines (the content area + inner wrapper
   inset it 40px each side), so the photo hits the left line, the More button
   hits the right line, and the flexible text fills the space between. */
.saghs-media-row{display:flex;align-items:flex-start;gap:40px;margin:8px -40px 0;}
.saghs-media-img{flex:0 0 46%;max-width:46%;}
.saghs-media-img img{width:100%;height:auto;display:block;}
.saghs-media-text{flex:1 1 auto;}
.saghs-media-text h2{margin-top:0;color:#8a8a8a;font-weight:400;}
.saghs-media-text p{margin:0 0 16px;line-height:1.6;}
.saghs-media-more{flex:0 0 auto;}

/* Feature cards: blue titles, left-aligned body copy, centered maroon buttons. */
/* Bleed the grid -40px each side (matching the Library row) so the outer cards'
   gray backgrounds land on the red lines; the 28px gaps stay as white gutters.
   Pull the row up under the Library block by killing the section padding that
   the plugin puts between widgets (see the .sp-widget overrides below). */
.sp-feature-cards-grid{display:grid;gap:28px;margin:-20px -40px 0;}
/* WHY: the plugin sets grid-template-columns inline but omits display:grid,
   so without this rule the cards fall back to block flow and stack. */
.sp-widget--feature_cards{padding-top:0;}
.sp-widget--rich_text:has(+ .sp-widget--feature_cards){padding-bottom:0;margin-bottom:0;}
.sp-feature-card h3{color:#2f6fb3;font-weight:600;text-align:left;}
.sp-feature-card p{color:#1a1a1a;text-align:left;white-space:pre-line;line-height:1.6;}
.sp-feature-card{display:flex;flex-direction:column;}
.sp-feature-card .sp-feature-card-btn{align-self:center;margin-top:auto;}

/* Location map: bleed the embed out to both red lines (same -40px trick as the
   Library row). The plugin's inline builder CSS loads AFTER this stylesheet and
   sets `.sp-map-embed-wrap{max-width:...;margin:0 auto}`, so a plain selector
   loses the tie on load order — the doubled class outranks it. */
.sp-map-embed-wrap.sp-map-embed-wrap{max-width:none;margin:0 -40px;}
.sp-map-embed-wrap iframe{display:block;width:100%;}
/* Pull the map up under the cards and zero its own top/bottom padding. The
   plugin's builder CSS loads at wp_head priority 99 (AFTER this stylesheet) and
   sets `.sp-widget{padding:40px 20px}` at equal specificity, so a single class
   loses on source order — double it to win. */
.sp-widget--map_embed.sp-widget--map_embed{margin-top:-50px;padding-top:10px;padding-bottom:20px;}
/* Kill the remaining below-map space on the home page only: the page wrapper's
   40px bottom pad and the entry-content wrapper's 40px bottom margin, so the map
   meets the footer without stripping that spacing from every other page. */
.home .site-content{padding-bottom:0;}
.home .entry-content{margin-bottom:0;}

/* "Open in Maps" — a plain blue link with an external-link glyph, like the original. */
.saghs-maps-link{margin:24px 0 64px;}
.saghs-maps-link a{color:#2f6fb3;text-decoration:none;font-size:15px;}
.saghs-maps-link a::after{content:" \2197";}

@media (max-width:768px){
  .saghs-media-row{flex-direction:column;gap:20px;margin:8px 0 0;}
  .saghs-media-img,.saghs-media-img{max-width:100%;flex-basis:auto;}
  /* Drop the -40px bleed once the cards stack, or they overflow the viewport. */
  .sp-feature-cards-grid{margin:8px 0 0;}
  .sp-map-embed-wrap.sp-map-embed-wrap{margin:0;}
}

/* Signed out, "Log In" sits in the top row beside the social icons once the
   menu collapses, rather than in the logo row. 192px clears the four icons.
   Doubled class outranks the parent theme, which loads after this stylesheet. */
@media (max-width:1280px){
  .header-nav-area .sp-user-menu.sp-user-menu:has(.sp-user-login-link){position:absolute;top:0;right:192px;margin:0;z-index:2;}
}