/* =====================================================================
   SWMM5.ORG  —  CONSOLIDATED CUSTOM CSS
   One ordered file. Replace ALL Additional CSS with this.

   Sections:
     0. Design tokens (color + type system)
     1. Base
     2. Typography
     3. Header & navigation (incl. dropdown sizing)
     4. Homepage hero (title hide, full-width, contrast, CTAs)
     5. Blog / archive / single post cards
     6. Post titles, content, meta
     7. Pills, buttons, links
     8. Sidebar & widgets
     9. Forms
    10. Footer, pagination, breadcrumbs, comments
    11. Blockquotes & code
    12. Misc (images, scroll-top, mobile menu, archive)
    13. Custom hero search section
    14. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. DESIGN TOKENS
   Every color below traces to a value already in your live file.
   Change a brand color here once and it propagates everywhere.
   --------------------------------------------------------------------- */
:root {
    /* Neutral family — navy backgrounds */
    --bg-deep:    #0a1628;   /* page background            */
    --bg-panel:   #0f2744;   /* menus, widgets, footer, code, inputs */
    --bg-panel-2: #1a3a5c;   /* lighter navy (gradient end) */

    /* Neutral family — text */
    --text-light: #e8f4f8;   /* primary light text          */
    --text-mute:  #8ba3b8;   /* nav / widget links          */
    --text-dim:   #5a7a94;   /* footer, captions            */
    --text-dark:  #4a5568;   /* body text on white cards    */
    --text-ink:   #0f2744;   /* dark titles on white        */
    --white:      #ffffff;

    /* Primary accent — cyan/teal */
    --primary:    #00d4ff;   /* cyan: hovers, borders, focus */
    --primary-2:  #00b8a9;   /* teal: links, gradient partner */
    --grad-primary: linear-gradient(135deg, #00d4ff, #00b8a9);

    /* Secondary accent — orange/coral */
    --accent:     #ff6b35;
    --accent-2:   #ff8f5a;
    --grad-accent: linear-gradient(135deg, #ff6b35, #ff8f5a);

    /* Cyan tints (translucent) */
    --cyan-08: rgba(0, 212, 255, 0.08);
    --cyan-10: rgba(0, 212, 255, 0.10);
    --cyan-15: rgba(0, 212, 255, 0.15);
    --cyan-20: rgba(0, 212, 255, 0.20);
    --cyan-30: rgba(0, 212, 255, 0.30);
    --cyan-40: rgba(0, 212, 255, 0.40);

    /* Type scale */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Courier New", Consolas, monospace;
    --fs-h1: 3.5rem;
    --fs-h2: 2rem;
    --fs-body: 1rem;

    /* Shape */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
}

/* ---------------------------------------------------------------------
   1. BASE
   --------------------------------------------------------------------- */
body, .ast-separate-container {
    background: var(--bg-deep) !important;
    color: var(--text-light) !important;
}
.site-content .ast-container {
    background: transparent !important;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
}

/* ---------------------------------------------------------------------
   3. HEADER & NAVIGATION
   --------------------------------------------------------------------- */
header, .site-header, .main-header-bar, .ast-primary-header-bar {
    background: var(--bg-deep) !important;
    border-bottom: 1px solid var(--cyan-15) !important;
}
.site-title a, .ast-site-title-wrap a {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
}
.main-header-menu a, .ast-header-sections-navigation a, nav a, .menu-item a {
    color: var(--text-mute) !important;
    font-weight: 500 !important;
}
.main-header-menu a:hover, nav a:hover, .menu-item a:hover {
    color: var(--primary) !important;
}

/* Dropdown panels */
.main-header-menu .sub-menu, .sub-menu {
    background: var(--bg-panel) !important;
    border: 1px solid var(--cyan-15) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 0 !important;
    min-width: 220px !important;
}
.sub-menu a { color: var(--text-mute) !important; }
.sub-menu a:hover {
    color: var(--primary) !important;
    background: var(--cyan-10) !important;
}

/* Dropdown sizing — collapse tall rows + kill divider bars (was v2 fix) */
.main-header-menu .sub-menu li,
.ast-header-sections-navigation .sub-menu li,
.sub-menu li,
.sub-menu .menu-item {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    border: none !important;
}
.main-header-menu .sub-menu li a,
.ast-header-sections-navigation .sub-menu li a,
.sub-menu li a,
.sub-menu .menu-item a {
    display: block !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    font-size: 0.95rem !important;
    border: none !important;
    min-height: 0 !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------
   4. HOMEPAGE HERO
   --------------------------------------------------------------------- */

/* Hide the WordPress page title ("Welcome1") on home only */
.home .entry-header,
.home header.entry-header,
.home .ast-article-single > header {
    display: none !important;
}

/* Strip the white post container on home */
.home article,
.home .ast-article-single,
.home .type-page,
body.home .ast-separate-container .ast-article-single,
body.page-template-default.home article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Full-width home content + no gap above hero */
.home .site-content .ast-container,
.home .ast-separate-container .ast-article-single,
.home .entry-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.home .ast-container,
.home #primary,
.home .site-content { padding-top: 0 !important; }
.home .entry-content > *:first-child { margin-top: 0 !important; }

/* Custom hero H1 (if the hero block uses .swmm-hero) */
.swmm-hero h1 {
    display: block !important;
    visibility: visible !important;
    font-size: var(--fs-h1) !important;
    color: var(--text-light) !important;
    margin-bottom: 20px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.swmm-hero .highlight-years {
    background: var(--grad-accent) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 600 !important;
}
.swmm-hero .highlight-cyan {
    color: var(--primary) !important;
    font-style: italic !important;
    -webkit-text-fill-color: var(--primary) !important;
}

/* HERO TEXT CONTRAST — single consolidated rule.
   The hero paragraphs carry an inline style attribute and were inheriting
   dark body text. Force them (and their children) light. p[style] scopes
   this to the hero, so white utility cards keep dark text naturally. */
.home .entry-content p[style],
.home .entry-content p[style] * {
    color: var(--text-light) !important;
}
.home .entry-content p[style] strong {
    color: var(--white) !important;
}

/* HERO CTA links -> buttons (primary palette) */
.home .entry-content p a[href*="inside-swmm5"],
.home .entry-content p a[href*="repl-gallery"],
.home .entry-content p a[href*="category/ruby"] {
    display: inline-block;
    margin: 8px 10px 8px 0;
    padding: 14px 26px;
    background: var(--grad-primary) !important;
    color: var(--bg-deep) !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--radius);
    transition: all 0.3s ease;
}
.home .entry-content p a[href*="inside-swmm5"]:hover,
.home .entry-content p a[href*="repl-gallery"]:hover,
.home .entry-content p a[href*="category/ruby"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px var(--cyan-40);
    color: var(--bg-deep) !important;
}

/* "Learn More / Try It" links that sit inside <pre> on home only */
.home .entry-content pre {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    white-space: normal !important;
}
.home .entry-content pre a {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 18px;
    background: var(--cyan-15) !important;
    color: var(--primary) !important;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid var(--primary) !important;
    border-radius: 10px;
    transition: all 0.3s ease;
}
.home .entry-content pre a:hover {
    background: var(--primary) !important;
    color: var(--bg-deep) !important;
}

/* ---------------------------------------------------------------------
   5. BLOG / ARCHIVE / SINGLE CARDS
   --------------------------------------------------------------------- */
.blog article,
.archive article,
.blog .ast-article-post,
.archive .ast-article-post,
.search article {
    background: var(--white) !important;
    border: 2px solid var(--cyan-30) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.3s ease !important;
}
.blog article:hover,
.archive article:hover,
.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
    transform: translateY(-4px);
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px var(--cyan-20) !important;
}
.single article,
.single .ast-article-single {
    background: var(--white) !important;
    border: 2px solid var(--cyan-30) !important;
    border-radius: var(--radius-lg) !important;
    padding: 2rem !important;
}

/* ---------------------------------------------------------------------
   6. POST TITLES, CONTENT, META
   --------------------------------------------------------------------- */
.entry-title,
.entry-title a,
article h2.entry-title,
article h2.entry-title a,
.ast-article-post .entry-title,
.ast-article-single .entry-title {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--text-ink) !important;
    font-style: normal !important;
    text-decoration: none !important;
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
}
.single .entry-title,
.ast-article-single .entry-title { font-size: var(--fs-h2) !important; }
.entry-title a:hover,
article h2 a:hover { color: var(--primary-2) !important; }

/* Hide duplicate large italic titles inside posts */
article .entry-content > h1:first-of-type,
.blog article h1:not(.entry-title),
.archive article h1:not(.entry-title) {
    display: none !important;
}

/* Body text on white cards */
.entry-content p, .entry-summary p, article p, .ast-article-post p {
    color: var(--text-dark) !important;
    font-size: var(--fs-body) !important;
    line-height: 1.7 !important;
}

/* Hide byline/meta everywhere (intentional) */
.entry-meta, .post-meta, .byline { display: none !important; }

/* Post title readable when shown on a dark header */
.entry-header .entry-title,
header.entry-header h1.entry-title { color: var(--white) !important; }

/* ---------------------------------------------------------------------
   7. PILLS, BUTTONS, LINKS
   --------------------------------------------------------------------- */
.cat-links a, .tag-links a, .ast-terms-link a,
a[rel="category tag"], a[rel="tag"] {
    display: inline-block;
    background: var(--cyan-15) !important;
    color: var(--text-ink) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid var(--primary) !important;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.cat-links a:hover, .tag-links a:hover, a[rel="category tag"]:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
}

.ast-button, .button, button, input[type="submit"], .wp-block-button__link {
    background: var(--grad-primary) !important;
    color: var(--bg-deep) !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    border-radius: var(--radius) !important;
    transition: all 0.3s ease !important;
    font-size: var(--fs-body) !important;
}
.ast-button:hover, .button:hover, button:hover, input[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px var(--cyan-40) !important;
}

.entry-content a { color: var(--primary-2) !important; }
.entry-content a:hover { color: var(--primary) !important; }
.read-more a, .ast-read-more-container a, .more-link {
    color: var(--primary-2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}
.read-more a:hover, .ast-read-more-container a:hover, .more-link:hover {
    color: var(--primary) !important;
}

/* Custom hero primary button class */
.swmm-btn-primary,
.swmm-btn-primary:hover,
.swmm-btn-primary:focus,
.swmm-btn-primary:visited {
    color: var(--bg-deep) !important;
    background: var(--grad-primary) !important;
    text-shadow: none !important;
}

/* ---------------------------------------------------------------------
   8. SIDEBAR & WIDGETS
   --------------------------------------------------------------------- */
.widget-area, .sidebar-main { background: transparent !important; }
.widget, .ast-separate-container .widget {
    background: rgba(15, 39, 68, 0.8) !important;
    border: 1px solid var(--cyan-15) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.widget-title, .widget h2 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid var(--cyan-15) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1rem !important;
}
.widget ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.widget li {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--cyan-08) !important;
    font-size: 0.9rem !important;
}
.widget li:last-child { border-bottom: none !important; }
.widget a { color: var(--text-mute) !important; text-decoration: none !important; }
.widget a:hover { color: var(--primary) !important; }

/* ---------------------------------------------------------------------
   9. FORMS
   --------------------------------------------------------------------- */
input[type="search"], input[type="text"], input[type="email"],
input[type="url"], textarea {
    background: var(--bg-panel) !important;
    border: 1px solid var(--cyan-15) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-light) !important;
    padding: 0.75rem 1rem !important;
}
input:focus, textarea:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--cyan-10) !important;
}

