/*
Theme Name: STLACS - SVACS Style
Theme URI: https://www.stlacs.org/
Description: Child theme for stlacs.org (ACS Saint Louis Section) that restyles the site to match the look and feel of siliconvalleyacs.org (ACS Silicon Valley Section) - navy/gold palette, card-based news & events, dark footer. Built on the Astra parent theme, which stlacs.org already runs (confirmed live: Astra 4.14.2).
Author:
Template: astra
Version: 1.1.0
Text Domain: acs-stl-child
*/

/* =========================================================
   1. BRAND VARIABLES
   Verified 2026-11-12 by reading computed styles directly off
   the live siliconvalleyacs.org DOM (not just screenshots).
   Its theme exposes --wp--preset--color--navy-blue: #00387d and
   --dark-blue: #080f1e verbatim, and getComputedStyle confirms
   Roboto (not Poppins) is the font actually rendered on every
   heading, nav item, and button there, at weight 500; body copy
   is Roboto 400. Button/badge text computes to rgb(26,26,26).
   Footer link color computes to rgba(255,255,255,.75), full
   white on hover.
   ========================================================= */
:root {
    --acs-navy:        #00387D;  /* heading / link color, primary brand blue */
    --acs-navy-dark:   #080F1E;  /* footer background, near-black navy */
    --acs-blue-mid:    #5F92BF;  /* hero banner overlay blue (sits over a photo) */
    --acs-gold:        #FFCE34;  /* accent: underlines, buttons, search icon, badges */
    --acs-gold-hover:  #E6B820;
    --acs-bg-light:    #F7F8FA;  /* page background behind white cards */
    --acs-white:       #FFFFFF;
    --acs-text-body:   #33383D;
    --acs-text-muted:  #6B7280;
    --acs-text-on-accent: #1A1A1A; /* text color used on gold/white buttons */
    --acs-footer-text: rgba(255, 255, 255, 0.75);
    --acs-border:      #E5E8EC;
    --acs-radius:      6px;
    --acs-font-heading: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
    --acs-font-body:    'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* =========================================================
   2. BASE TYPOGRAPHY
   ========================================================= */
body {
    font-family: var(--acs-font-body);
    color: var(--acs-text-body);
    background-color: var(--acs-bg-light);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.ast-woocommerce-container h1 {
    font-family: var(--acs-font-heading);
    color: var(--acs-navy);
    font-weight: 500;
}

a {
    color: var(--acs-navy);
}
a:hover {
    color: var(--acs-blue-mid);
}

/* Section / page title with the SVACS gold underline accent.
   Add class "acs-underline" to a heading block in the editor,
   or it is applied automatically to page titles below. */
.page-title,
.acs-underline {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 30px !important;
}
.page-title::after,
.acs-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background: var(--acs-gold);
}
/* Centered variant, e.g. section headings on a centered layout */
.acs-underline.acs-underline-center {
    text-align: center;
}
.acs-underline.acs-underline-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* =========================================================
   3. HEADER & NAVIGATION
   ========================================================= */
.ast-primary-header-bar,
.main-header-bar {
    background-color: var(--acs-white);
    border-bottom: 1px solid var(--acs-border);
}

.main-navigation .menu-item > a,
.ast-builder-menu .menu-link {
    color: #000000;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item > a:hover {
    color: var(--acs-navy);
}

/* Active/hover gold underline on top-level nav items */
.main-header-bar-navigation .main-navigation ul > li > a {
    position: relative;
}
.main-header-bar-navigation .main-navigation ul > li.current-menu-item > a::after,
.main-header-bar-navigation .main-navigation ul > li > a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    background: var(--acs-gold);
}

/* Header search - styled as the small solid gold square icon button
   seen on siliconvalleyacs.org. Requires the Astra "Header Search" /
   "Menu Search Icon" element to be added in Customizer > Header Builder. */
.ast-header-search .astra-search-icon,
.ast-search-icon {
    background-color: var(--acs-gold);
    border-radius: 4px;
    padding: 10px;
}
.ast-header-search .astra-search-icon svg,
.ast-search-icon svg {
    fill: var(--acs-text-on-accent);
}

/* Breadcrumbs (Astra > Customizer > Breadcrumb - enable sitewide) */
.ast-breadcrumbs-container {
    background: transparent;
    padding: 20px 0 0;
    font-size: 0.9rem;
}
.ast-breadcrumbs-container a {
    color: var(--acs-navy);
}

/* =========================================================
   4. HERO / FRONT PAGE BANNER
   Apply the "acs-hero" class to the Group/Cover block used as
   the homepage banner (see Customizer Guide, Step 3). SVACS's
   own hero is a photo with this blue laid over it as a tint -
   use a background-image on .acs-hero for the closest match.
   ========================================================= */
.acs-hero {
    background: linear-gradient(180deg, rgba(95,146,191,0.88), rgba(95,146,191,0.82)), var(--acs-blue-mid);
    background-size: cover;
    background-position: center;
    color: var(--acs-white);
    padding: 70px 40px;
    border-radius: 0;
}
.acs-hero h1, .acs-hero h2 {
    color: var(--acs-white);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    max-width: 780px;
    margin-bottom: 30px;
}
.acs-hero .acs-hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.acs-hero .acs-hero-buttons a {
    background: var(--acs-white);
    color: var(--acs-text-on-accent);
    font-weight: 500;
    padding: 14px 26px;
    border-radius: var(--acs-radius);
    text-decoration: none;
}
.acs-hero .acs-hero-buttons a:hover {
    background: var(--acs-gold);
}

