/*
Theme Name: Education Hub Child
Theme URI: https://wenthemes.com/item/wordpress-themes/education-hub/
Description: Child theme of Education Hub. Holds the site's custom CSS (formerly in Appearance > Customize > Additional CSS) so it survives parent theme updates.
Author: Site Admin
Template: education-hub
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GPLv3
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: education-hub-child
*/

/*================================================================
 PART 1 - OVERRIDES OF THE STOCK style.css
 Palette:  Maroon #630808 | Dark #333333 | Light #f3f3f3
 Loaded FIRST so the site-specific rules in Part 2 win wherever
 both set the same property (e.g. the #C44E5E nav/footer borders
 and the tomato mobile menu text).
================================================================*/

/*--------------------------------------------------------------
 1. TYPOGRAPHY
 Reference: "Typography / Elements" in style.css
--------------------------------------------------------------*/

/* Body text is 16px (stock: 14px) */
body {
    font-size: 16px;
}

/* Heading color is dark grey (stock: blue #294a70) */
h1, h2, h3, h4, h5, h6 {
    color: #333333;
}

/* h2 = 22px, h3 = 18px (stock: 20px / 17px).
   h2 is limited to desktop so the stock mobile size (20px) stays. */
@media only screen and (min-width: 768px) {
    h2 {
        font-size: 22px;
    }
}
h3 {
    font-size: 18px;
}

/* Blockquote accent bar */
blockquote {
    border-left: 4px solid #630808;
}


/*--------------------------------------------------------------
 2. FORMS & BUTTONS
 Reference: "Forms" in style.css
--------------------------------------------------------------*/
button,
a.cta-button-primary,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: #630808;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    background-color: #333333;
}


/*--------------------------------------------------------------
 3. LINKS
 Reference: "Navigation > Links"
--------------------------------------------------------------*/
a,
a:visited {
    color: #333333;
}


/*--------------------------------------------------------------
 4. MAIN MENU (light grey bar, dark text, maroon highlight)
 Reference: "Navigation > Menus"
--------------------------------------------------------------*/
#main-nav {
    background-color: #f3f3f3;
    border-bottom: 5px solid #630808;
}

.main-navigation ul ul {
    background: #f3f3f3 none repeat scroll 0 0;
}

.main-navigation ul li a {
    color: #333333;
}

.main-navigation ul ul a {
    color: #333333;
}

.main-navigation li a:hover,
.main-navigation li a:focus,
.main-navigation li.current-menu-item > a,
.main-navigation li.current_page_item > a,
.main-navigation li:hover > a {
    background: #630808;
    color: #fff;
}


/*--------------------------------------------------------------
 5. COMMENTS & PAGINATION BUTTONS
 Reference: "Content > Comments"
--------------------------------------------------------------*/
a.comment-reply-link {
    background-color: #333333;
}

a.comment-reply-link:hover,
a.comment-reply-link:focus {
    background-color: #630808;
}

.nav-links span.current,
.nav-links a,
#infinite-handle span button {
    background-color: #333333;
}

.nav-links a:hover,
.nav-links a:focus,
a.cta-button-primary:hover,
a.cta-button-primary:focus,
.nav-links span.current,
#infinite-handle span button:hover,
#infinite-handle span button:focus {
    background-color: #630808;
}


/*--------------------------------------------------------------
 6. POSTS & PAGES
 Reference: "Content > Posts and pages"
--------------------------------------------------------------*/

/* Centered post/page titles */
.entry-title {
    text-align: center;
}

/* Divider under posts. Stock targets article.hentry (posts AND pages);
   yours targeted posts only. Redundant with stock but kept for reference.
   To make it posts-only, also add: #content article.hentry:not(.post){border-bottom:0;padding-bottom:0;} */
#content article.post {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 25px;
}


/*--------------------------------------------------------------
 7. TOP HEADER BAR (light grey with dark text)
 Reference: "Custom Basic Header Style"
--------------------------------------------------------------*/
#tophead {
    background-color: #f3f3f3;
}