/* ---------------------------------------------------------------------
   10. FOOTER, PAGINATION, BREADCRUMBS, COMMENTS
   --------------------------------------------------------------------- */
.site-footer, .ast-footer-overlay, footer, .ast-small-footer {
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--cyan-15) !important;
}
.site-footer, .site-footer p, .site-footer a,
.ast-small-footer a, .ast-footer-copyright { color: var(--text-dim) !important; }
.site-footer a:hover, .ast-small-footer a:hover { color: var(--primary) !important; }

.ast-pagination a, .page-numbers, .nav-links a {
    background: rgba(15, 39, 68, 0.6) !important;
    border: 1px solid var(--cyan-15) !important;
    color: var(--text-mute) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-sm) !important;
}
.ast-pagination a:hover, .page-numbers:hover, .page-numbers.current {
    background: var(--primary) !important;
    color: var(--bg-deep) !important;
    border-color: var(--primary) !important;
}

.ast-breadcrumbs, .ast-breadcrumbs a {
    color: var(--text-mute) !important;
    font-size: 0.85rem !important;
}
.ast-breadcrumbs a:hover { color: var(--primary) !important; }

.ast-separate-container .ast-comment-list li {
    background: rgba(15, 39, 68, 0.6) !important;
    border-radius: var(--radius) !important;
}
.ast-comment-list .comment-content p { color: var(--text-mute) !important; }

