/* ========================================
   HERO SECTION - Background image fix
   ======================================== */

/* The WP minified CSS has a corrupted data URI for the hero background.
   Override with the actual image file. */
.elementor-54340 .elementor-element.elementor-element-975e983:not(.elementor-motion-effects-element-type-background),
.elementor-54340 .elementor-element.elementor-element-975e983 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url('/wp-content/uploads/2025/12/124845.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ========================================
   TOP HEADER BAR - White text on blue background
   ======================================== */

/* Override the blue color on header icons - MAXIMUM SPECIFICITY */
.elementor-element.elementor-element-432a613f .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon,
.elementor-element.elementor-element-432a613f .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon svg,
.elementor-element.elementor-element-432a613f .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Header text - white */
.elementor-element.elementor-element-432a613f .elementor-icon-list-text,
.elementor-element.elementor-element-432a613f .elementor-icon-list-text *,
.elementor-element.elementor-element-432a613f span,
.elementor-element.elementor-element-432a613f p {
    color: #ffffff !important;
}

/* Header links - white */
.elementor-element.elementor-element-432a613f a,
.elementor-element.elementor-element-432a613f a:link,
.elementor-element.elementor-element-432a613f a:visited,
.elementor-element.elementor-element-432a613f a:hover,
.elementor-element.elementor-element-432a613f a:active,
.elementor-element.elementor-element-432a613f a[href^="mailto:"],
.elementor-element.elementor-element-432a613f a[href^="tel:"] {
    color: #ffffff !important;
}

/* FIX DROPDOWN MENU DISPLAY - Make it visible on hover with professional styling */
/* Parent menu items need position:relative so dropdowns position correctly */
.elementor-nav-menu > ul > li.menu-item-has-children,
.elementor-nav-menu > ul > li.menu-item-has-children > a,
.elementor-nav-menu li.menu-item-has-children {
    position: relative !important;
}

/* Center menu items vertically and horizontally */
.elementor-nav-menu--main .elementor-nav-menu {
    align-items: center !important;
    justify-content: center !important;
}

.elementor-nav-menu--main .elementor-nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
}

.elementor-nav-menu li:hover > ul.sub-menu,
.elementor-nav-menu li:hover > .elementor-nav-menu--dropdown,
.elementor-nav-menu .menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu .menu-item-has-children:hover > .elementor-nav-menu--dropdown,
ul.sub-menu:hover,
.elementor-nav-menu--dropdown:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
}

/* Ensure dropdown stays visible when hovering over it */
.elementor-nav-menu .menu-item-has-children:hover > .elementor-nav-menu--dropdown,
.elementor-nav-menu .menu-item-has-children > .elementor-nav-menu--dropdown:hover {
    display: block !important;
    position: absolute !important;
}

/* Professional dropdown styling - match original design
   box-shadow only on hover to prevent shadow artifacts when dropdown is hidden */
.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--dropdown,
.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--main .elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background-color: #ffffff !important;
    border-radius: 0 !important;
}

/* Remove box-shadow from hidden dropdowns - extra .elementor-element class beats
   the inline <style> which loads after this file and has same selector otherwise */
.elementor-87 .elementor-element.elementor-element-52c4e85f .elementor-nav-menu--main > .elementor-nav-menu > li > ul.elementor-nav-menu--dropdown,
.elementor-87 .elementor-element.elementor-element-52c4e85f .elementor-nav-menu--main > .elementor-nav-menu > li > ul.sub-menu {
    box-shadow: none !important;
}

/* Show shadow only when dropdown is visible on hover */
.elementor-87 .elementor-element.elementor-element-52c4e85f .elementor-nav-menu--main > .elementor-nav-menu > li:hover > ul.elementor-nav-menu--dropdown,
.elementor-87 .elementor-element.elementor-element-52c4e85f .elementor-nav-menu--main > .elementor-nav-menu > li:hover > ul.sub-menu {
    box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Fix dropdown positioning - remove gap and align properly
   Must match Elementor's specificity: .elementor-element.elementor-element-52c4e85f */
/* Note: removed .elementor-nav-menu__container.elementor-nav-menu--dropdown selector
   as it also matched the mobile nav container, breaking mobile menu positioning */
.elementor-87 .elementor-element.elementor-element-52c4e85f .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown,
.elementor-nav-menu--main ul.sub-menu,
.elementor-nav-menu--main .elementor-nav-menu--dropdown {
    margin-top: 0 !important;
    top: 100% !important;
}

/* Hover bridge - padding extends the li's hover area to cover the gap,
   preventing hover loss when moving cursor to the dropdown.
   Applied to ALL items so text alignment stays consistent. */
.elementor-nav-menu--main .elementor-nav-menu > li {
    padding-bottom: 15px !important;
}

/* Ensure proper width alignment */
.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--dropdown {
    min-width: 220px !important;
    left: 0 !important;
}

.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown a.elementor-sub-item {
    color: #16163f !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    background-color: transparent !important;
}

.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--dropdown a:hover,
.elementor-87 .elementor-element-52c4e85f .elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
    color: #165DFB !important;
    background-color: transparent !important;
}

