Additional CSS to make my Ash Pro work

Just finished the bulk of my site and wanted to share with you my Additional CSS. The menu of the mobile site is probably important for you for the next version.

/* This targets the specific background container in Ashe Pro */

.header-image-inner {

position: relative;

}

 

/* This creates the dark layer and forces it to show */

.header-image-inner::after {

content: “” !important;

display: block !important;

position: absolute !important;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.6) !important; /* Adjust 0.6 to 0.8 for even darker */

z-index: 1 !important;

}

/* Adds a shadow to the Tagline for better readability */

.site-description {

text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);

font-weight: 500;

}

 

/* Optional: Adds a shadow to the Site Title too */

.site-title a {

text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);

}

.site-description {

background: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */

display: inline-block;

padding: 10px 20px;

border-radius: 5px;

margin-top: 15px;

}

/* Move Featured Link titles to the TOP of the first three boxes */

.featured-link .cv-outer {

display: flex !important;

align-items: flex-start !important; /* This moves it to the top */

height: 100%;

}

 

.featured-link .cv-inner {

display: block !important;

width: calc(100% – 20px) !important;

/* Semi-transparent white background */

background: rgba(255, 255, 255, 0.9) !important;

padding: 10px !important;

margin: 10px auto !important;

border-radius: 4px;

text-align: center;

}

 

.featured-link h6 {

margin: 0 !important;

font-size: 14px !important;

font-weight: 800;

color: #000000 !important;

}

 

/* 1. Hide the box if the h6 is empty or contains only a space */

.featured-link .cv-inner:has(h6:empty),

.featured-link .cv-inner:not(:has(h6:not(:empty))) {

display: none !important;

}

 

/* 2. Double-check: if the inner div itself is somehow empty */

.featured-link .cv-inner:empty {

display: none !important;

}

 

/* Ensure the link covers the whole area */

.featured-link a {

display: flex;

flex-direction: column;

justify-content: flex-end;

}

/* Force all Featured Link images to the same height and width */

.featured-link img {

height: 250px !important; /* Adjust this number to make the boxes taller or shorter */

width: 100% !important;

object-fit: cover !important; /* This prevents the image from looking stretched */

object-position: center !important; /* Keeps the focus on the middle of the photo */

}

 

.featured-link {

overflow: hidden; /* Keeps everything tidy inside the box */

}

/* Target the Podcast Category Archive Page */

.category-podcast .read-more a {

font-size: 0 !important;

text-transform: uppercase;

}

 

.category-podcast .read-more a::before {

content: “Listen Now” !important;

font-size: 14px !important; /* Adjust size to match your theme */

visibility: visible !important;

display: inline-block !important;

}

 

/* If your theme uses an arrow icon, this hides it for podcasts */

.category-podcast .read-more a i {

display: none !important;

}

/* Ensure images in specific categories maintain a consistent aspect ratio */

.category-community-resources .post-media img,

.category-partnerships .post-media img {

width: 100%;

height: auto;

object-fit: cover; /* Ensures the image fills the area without distortion */

aspect-ratio: 16 / 9; /* Adjust this ratio (e.g., 4/3 or 1/1) to match your preference */

}

 

/* Optional: Removes any theme-specific padding/margins that might differ */

.category-community-resources .post-media,

.category-partnerships .post-media {

margin-bottom: 20px;

}

/* 1. Remove the link capability from parent items */

#mobile-menu .menu-item-has-children > a {

pointer-events: none !important;

cursor: default;

}

 

/* 2. Stretch the toggle area to cover the whole row */

#mobile-menu .menu-item-has-children {

position: relative;

}

 

#mobile-menu .sub-menu-toggle {

position: absolute !important;

top: 0;

left: 0;

width: 100% !important; /* This makes the whole row clickable */

height: 100% !important;

min-height: 45px;

text-align: right;

padding-right: 20px;

display: flex;

align-items: center;

justify-content: flex-end;

z-index: 10;

pointer-events: auto !important; /* This ensures the click is captured */

}

 

/* 3. Style the arrow to make it clear it’s a dropdown */

#mobile-menu .sub-menu-toggle::before {

font-family: “Font Awesome 5 Free”;

content: “\f107”; /* Down arrow icon */

font-weight: 900;

font-size: 16px;

}

/* Adds a dark tinted box behind the slider text */

.slider-item .slider-info {

background: rgba(0, 0, 0, 0.4); /* Black with 40% transparency */

padding: 20px 30px;

border-radius: 5px;

display: inline-block; /* Keeps the box tight around the text */

}

 

.slider-item .slider-info h2 a {

color: #ffffff !important;

}

/* Adds a dark tinted box behind the slider text */

.slider-item .slider-info {

background: rgba(0, 0, 0, 0.4); /* Black with 40% transparency */

padding: 20px 30px;

border-radius: 5px;

display: inline-block; /* Keeps the box tight around the text */

}

 

.slider-item .slider-info h2 a {

color: #ffffff !important;

}

/* Hide the slider by default on all pages */

.slider-item,

.flexslider {

display: none !important;

}

 

/* Show the slider only on the homepage */

.home .slider-item,

.home .flexslider {

display: block !important;

}

/* Fix for Featured Link labels getting cut off */

.featured-links .featured-link-title {

padding-bottom: 5px !important; /* Adds space at the bottom of the text */

overflow: visible !important;   /* Prevents the container from hiding text */

line-height: 1.2 !important;    /* Adjusts spacing between lines if text wraps */

}

 

/* Ensures the text box itself has enough height */

.featured-links .featured-link-content {

padding: 10px !important;

min-height: 60px; /* Forces a minimum height so long text doesn’t hit the edge */

}