#quick-contact a,
#tophead {
    color: #333333;
}

/* Phone / email icon color */
#quick-contact li::before {
    color: #630808;
}

/* News ticker icon: your icon (\f0c0 = users) in maroon.
   Works with Font Awesome 6 Free (solid), which stock already loads. */
.top-news-title::before {
    color: #630808;
    content: "\f0c0";
}

/* Ticker paragraph has no left margin (stock adds 15px) */
.top-news > p {
    margin-left: 0;
}

/* Quick-links dropdown button */
a.links-btn::after {
    background: #630808 none repeat scroll 0 0;
}

.quick-links a.links-btn {
    color: #333333;
}

.quick-links a.links-btn:hover,
.quick-links a.links-btn:focus {
    border-color: #bfbfbf;
    color: #bfbfbf;
}

.quick-links a.links-btn::after {
    background: #630808 none repeat scroll 0 0;
}

.quick-links ul li a {
    color: #333333;
}

.quick-links ul li a:hover,
.quick-links ul li a:focus {
    background-color: #630808;
    color: #fff;
}

/* Header social icons: dark icon color (stock forces white) */
.header-social-wrapper .education_hub_widget_social ul li a:before {
    color: #1f1f29;
    line-height: 1.6;
}


/*--------------------------------------------------------------
 8. SEARCH FORM
 Reference: "search section"
 Stock: blue button, orange hover. Yours: maroon button, maroon hover.
--------------------------------------------------------------*/
.search-form .search-submit,
.woocommerce-product-search button {
    background-color: #630808;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus,
.woocommerce-product-search button:hover,
.woocommerce-product-search button:focus {
    background-color: #630808;
}

#footer-widgets .search-form .search-submit,
#footer-widgets .woocommerce-product-search input[type="submit"] {
    background: #630808;
}

#footer-widgets .search-form .search-submit:hover,
#footer-widgets .search-form .search-submit:focus,
#footer-widgets .woocommerce-product-search input[type="submit"]:hover,
#footer-widgets .woocommerce-product-search input[type="submit"]:focus {
    background: #333333;
}


/*--------------------------------------------------------------
 9. FEATURED SLIDER
 Reference: "Custom Basic Slider Style"
--------------------------------------------------------------*/
#main-slider .pager-box {
    background: #630808 none repeat scroll 0 0;
}

#main-slider .pager-box.cycle-pager-active {
    background: #333333 none repeat scroll 0 0;
}

#main-slider .cycle-caption {
    border-right: 8px solid #630808;
}

#main-slider a,
#main-slider h3 {
    color: #333333;
}

#main-slider h3 {
    color: #333333;
}

#main-slider .cycle-prev:hover::after,
#main-slider .cycle-next:hover::after,
#main-slider .cycle-prev:focus::after,
#main-slider .cycle-next:focus::after {
    background-color: #630808;
}

#main-slider .cycle-prev::after,
#main-slider .cycle-next::after {
    background-color: #333333;
}


/*--------------------------------------------------------------
 10. SIDEBAR & WIDGETS
 Reference: "Custom Basic Content Style" / "Sidebar Style"
--------------------------------------------------------------*/
#sidebar-primary .widget-title::after,
#sidebar-secondary .widget-title::after {
    border-top: 9px solid #333333;
}

#sidebar-primary .widget-title,
#sidebar-secondary .widget-title {
    background: #333333 none repeat scroll 0 0;
    border-left: 5px solid #630808;
}

.widget-area ul li::before {
    color: #630808;
}


/*--------------------------------------------------------------
 11. NEWS & EVENTS SECTION (front page)
 Reference: "#featured-news-events", ".event-post", ".news-content"
--------------------------------------------------------------*/

/* Centered column headings/text (stock: left aligned) */
.recent-news,
.recent-events {
    text-align: center;
}

.event-post .entry-meta {
    background: #630808 none repeat scroll 0 0;
}