/* Email text color in footer */
footer a[href^="mailto:"] {
    color: #aeb4bd !important;
}

/* ========================================
   ICON FIX - Force SVG icons to display
   ======================================== */

/* Force icon containers to have explicit color */
.elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon {
    color: #0066cc !important;
}

/* Force all icon SVGs and paths to use currentColor */
.elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon svg.e-font-icon-svg {
    fill: currentColor !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
}

.elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon svg.e-font-icon-svg path {
    fill: currentColor !important;
}

/* Icon boxes */
.elementor-widget-icon-box .elementor-icon-box-wrapper .elementor-icon-box-icon {
    color: #0066cc !important;
}

.elementor-widget-icon-box .elementor-icon-box-wrapper .elementor-icon-box-icon svg {
    fill: currentColor !important;
}

.elementor-widget-icon-box .elementor-icon-box-wrapper .elementor-icon-box-icon svg path {
    fill: currentColor !important;
}

/* General elementor icons */
.elementor-icon {
    color: inherit !important;
}

.elementor-icon svg,
.elementor-icon .e-font-icon-svg {
    fill: currentColor !important;
}

.elementor-icon svg path,
.elementor-icon .e-font-icon-svg path {
    fill: currentColor !important;
}

/* Social icons - white fill */
.elementor-social-icons .elementor-social-icon {
    color: #fff !important;
}

.elementor-social-icons .elementor-social-icon svg {
    fill: #fff !important;
}

.elementor-social-icons .elementor-social-icon svg path {
    fill: #fff !important;
}

/* Navigation menu icons */
.elementor-nav-menu svg {
    fill: currentColor !important;
}

.elementor-nav-menu svg path {
    fill: currentColor !important;
}

/* Search icons */
.elementor-search-form svg {
    fill: currentColor !important;
}

.elementor-search-form svg path {
    fill: currentColor !important;
}

/* Fallback - any SVG with e-font-icon-svg class */
svg.e-font-icon-svg {
    fill: currentColor !important;
    display: inline-block !important;
}

svg.e-font-icon-svg path {
    fill: currentColor !important;
}

/* Ensure containers are visible */
.e-font-icon-svg-container {
    display: inline-flex !important;
}

/* ========================================
   HUGE ICONS FIX - Accordion arrows
   ======================================== */

/* Ensure Huge Icons font loads correctly */
@font-face {
    font-family: "Huge Icons";
    src: url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/huge-icons/huge-icons.woff2) format("woff2"),
         url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/huge-icons/huge-icons.woff) format("woff"),
         url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/huge-icons/huge-icons.svg#huge-icons) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply Huge Icons font to elements */
i.huge,
.huge {
    font-family: "Huge Icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

/* Accordion icon visibility */
.e-n-accordion-item-title-icon i.huge {
    visibility: visible !important;
    opacity: 1 !important;
    color: currentColor !important;
}

/* ========================================
   HAPPY ICONS FIX - Thunder and Shield icons
   ======================================== */

/* Ensure Happy Icons font loads correctly */
@font-face {
    font-family: "Happy Icons";
    src: url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/happy-icons.woff2) format("woff2"),
         url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/happy-icons.woff) format("woff"),
         url(https://www.cybergrantsalliance.org/wp-content/plugins/happy-elementor-addons/assets/fonts/happy-icons.svg#happy-icons) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply Happy Icons font to elements */
i.hm,
.hm {
    font-family: "Happy Icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    speak: none !important;
}

/* Happy icon visibility */
i.hm {
    visibility: visible !important;
    opacity: 1 !important;
    color: currentColor !important;
}

/* Fix image spacing - Remove extra space below images */
.elementor-post__thumbnail img,
.elementor-widget-image img,
.attachment-medium,
.attachment-full {
    display: block;
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

/* Ensure image containers don't add extra space */
.elementor-post__thumbnail {
    line-height: 0;
    overflow: hidden;
}

/* Fix thumbnail container height - fit content */
.elementor-post__thumbnail,
.elementor-post__thumbnail__link {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

/* Override any Elementor padding-bottom aspect ratio tricks */
.elementor-post__thumbnail::before,
.elementor-post__thumbnail::after {
    content: none !important;
    display: none !important;
    padding-bottom: 0 !important;
}

/* Specific fix for press release post grid */
.elementor-posts-container .elementor-post__thumbnail,
.elementor-posts .elementor-post__thumbnail {
    padding-bottom: 0 !important;
}

/* ========================================
   ARTICLE BODY STYLES (Kentucky Template)
   ======================================== */

.article-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #16163f;
    line-height: 1.7;
}

.article-body .hero-img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto 32px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.article-body h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #16163f;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.article-body .meta {
    font-size: 0.95rem;
    color: #52525b;
    margin: 0 0 32px 0;
    padding-bottom: 24px;
    border-bottom: 2px solid #e5e7eb;
}

.article-body .stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    background: #f0f4ff;
    border-radius: 8px;
    padding: 24px;
    margin: 0 0 32px 0;
    border: 1px solid #e5e7eb;
}