/* =========================================================
   5. BUTTONS (Gutenberg / Astra buttons sitewide)
   ========================================================= */
.wp-block-button__link,
.ast-button,
button:not(.ast-search-icon):not(.astra-search-icon),
input[type="submit"] {
    background-color: var(--acs-gold);
    color: var(--acs-text-on-accent);
    border-radius: 4px;
    font-weight: 500;
    border: none;
}
.wp-block-button__link:hover,
.ast-button:hover,
input[type="submit"]:hover {
    background-color: var(--acs-gold-hover);
    color: var(--acs-text-on-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--acs-navy);
    color: var(--acs-navy);
}

/* =========================================================
   6. BLOG / NEWS CARDS
   Pair with Customizer > Blog > Layout = "Grid" (2 columns)
   so posts render as cards like SVACS "Recent news".
   ========================================================= */
.ast-article-post {
    background: var(--acs-white);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    padding: 0 0 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(8, 15, 30, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ast-article-post:hover {
    box-shadow: 0 8px 20px rgba(8, 15, 30, 0.12);
    transform: translateY(-2px);
}
.ast-article-post .post-thumb img {
    border-radius: 0;
}
.ast-article-post .entry-header,
.ast-article-post .entry-content,
.ast-article-post .entry-meta {
    padding-left: 22px;
    padding-right: 22px;
}
.ast-article-post .entry-title a {
    color: var(--acs-navy);
    font-size: 1.15rem;
}
.ast-article-post .entry-meta,
.ast-article-post .entry-meta * {
    color: var(--acs-text-muted);
    font-size: 0.85rem;
}
.ast-article-post .entry-content p {
    color: var(--acs-text-body);
    font-size: 0.95rem;
}

/* Pagination arrows styled as the dark navy squares seen on SVACS */
.pagination-nav .page-numbers,
.ast-pagination a,
.ast-pagination span {
    background: var(--acs-navy-dark);
    color: var(--acs-white);
    border-radius: 4px;
    padding: 8px 14px;
}
.ast-pagination .page-numbers.current {
    background: var(--acs-gold);
    color: var(--acs-text-on-accent);
}

/* =========================================================
   7. EVENTS (The Events Calendar / Events Calendar Pro)
   stlacs.org already has this plugin installed and populated
   (confirmed live - no install step needed). This just recolors
   its default markup to match SVACS's navy date badge + gold
   "View Calendar" button pattern.
   ========================================================= */
.tribe-events .tribe-event-date-tag,
.tribe-events-calendar-list__event-date-tag,
.tribe-events-widget-events-list__event-date-tag {
    background: var(--acs-navy-dark);
    color: var(--acs-white);
}
.tribe-events-c-top-bar__datepicker-button,
.tribe-common .tribe-common-c-btn,
a.tribe-events-c-view-selector__list-item-link,
.tribe-events-widget-events-list__view-more-link {
    background: var(--acs-gold);
    color: var(--acs-text-on-accent);
    border-radius: 4px;
}
.acs-view-calendar-btn {
    display: inline-block;
    background: var(--acs-gold);
    color: var(--acs-text-on-accent);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
}
.acs-view-calendar-btn:hover {
    background: var(--acs-gold-hover);
}

/* =========================================================
   8. SIDEBAR WIDGETS
   ========================================================= */
.widget {
    background: var(--acs-white);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    padding: 20px;
    margin-bottom: 24px;
}
.widget-title {
    font-family: var(--acs-font-heading);
    color: var(--acs-navy);
    border-bottom: 3px solid var(--acs-gold);
    padding-bottom: 10px;
    display: inline-block;
}

/* =========================================================
   9. FOOTER
   Set Customizer > Footer > Background = --acs-navy-dark first;
   this CSS handles headings, underline accent, and link color.
   ========================================================= */
.footer-adv, .ast-small-footer,
.site-footer, .site-below-footer-wrap {
    background-color: var(--acs-navy-dark);
    color: var(--acs-footer-text);
}
.footer-adv .widget-title,
.site-footer .widget-title,
.footer-adv h2, .footer-adv h3 {
    color: var(--acs-white);
    font-family: var(--acs-font-heading);
    font-weight: 500;
    font-size: 23px;
    position: relative;
    padding-bottom: 14px;
    border-bottom: none;
    display: block;
}
.footer-adv .widget-title::after,
.footer-adv h2::after, .footer-adv h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--acs-gold);
}
.footer-adv a, .site-footer a,
.footer-adv li, .site-footer li {
    color: var(--acs-footer-text);
    text-decoration: none;
}
.footer-adv a:hover, .site-footer a:hover {
    color: var(--acs-white);
}
.footer-adv .textwidget input[type="email"],
.footer-adv .textwidget input[type="text"] {
    border-radius: 4px;
    border: none;
    padding: 10px 14px;
}

/* Social icons as filled circles */
.footer-adv .social-icon a,
.acs-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3B7DD8;
    color: var(--acs-white) !important;
    margin-right: 8px;
}

/* =========================================================
   10. RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 768px) {
    .acs-hero { padding: 40px 20px; }
    .acs-hero .acs-hero-buttons { flex-direction: column; }
}