.event-post .entry-meta::before {
    border: 1px solid #630808;
}

.news-content {
    border-top: 5px solid #630808;
}


/*--------------------------------------------------------------
 12. TESTIMONIAL WIDGET
 Reference: "Testimonial widget style"
--------------------------------------------------------------*/
.education_hub_widget_testimonial_slider .cycle-slide p::before {
    color: #630808;
}

.education_hub_widget_testimonial_slider .cycle-prev::after,
.education_hub_widget_testimonial_slider .cycle-next::after {
    color: #333333;
}

.education_hub_widget_testimonial_slider .cycle-prev:hover::after,
.education_hub_widget_testimonial_slider .cycle-next:hover::after,
.education_hub_widget_testimonial_slider .cycle-prev:focus::after,
.education_hub_widget_testimonial_slider .cycle-next:focus::after {
    color: #630808;
}


/*--------------------------------------------------------------
 13. FOOTER (light grey widgets area, maroon bottom bar)
 Reference: "Custom Basic Footer Style"
--------------------------------------------------------------*/
#footer-widgets {
    background-color: #f3f3f3;
    border-top: 5px solid #630808;
}

.footer-widget-area ul li::before {
    color: #630808;
}

.footer-widget-area a {
    color: #333333;
}

.footer-widget-area p,
.footer-widget-area {
    color: #333333;
}

#footer-widgets .widget-title {
    color: #333333;
}

.site-footer {
    background-color: #630808;
}


/*--------------------------------------------------------------
 14. SCROLL-UP BUTTON
 Reference: "Custom Basic Scrollup Style"
 Stock: orange, fixed 44x44px, blue icon.
 Yours: maroon, padding-based size, grey icon.
 (To keep stock's 44x44 size, delete the padding/width/height lines.)
--------------------------------------------------------------*/
.scrollup {
    background: #630808 none repeat scroll 0 0;
    padding: 11px 7px 8px;
    width: auto;
    height: auto;
}

.scrollup i {
    color: #c2c2c2;
}


/*--------------------------------------------------------------
 15. 404 PAGE
--------------------------------------------------------------*/
h2.error-title {
    text-shadow: 3px 3px 0 #630808;
}


/*--------------------------------------------------------------
 16. WOOCOMMERCE
 Reference: "Custom Woocommerce Style"
--------------------------------------------------------------*/
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: #630808 none repeat scroll 0 0;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus {
    background-color: #333333;
}

table.shop_table.cart thead {
    background: none repeat scroll 0 0 #333333;
}


/*--------------------------------------------------------------
 17. GUTENBERG BLOCK STYLES
 Reference: "Block Styles" at the end of style.css
--------------------------------------------------------------*/
.wp-block-quote:not(.is-large):not(.is-style-large),
blockquote {
    border-left: 4px solid #630808;
}

.wp-block-pullquote.is-style-solid-color blockquote {
    background: #630808;
}


/*--------------------------------------------------------------
 18. RESPONSIVE DIFFERENCES
 Reference: "Custom Basic Responsive Style"
--------------------------------------------------------------*/

/* 1024px-1169px: stock sets notice ticker min-width to 205px;
   yours keeps the base 270px */
@media only screen and (min-width: 1024px) and (max-width: 1169px) {
    #notice-ticker,
    .top-news > p {
        min-width: 270px;
    }
}

/* Mobile (max 767px) */
@media only screen and (max-width: 767px) {

    /* Ticker text left-aligned (stock: centered) */
    .top-news {
        text-align: left;
    }

    /* Mobile menu colors */
    .main-navigation ul {
        background: #333333 none repeat scroll 0 0;
    }

    .menu-toggle {
        background: #333333;
    }

    .menu-toggle:hover,
    .menu-toggle:focus {
        background-color: #630808;
    }

    /* Space after the hamburger icon divider (stock: 15px) */
    .menu-toggle i {
        padding-right: 10px;
    }
}