.article-body .stat-item {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 16px;
}

.article-body .stat-val {
    font-size: 2rem;
    font-weight: 700;
    color: #165DFB;
    line-height: 1;
    margin-bottom: 8px;
}

.article-body .stat-label {
    font-size: 0.875rem;
    color: #52525b;
    font-weight: 500;
}

.article-body .toc {
    background: #f0f4ff;
    border-left: 4px solid #165DFB;
    padding: 20px 24px;
    margin: 0 0 32px 0;
    border-radius: 0 8px 8px 0;
}

.article-body .toc-title {
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 12px 0;
    color: #16163f;
}

.article-body .toc ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

.article-body .toc a {
    color: #165DFB;
    text-decoration: none;
}

.article-body .toc a:hover {
    text-decoration: underline;
}

.article-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #16163f;
    margin: 40px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.article-body h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-body p {
    margin: 0 0 20px 0;
    font-size: 1rem;
}

.article-body ul, .article-body ol {
    margin: 0 0 24px 0;
    padding-left: 20px;
    line-height: 1.8;
}

.article-body li {
    margin-bottom: 8px;
}

.article-body .callout {
    background: #f0f4ff;
    border-left: 4px solid #165DFB;
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 0 8px 8px 0;
}

.article-body .callout-title {
    font-weight: 700;
    font-size: 16px;
    color: #16163f;
    margin: 0 0 12px 0;
}

.article-body .cta {
    background: linear-gradient(135deg, #165DFB 0%, #0f47d4 100%);
    color: #ffffff;
    padding: 32px;
    border-radius: 12px;
    margin: 40px 0;
    text-align: center;
}

.article-body .cta h3 {
    font-size: 1.5rem;
    margin: 0 0 12px 0;
    color: #ffffff;
}

.article-body .cta p {
    margin: 0 0 20px 0;
    color: #ffffff;
    opacity: 0.9;
}

.article-body .cta a {
    display: inline-block;
    background: #ffffff;
    color: #165DFB;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-body .cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.article-body .disclaimer {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    font-style: italic;
}

.article-body a {
    color: #165DFB;
    text-decoration: none;
}

.article-body a:hover {
    text-decoration: underline;
}

/* INDUSTRY POST HERO — constrain Napkin-generated infographics */
.article-body .hero-img {
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto 32px auto;
    display: block;
}

/* ========================================
   HEADER OVERFLOW FIX - Prevent nav from stretching off screen
   ======================================== */

/* Force header containers to respect viewport - use clip instead of overflow:hidden
   so dropdown sub-menus are not clipped (overflow:hidden on any axis forces the other
   axis to auto, creating a clipping container that hides absolutely-positioned dropdowns) */
.elementor-element.elementor-element-e557121,
.elementor-element.elementor-element-432a613f,
header[data-elementor-type="header"] {
    overflow: visible !important;
    max-width: 100vw !important;
}

/* Constrain the stretched nav menu but allow dropdown overflow */
.elementor-nav-menu--stretch {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Ensure nav menu container doesn't overflow horizontally but allows dropdowns */
.elementor-87 .elementor-element-52c4e85f {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Force main nav to stay within bounds but allow dropdowns to show */
.elementor-nav-menu--main {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Header horizontal overflow prevention without clipping dropdowns */
.elementor-location-header {
    overflow: visible !important;
}

/* On mobile, restore overflow:hidden since dropdowns aren't used
   (mobile uses fixed-position fullscreen menu instead) */
@media (max-width: 767px) {
    .elementor-element.elementor-element-e557121,
    .elementor-element.elementor-element-432a613f,
    header[data-elementor-type="header"],
    .elementor-nav-menu--stretch,
    .elementor-87 .elementor-element-52c4e85f,
    .elementor-nav-menu--main,
    .elementor-location-header {
        overflow: hidden !important;
    }
}

/* Fix z-index on mobile menu toggle - make sure it's above everything */
.elementor-menu-toggle {
    z-index: 9999 !important;
    position: relative !important;
}