/* ---------------------------------------------------------------------
   11. BLOCKQUOTES & CODE
   --------------------------------------------------------------------- */
blockquote, .wp-block-quote {
    background: var(--bg-panel) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
}
blockquote p { color: var(--text-light) !important; }

/* Keep grouped/quote blocks transparent inside post content */
.entry-content blockquote,
.entry-content .wp-block-group {
    background-color: transparent !important;
    color: inherit !important;
}

code, pre, .wp-block-code {
    font-family: var(--font-mono) !important;
    background: var(--bg-panel) !important;
    color: var(--primary) !important;
    border: 1px solid var(--cyan-15) !important;
    border-radius: var(--radius-sm);
}
code { padding: 0.2em 0.5em; font-size: 0.9rem !important; }
pre { padding: 1.5rem !important; }

/* ---------------------------------------------------------------------
   12. MISC
   --------------------------------------------------------------------- */
img, .wp-block-image img { border-radius: var(--radius); }

.ast-scroll-top-icon, #ast-scroll-top {
    background: var(--grad-primary) !important;
    color: var(--bg-deep) !important;
    border-radius: var(--radius) !important;
}

.ast-above-header, .ast-below-header { background: var(--bg-deep) !important; }
.ast-mobile-menu-wrap .main-header-menu, .ast-mobile-popup-drawer {
    background: var(--bg-panel) !important;
}
.ast-mobile-popup-drawer a { color: var(--text-mute) !important; }
.ast-mobile-popup-drawer a:hover { color: var(--primary) !important; }