/*================================================================
 PART 2 - SITE-SPECIFIC CSS
 (ported from Additional CSS; wins over Part 1)
================================================================*/

#site-logo { max-width: 80px; } #main-slider .cycle-caption { background-color:rgba(255, 255, 255, 0.85); } 
.site-logo-link > img, .custom-logo-link img {
max-height: 70px;
width: auto;
}
#site-identity {
margin-top: 20px !important;
}
.site-header {
padding: 18px 0 !important;
}
.site-title a {
color: #630808 !important;
font-family: Palatino;
}
.tribe-events button.tribe-events-c-search__button {
background-color: #630808 !important;
}
.tribe-common .tribe-common-c-btn-border {
border: 1px solid #630808 !important;
color: #630808 !important;
}
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover {
background-color: #630808 !important;
color: #fff !important;
}
.wppsac-post-categories .wppsac-post-categories-list {
display: none !important
}
.wppsac-post-carousel .slick-arrow {
display: none !important
}
.tribe-mini-calendar-block {
width: 750px !important;
margin: 0 auto !important;
}
.tribe-mini-calendar-block .tribe-common.tribe-events.tribe-events-widget-shortcode.tribe-events-widget-shortcode-events-month .tribe-events-calendar-month__day-cell--mobile:focus {
background-color: #f3f3f3 !important;
}
.tribe-mini-calendar-block .tribe-common.tribe-events.tribe-events-widget-shortcode.tribe-events-widget-shortcode-events-month .tribe-events-calendar-month__day-cell--mobile:hover {
background-color: #f3f3f3 !important;
}
.tribe-events .tribe-events-calendar-month__mobile-events-icon--event {
background-color: #630808 !important;	
}
.tribe-mini-calendar-block .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
color: #630808 !important;
font-weight: 600 !important;
}
.tribe-common.tribe-events.tribe-events-widget-shortcode.tribe-events-widget-shortcode-events-month .tribe-events-widget-events-month__view-more-link {
color: #630808 !important;	
}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date, .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
color: #630808 !important;	
}
.site-info {
display: none !important;
}
.footer-widget-area a:hover{
  color: #630808 !important;	
}
#tophead {
	display: none !important;
}
@media screen and (max-width: 600px) {
	.main-navigation ul li a {
	color: tomato;
}
}
/* General styling for the primary content area */
#primary {
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}

/* Width for pages */
body.page #primary {
    width: 100% !important;
}

/* Width for single posts */
body.single-post #primary {
    width: 75% !important;
}

/* Ensure the container adjusts accordingly */
body.page .site-content,
body.single-post .site-content {
    display: flex; /* Use flexbox or other layout methods based on your theme */
}

.home header.entry-header {
  display: none;
}

/* .wp-block-table {
  text-align: left;
} */

.wp-block-table table {
  width: auto !important;
  table-layout: auto !important;
  display: inline-table;
}

.wp-block-table td,
.wp-block-table th {
  padding-left: 30px;
  padding-right: 30px;
}

/* Wrapper for all comment fields */
.comment-custom-fields {
    margin-bottom: 20px;
}

/* Rows: two fields per row */
.comment-custom-fields .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 20px;
}

/* Each column: half-width with margin */
.comment-custom-fields .form-col {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/* Label and input styling */
.comment-custom-fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.comment-custom-fields input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Responsive: stack fields on small screens */
@media (max-width: 600px) {
    .comment-custom-fields .form-col {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 15px;
    }
}

/* Target the full path more specifically */
#main-nav.clear-fix {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
@media (min-width: 768px) {
/* Force the UL menu to flex */
#main-nav.clear-fix .container nav#site-navigation.main-navigation .wrap-menu-content .menu-header-menu-container > ul.menu {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
}

/* Logo image */
#main-nav.clear-fix .container nav#site-navigation.main-navigation .wrap-menu-content ul.menu > li > a img {
  height: 60px !important;
  max-height: 70px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* ===== Mobile Menu: Solid Dark Red Background, White Text ===== */
@media screen and (max-width: 768px) {

  /* Top-level menu links */
  .wrap-menu-content .menu > li > a {
    color: #FFF;               /* white text */
    background-color: #630808; /* dark red background */
    transition: none;          /* no hover effect */
  }

  /* Sub-menu links (dropdown items) */
  .wrap-menu-content .sub-menu li a {
    color: #FFF;               /* white text */
    background-color: #630808; /* dark red background */
    transition: none;          /* no hover effect */
  }

  /* Dropdown toggle buttons (+ / -) */
  .wrap-menu-content .menu .dropdown-toggle {
    background-color: #630808; /* match menu background */
    color: #333333;            /* dark grey + / - */
    border: none;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 5px;
    transition: none;           /* no hover effect */
  }

  /* Optional: Sub-submenu indentation */
  .wrap-menu-content .sub-menu .sub-menu li a {
    padding-left: 25px;        /* adjust if needed */
  }
}

.page-id-4499 .wp-block-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.page-id-4499 .wp-block-table table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.page-id-4499 .wp-block-table td,
.page-id-4499 .wp-block-table th {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal; /* changed to prevent awkward word breaking */
    vertical-align: top;
}

/* ===== SEL tab: green on hover only (main tab + all submenus) ===== */

/* Background: main tab stays green while the mouse is anywhere in its dropdown */
#main-nav #primary-menu > li#menu-item-6051:hover,
#main-nav #primary-menu > li#menu-item-6051:focus-within,
#main-nav #primary-menu > li#menu-item-6051:hover > a,
#main-nav #primary-menu > li#menu-item-6051:focus-within > a,
#main-nav #primary-menu > li#menu-item-6051:hover > .dropdown-toggle,
#main-nav #primary-menu > li#menu-item-6051:focus-within > .dropdown-toggle,
#main-nav #primary-menu > li#menu-item-6051 > a:hover,
#main-nav #primary-menu > li#menu-item-6051 > a:focus,

/* Submenu items and nested items (Letters from the Past) */
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:hover,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:focus-within,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:hover > a,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:focus-within > a,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:hover > .dropdown-toggle,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu a:hover,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu a:focus {
  background-color: #95d5b2 !important;  /* green hover */
}

/* Text colour on hover (dark green so it stays readable) */
#main-nav #primary-menu > li#menu-item-6051:hover > a,
#main-nav #primary-menu > li#menu-item-6051:focus-within > a,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:hover > a,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu li:focus-within > a,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu a:hover,
#main-nav #primary-menu > li#menu-item-6051 .sub-menu a:focus {
  color: #1b4332 !important;
}

/* Hide "Subscribe to calendar" / "Add to calendar" dropdown */
.tribe-events-c-subscribe-dropdown,
.tribe-events-c-subscribe-dropdown__container {
  display: none !important;
}

/* Reduced padding around the shortcode calendar */
.tribe-events-view--shortcode .tribe-events-l-container {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

@media screen and (min-width: 1024px) {
    .widget {
        margin: 0 !important;
    }
}

#main-nav {
    border-bottom: 5px solid #C44E5E;
}

#footer-widgets {
    border-top: 5px solid #C44E5E;
}


/*================================================================
 PART 3 - WIDER SITE ON LARGE SCREENS
 Stock theme fixes .container at 1170px. From 1170px up, the site
 now grows with the screen and stops at --site-max-width.
 To change the maximum width, edit the one value below
 (e.g. 1400px, 1600px). Screens under 1170px are untouched.
================================================================*/
:root {
    --site-max-width: 1500px;
}

@media only screen and (min-width: 1170px) {
    .container,
    .enabled-sticky-primary-menu #main-nav.fixed .container {
        width: min(var(--site-max-width), calc(100% - 60px));
        max-width: none;
    }

    /* Boxed layout option (Customize > Theme Options > Layout) */
    .site-layout-boxed #page {
        width: min(var(--site-max-width), calc(100% - 60px));
    }
}