.ast-archive-description { background: transparent !important; }
.ast-archive-description .ast-archive-title {
    color: var(--text-light) !important;
    font-size: var(--fs-h2) !important;
}

/* ---------------------------------------------------------------------
   13. CUSTOM HERO SEARCH SECTION
   --------------------------------------------------------------------- */
.swmm-search-section {
    background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
    padding: 50px 20px;
    text-align: center;
    border-top: 1px solid var(--cyan-15);
    border-bottom: 1px solid var(--cyan-15);
}
.swmm-search-content { max-width: 700px; margin: 0 auto; }
.swmm-search-title {
    font-size: 1.75rem;
    color: var(--text-light);
    margin-bottom: 10px;
    font-weight: 400;
}
.swmm-search-subtitle { color: var(--text-mute); margin-bottom: 25px; font-size: 1rem; }
.swmm-search-form {
    display: flex; gap: 10px; max-width: 600px;
    margin: 0 auto 20px; flex-wrap: wrap; justify-content: center;
}
.swmm-search-input {
    flex: 1; min-width: 280px;
    padding: 15px 20px !important;
    border: 2px solid var(--cyan-30) !important;
    border-radius: var(--radius) !important;
    background: rgba(10, 22, 40, 0.8) !important;
    color: var(--text-light) !important;
    font-size: 1rem !important;
}
.swmm-search-input::placeholder { color: var(--text-dim) !important; }
.swmm-search-input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--cyan-20) !important;
}
.swmm-search-button {
    padding: 15px 30px !important;
    background: var(--grad-primary) !important;
    color: var(--bg-deep) !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--radius) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem !important;
}
.swmm-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--cyan-40);
}
.swmm-search-tags {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; align-items: center;
}
.swmm-search-tags span { color: var(--text-dim); font-size: 0.85rem; }
.swmm-search-tags a {
    background: var(--cyan-10) !important;
    color: var(--primary) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
    border: 1px solid var(--cyan-30) !important;
    transition: all 0.3s ease;
}
.swmm-search-tags a:hover {
    background: var(--cyan-20) !important;
    border-color: var(--primary) !important;
}

/* ---------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root { --fs-h1: 2.25rem; }
    .swmm-hero h1 { font-size: var(--fs-h1) !important; }
}</pre>

/* Hover lift for the inline navy utility cards */
.home .entry-content div[style*="background: #0f2744"]:hover,
.home .entry-content div[style*="background:#0f2744"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,212,255,0.2);
}