/*****
Theme Name: MH Biosphere
Theme URI: https://www.mhthemes.com/themes/mh/biosphere/
Description: MH Biosphere is ideal for online magazines, dynamic news websites or blogs with topics like biology, animals, climate change, environment, environmental activism, zoology and for news portals of NGOs, wildlife foundations or else. You can have the same layout in the premium version of MH Magazine (without the need of a child theme) which can be configured by making use of the flexible layout options. MH Magazine offers additional widget areas, multiple unique custom widgets, great features and extended layout options to manage several layout elements on your site including changing the color scheme and typography.
Author: MH Themes
Author URI: https://www.mhthemes.com/
Template: mh-magazine-lite
Version: 1.1.3
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-header, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, rtl-language-support, blog, entertainment, news
Text Domain: mh-biosphere
Domain Path: /languages/
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*****/


/* ================================
   COLOR SYSTEM (Repress Blue)
   ================================ */
:root{
  --blue: #0056b3;        /* primary brand */
  --blue-dark: #003c80;   /* dark */
  --blue-light: #3399ff;  /* accent / hover */
  --blue-pale: #e8f3ff;   /* surfaces */
  --ink: #2a2a2a;         /* text */
  --muted: #6a6a6a;       /* secondary text */
  --bg: #f9fbff;          /* page background */
  --white: #ffffff;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.16);

  --speed-fast: .15s;
  --speed: .28s;
  --speed-slow: .45s;
} 
 
/* Namespace: only affects this homepage */
.repress-homepage * {
  box-sizing: border-box;
}

.repress-homepage a {
  text-decoration: none !important;
}

/* --- Hero Section --- */
.repress-homepage .hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 10%;
  background: linear-gradient(135deg, #004aad, #007bff);
  color: #fff;
  flex-wrap: wrap;
}
/* ============================= */
/* Advanced EZ TOC Custom Styling - Force Override */
/* ============================= */

/* Container styling */
#ez-toc-container {
    background: #fefefe !important;               
    border: 1px solid #ddd !important;            
    border-radius: 10px !important;               
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 
    padding: 15px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 320px !important;                  
    position: sticky !important;                   
    top: 80px !important;                           
    z-index: 9999 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Title container */
#ez-toc-container .ez-toc-title-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

/* Title text */
#ez-toc-container .ez-toc-title {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #333 !important;
    margin: 0 !important;
    cursor: inherit !important;
}

/* Toggle button */
#ez-toc-container .ez-toc-toggle {
    background: #0073e6 !important;
    color: #fff !important;
    border-radius: 5px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#ez-toc-container .ez-toc-toggle:hover {
    background: #005bb5 !important;
    color: #fff !important;
}

/* List styling */
#ez-toc-container .ez-toc-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

#ez-toc-container .ez-toc-list li {
    margin: 6px 0 !important;
    padding-left: 0 !important;
    transition: all 0.2s ease !important;
}

/* Indentation for nested levels */
#ez-toc-container .ez-toc-list-level-2 { padding-left: 10px !important; }
#ez-toc-container .ez-toc-list-level-3 { padding-left: 20px !important; }

/* Links styling */
#ez-toc-container .ez-toc-link {
    color: #0073e6 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#ez-toc-container .ez-toc-link:hover {
    text-decoration: underline !important;
    color: #005bb5 !important;
}

/* Active heading highlight */
#ez-toc-container .ez-toc-link.ez-toc-active {
    font-weight: 700 !important;
    color: #d23669 !important;
}

/* Scroll behavior */
html {
  scroll-behavior: smooth !important;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    #ez-toc-container {
        max-width: 90% !important;
        top: 60px !important;
        padding: 12px 15px !important;
    }
}

.repress-homepage .hero-text {
  flex: 1 1 45%;
  max-width: 500px;
}
.repress-homepage .hero-text h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  font-weight: 700;
}
.repress-homepage .hero-text p {
  font-size: 1.1em;
  margin-bottom: 25px;
  line-height: 1.6;
}
.repress-homepage .hero-text .btn {
  background: #ffcc00;
  color: #000;
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 28px;
  transition: 0.3s;
}
.repress-homepage .hero-text .btn:hover {
  background: #e6b800;
}
.repress-homepage .hero-image {
  flex: 1 1 45%;
  text-align: center;
}
.repress-homepage .hero-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* --- Quick Actions --- */
.repress-homepage .actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  padding: 60px 10%;
  background: #fff;
}
.repress-homepage .action-card {
  background: #004aad;
  color: #fff;
  padding: 25px 20px;
  text-align: center;
  border-radius: 12px;
  transition: 0.3s;
  font-weight: 500;
}
.repress-homepage .action-card:hover {
  background: #003080;
  transform: translateY(-5px);
}

/* --- About Section --- */
.repress-homepage .about {
  padding: 80px 10%;
  text-align: center;
  background: #f9f9f9;
}
.repress-homepage .about h2 {
  margin-bottom: 20px;
  font-size: 2.2em;
  color: #004aad;
  font-weight: 700;
}
.repress-homepage .about p {
  margin-bottom: 20px;
  line-height: 1.7;
  font-size: 1.05em;
}
.repress-homepage .about .btn {
  background: #004aad;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 28px;
}
.repress-homepage .about .btn:hover {
  background: #003080;
}

/* --- Features --- */
.repress-homepage .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  padding: 60px 10%;
  background: #fff;
}
.repress-homepage .feature {
  background: #f1f1f1;
  padding: 25px;
  text-align: center;
  border-radius: 12px;
  font-weight: 500;
  transition: 0.3s;
}
.repress-homepage .feature:hover {
  background: #eaeaea;
}

/* --- Services Highlight --- */
.repress-homepage .pricing {
  padding: 80px 10%;
  text-align: center;
  background: #f9f9f9;
}
.repress-homepage .pricing h2 {
  margin-bottom: 40px;
  color: #004aad;
  font-size: 2.2em;
  font-weight: 700;
}
.repress-homepage .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}
.repress-homepage .plan {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 30px;
  text-align: left;
  transition: 0.3s;
}
.repress-homepage .plan h3 {
  margin-bottom: 12px;
  color: #004aad;
}
.repress-homepage .plan p {
  font-size: 1em;
  line-height: 1.5;
}
.repress-homepage .plan:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.repress-homepage .pricing .btn {
  margin-top: 30px;
  background: #004aad;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
}
.repress-homepage .pricing .btn:hover {
  background: #003080;
}

/* --- Call to Action --- */
.repress-homepage .cta-banner {
  background: #004aad;
  color: #fff;
  text-align: center;
  padding: 80px 10%;
}
.repress-homepage .cta-banner h2 {
  margin-bottom: 15px;
  font-size: 2.2em;
}
.repress-homepage .cta-banner p {
  margin-bottom: 25px;
  font-size: 1.1em;
}
.repress-homepage .cta-banner .btn {
  background: #ffcc00;
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
}
.repress-homepage .cta-banner .btn:hover {
  background: #e6b800;
}


/* ================================
   GLOBAL / RESET / BASICS
   ================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; display:block; }

/* Links: NO underline on hover/click/focus. Keep an accessible focus ring. */
a{
  color: var(--blue);
  text-decoration: none !important;
  transition: color var(--speed) ease, box-shadow var(--speed) ease;
}
a:hover,
a:active,
a:focus,
a:focus-visible{
  text-decoration: none !important;
  color: var(--blue-light);
  outline: 0;
}

a[href^="tel"], a[href^="mailto"]{ word-break: break-word; }

/* Kill any previous underline animation utilities */
a.ux-underline, .entry-content a{ text-decoration: none !important; }
a.ux-underline::after, .entry-content a::after{ content: none !important; }


@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ================================
   TYPOGRAPHY
   ================================ */
h1,h2,h3,h4,h5,h6,.mh-custom-posts-small-title{
  font-family:"Droid Sans", sans-serif;
  color:var(--ink);
  line-height:1.25;
  margin:0 0 .6em;
}
h1{ font-size:clamp(28px, 3.2vw, 42px); }
h2{ font-size:clamp(24px, 2.4vw, 32px); }
h3{ font-size:clamp(20px, 2vw, 26px); }
h4{ font-size:18px; }
h5{ font-size:16px; }
h6{ font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }

pre, code, kbd{
  color:var(--ink);
  background:var(--blue-pale);
  border-radius:var(--radius-xs);
  padding:.25em .5em;
}
blockquote{
  color:var(--ink);
  border-left:4px solid var(--blue-light);
  padding:12px 16px;
  background:linear-gradient(0deg, rgba(232,243,255,.6), rgba(232,243,255,.25));
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow:var(--shadow-sm);
}


/* ================================
   HEADER (clean style)
================================ */
.mh-header {
  background: var(--blue); /* solid brand blue */
  padding: 16px 20px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
  position: relative;
  z-index: 100;
}

.mh-header-title {
  font-family: "Oswald", sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.mh-header-tagline {
  font-size: 14px;
  color: var(--blue-light);
  opacity: .9;
}

/***** Navigation *****/
.mh-main-nav-wrap {
  background: #003c80;
}

.mh-main-nav {
  background: #003c80;
  border-bottom: 0;
}

.mh-main-nav li:hover {
  background: #3399ff;
}

.mh-main-nav ul li:hover > ul {
  background: #003c80;
}

.mh-main-nav .menu > .current-menu-item {
  background: none;
}

.mh-main-nav .menu > .current-menu-item:hover {
  background: #3399ff;
}

/***** SlickNav Custom Style *****/
.slicknav_btn {
  background: #3399ff;
}

.slicknav_menu {
  border-color: #003c80;
  background: #3399ff;
}

.slicknav_nav ul {
  border-color: #003c80;
}

.slicknav_nav .slicknav_item:hover,
.slicknav_nav a:hover {
  background: #3399ff;
}

.mh-main-nav-wrap .slicknav_btn,
.mh-main-nav-wrap .slicknav_menu,
.mh-main-nav-wrap .slicknav_nav .slicknav_item:hover,
.mh-main-nav-wrap .mh-main-nav a:hover {
  background: transparent;
}

.mh-main-nav-wrap .slicknav_nav ul {
  border-color: #3399ff;
}

.mh-main-nav-wrap .slicknav_nav ul ul {
  border: none;
}

/* ================================
   BREADCRUMBS
   ================================ */
.mh-breadcrumb, .breadcrumbs, .mh-breadcrumbs{
  background:var(--blue-pale);
  border-radius:var(--radius-xs);
  padding:8px 12px;
  font-size:13px;
  box-shadow:var(--shadow-sm);
}
.mh-breadcrumb a{ color:var(--blue-dark); }
.mh-breadcrumb a:hover{ color:var(--blue-light); }

/* ================================
   POSTS / LOOPS (Card UI)
   ================================ */
.page-title{ color:var(--blue-dark); font-weight:800; margin-bottom:18px; }

.mh-posts-grid .mh-posts-grid-item,
.mh-loop-item{
  background:var(--white);
  border:1px solid var(--blue-pale);
  border-radius:var(--radius-md);
  padding:18px;
  margin-bottom:22px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
  animation:fadeUp .5s ease both;
}
.mh-posts-grid .mh-posts-grid-item:hover,
.mh-loop-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--blue-light);
}

.mh-loop-item .mh-thumb img,
.mh-posts-grid .mh-posts-grid-thumb img{
  border-radius:var(--radius-sm);
  transition:transform var(--speed) ease, filter var(--speed) ease;
}
.mh-loop-item:hover .mh-thumb img,
.mh-posts-grid .mh-posts-grid-item:hover .mh-posts-grid-thumb img{
  transform:scale(1.03);
}

.mh-meta, .mh-meta a{ color:var(--blue); font-size:13px; }
.mh-meta a:hover{ color:var(--muted); }

/* Entry content links inside posts */
.entry-content a{ color:var(--blue-dark); }
.entry-content a:hover{ color:var(--blue-light); }

/* Tags */
.entry-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.entry-tags li{
  background:var(--blue-dark);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--speed) ease;
}
.entry-tags li:hover{ background:var(--blue); }
.entry-tags .fa{ background:var(--blue-light); color:#fff; border-radius:50%; padding:4px; }

/* Featured/Sticky badge (optional) */
.mh-loop-item.sticky{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(0,86,179,.08), var(--shadow-sm);
}

/* ================================
   PAGINATION
   ================================ */
.page-numbers, a .pagelink{
  color:var(--ink);
  background:var(--blue-pale);
  border-radius:var(--radius-xs);
  padding:8px 12px;
  margin:0 3px;
  display:inline-block;
  transition:all var(--speed) ease;
}
.page-numbers:hover, .mh-loop-pagination .current, .mh-comments-pagination .current, a:hover .pagelink, .pagelink{
  background:var(--blue-light);
  color:#fff !important;
}

/* ================================
   WIDGETS & SIDEBAR (Card UI)
   ================================ */
.widget, .mh-widget{
  background: #ffffff;
  color:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:16px; 
  margin-bottom:20px; 
  text-align: left;
}
.mh-widget-title{
  padding:10px 16px;
  background:var(--blue-pale);
  border-left:8px solid var(--blue-light);
  border-bottom:none;
  border-radius:var(--radius-xs) var(--radius-xs) 0 0;
  font-weight:700;
}

/* ---- Custom Footer Text Widget ---- */
.textwidget {
  line-height: 2;
  color: var(--blue-light);
}

.textwidget p {
  margin: 0;
  padding: 0;
  color: var(--blue-light);
}

/* Links styled as modern text-buttons */
.textwidget a {
  color: var(--blue-light);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

.textwidget a:hover {
  background: #0056b3; /* your brand blue */
  color: #ffffff;
  padding-left: 14px; /* smooth slide effect */
}

/* Icons */
.textwidget i {
  margin-right: 8px;
  color: #ffcc00; /* gold icons for contrast */
}

/* Each item spaced neatly */
.textwidget strong {
  display: inline-block;
  margin: 5px 0;
}

/* Tag cloud */
.mh-widget .tagcloud a, .tagcloud a{
  background: #fff;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px !important;
  display:inline-block;
  margin:4px 6px 0 0;
  transition:background var(--speed) ease, transform var(--speed-fast) ease;
}
.mh-widget .tagcloud a:hover, .tagcloud a:hover{
  background: #fff;
  transform:translateY(-2px);
}

/* Calendar */
#wp-calendar{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius-xs); }
#wp-calendar caption{ background:var(--blue-pale); padding:8px; font-weight:700; }
#wp-calendar th,#wp-calendar td{ text-align:center; padding:8px; }
#wp-calendar tfoot a{ color:var(--blue); }

/* Ad/Info spots */
.mh-ad-spot, .mh-info-spot{
  background:var(--blue-pale);
  border-radius:var(--radius-sm);
  padding:14px;
}

/* ================================
   SEARCH
   ================================ */
.mh-widget .search-form, .search-form{
  background:rgba(232,243,255,.65);
  border-radius:999px;
  padding:8px 10px;
  display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-sm);
}
.search-form input[type="search"],
.search-form input[type="text"]{
  border:none; background:transparent; outline:none; width:100%;
  padding:6px 8px; color:var(--ink);
}
.search-form input[type="submit"]{
  background:linear-gradient(135deg, var(--blue), var(--blue-light));
  color:#fff; border:none; border-radius:999px; padding:8px 14px; font-weight:700;
  transition:transform var(--speed-fast) ease, filter var(--speed) ease;
}
.search-form input[type="submit"]:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ================================
   BUTTONS & CTAs
   ================================ */
.button, .btn, button, input[type="submit"], .mh-read-more a{
  background:linear-gradient(135deg, var(--blue), var(--blue-light));
  border:none; color:#fff; font-weight:700;
  border-radius:var(--radius-sm); padding:10px 18px; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform var(--speed-fast) ease, box-shadow var(--speed) ease, filter var(--speed) ease;
}
.button:hover, .btn:hover, button:hover, input[type="submit"]:hover, .mh-read-more a:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  filter:brightness(1.04);
}
.button--ghost, .btn--ghost{
  background:transparent; color:var(--blue);
  border:2px solid var(--blue); padding:8px 16px;
}
.button--ghost:hover{ color:#fff; background:var(--blue); }

/* ================================
   FORMS & INPUTS
   ================================ */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], textarea, select{
  width:100%; background:#fff; border:1px solid var(--blue-pale);
  border-radius:var(--radius-sm); padding:10px 12px;
  transition:border-color var(--speed) ease, box-shadow var(--speed) ease;
}
textarea{ min-height:120px; resize:vertical; }
input:hover, textarea:hover, select:hover{ border-color:var(--blue-light); }
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,86,179,.18);
}

/* ================================
   TABLES
   ================================ */
table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--blue-pale); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}
th, td{ padding:12px; text-align:left; }
thead th{
  background:var(--blue-pale);
  font-weight:800; color:var(--blue-dark);
}
tbody tr:nth-child(even){ background:#fcfeff; }
tbody tr:hover{ background:rgba(232,243,255,.55); }


/* ================================
   WIDGETS & SIDEBAR (Footer Card UI)
   ================================ */
.mh-footer-widgets {
  background: white;
  border-radius: var(--radius-md);
  padding: 5px;
  text-align: left;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.mh-footer-area {
  background: var(--blue-dark);
  color: white;
  padding: 15px;
  margin-bottom: 20px; /* Adjust this to your desired spacing between the footer area and the widgets */
  border-radius: 8px;
}

.mh-footer-widget-title {
  margin-left: -16px; /* Consider adjusting this if it's causing layout issues */
}

.mh-footer-widget-title-inner {
  margin: 0;
  padding: 10px 16px;
  background: var(--blue-pale);
  border-left: 8px solid var(--blue-light);
  border-bottom: none;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-weight: 900;
  line-height: 2;
  color: var(--blue-light);
  margin-bottom: 10px; /* Added margin-bottom to create consistent space below titles */
}

.mh-footer-widget-title-inner a {
  color: var(--blue-light);
  text-decoration: none;
}

.mh-footer-widget-title-inner a:hover {
  text-decoration: underline;
}

.mh-footer-widget {
  margin-bottom: 20px; /* Ensure widgets have a bottom margin */
}

.mh-footer-widget ul {
  list-style: none;
  padding: 0;
}

.mh-footer-widget ul li {
  margin-bottom: 8px; /* Ensure list items have margin-bottom to space them out */
}

.mh-footer-widget a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mh-footer-widget a:hover {
  color: var(--blue-light);
}


/* ================================
   SLIDER WIDGET
   ================================ */
.mh-slider-widget img{ width:100%; display:block; border-radius:var(--radius-md); }
.mh-slider-widget .flex-control-paging li a.flex-active{ background:var(--blue-light); }
.mh-slider-caption{
  border:1px solid var(--blue-light);
  background:rgba(255, 255, 255, .85);
  color:#000000;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  box-shadow:var(--shadow-sm);
}
.mh-widget-col-1 .mh-slider-caption{ background:var(--blue-dark); }
.mh-footer-widget .mh-slider-caption{ background:rgba(255,255,255,.12); }

/* ================================
   POSTS STACKED WIDGET
   ================================ */
.mh-posts-stacked-title{
  background:rgba(255, 255, 255, .85);
  color:var(--blue-light); padding:10px 12px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.mh-posts-stacked-meta{
  background:var(--blue-light); color:#fff; padding:6px 10px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
#mh-mobile .mh-footer-widget .mh-posts-stacked-overlay{ border-color:var(--blue-dark); }

/* ================================
   COMMENTS
   ================================ */
.comments-area, #comments{
  background:#fff; border:1px solid var(--blue-pale);
  border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-sm);
}
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{
  border:1px solid var(--blue-pale);
  border-radius:var(--radius-sm);
  padding:14px; margin-bottom:14px;
  background:linear-gradient(0deg, rgba(232,243,255,.35), #fff);
}
.comment-author .fn{ font-weight:800; color:var(--blue-dark); }
.comment-meta a{ color:var(--muted); font-size:12px; }
.comment-reply-link{
  display:inline-block; margin-top:8px;
  background:var(--blue-dark); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px;
}
.bypostauthor .mh-comment-meta-author:after,
.mh-comment-meta-links .comment-reply-link:before,
#respond #cancel-comment-reply-link:before{ color:var(--blue-light); }

.comment-respond{
  margin-top:16px; background:#fff; border:1px solid var(--blue-pale);
  border-radius:var(--radius-md); padding:16px;
}
.comment-respond .form-submit input[type="submit"]{ width:auto; }

/* ================================
   AUTHOR BOX
   ================================ */
.author-box, .mh-author-box{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--blue-pale);
  border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-sm);
}
.author-box .author-avatar img{ border-radius:50%; box-shadow:var(--shadow-sm); }
.author-box .author-info h4{ margin:.2em 0; color:var(--blue-dark); }

/* ================================
   NOTICES / ALERTS (optional utility)
   ================================ */
.notice{ padding:12px 14px; border-radius:var(--radius-sm); margin:12px 0; }
.notice--info{ background:var(--blue-pale); border:1px solid var(--blue-light); }
.notice--success{ background:#e7faf0; border:1px solid #28a745; }
.notice--warn{ background:#fff9e6; border:1px solid #f0ad4e; }
.notice--danger{ background:#ffefef; border:1px solid #dc3545; }

/* ================================
   FOOTER (Modern Gradient)
   ================================ */
.mh-footer {
  background: #fff;
  padding: 52px 20px;
  color: var(--blue-pale);
  text-align: center;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .12) inset;
  display: flex;
  flex-direction: column;
}

.mh-footer a {
  color: #fff;
  transition: color var(--speed) ease;
}

.mh-footer a:hover {
  color: var(--blue-light);
}

.mh-footer .mh-meta,
.mh-footer .mh-meta a {
  color: var(--blue-pale);
}

/* Footer copyright */
.mh-copyright-wrap {
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 60, 128, .92);
  padding: 16px 20px;
  text-align: center;
}

.mh-copyright,
.mh-copyright a {
  color: var(--blue-pale);
  font-size: 14px;
}


/* ================================
   ACCESSIBILITY FOCUS RING
   ================================ */
a:focus, button:focus, input:focus, textarea:focus, select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(51,153,255,.45);
  border-radius:var(--radius-xs);
}

/* ================================
   MEDIA QUERIES (Responsive)
   ================================ */
@media (max-width: 1200px){
  .mh-main-nav .menu > li > a{ padding:10px 14px; }
}

@media (max-width: 900px){
  .mh-header-title{ font-size:clamp(18px, 3.6vw, 22px); }
  .mh-loop-item, .mh-posts-grid .mh-posts-grid-item{ padding:16px; }
  #mh-mobile .mh-slider-caption{ background:rgba(0,86,179,1); }
}

@media (max-width: 600px){
  .widget, .mh-widget, .mh-footer-widget{ padding:14px; }
  .mh-footer{ padding:36px 16px; }
  .author-box{ flex-direction:column; align-items:center; text-align:center; }
}

@media (max-width: 420px){
  .mh-copyright-wrap{ padding:12px 14px; font-size:12px; }
}

/* ================================
   KEYFRAMES
   ================================ */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ================================
   LEGACY SELECTORS FROM ORIGINAL THEME
   (kept for compatibility with various widgets/sections)
   ================================ */

/* Keep blue palette mapping consistent with original classes */
.mh-main-nav .menu > .current-menu-item{ background:none; }
.mh-main-nav .menu > .current-menu-item:hover{ background:var(--blue-light); }

/* Old green → blue replacements already reflected globally */
.page-numbers:hover,
.mh-loop-pagination .current,
.mh-comments-pagination .current{ background:var(--blue-light); color:#fff; }

/* Gallery captions */
.gallery-caption{ color:#fff; }

/* WP captions */
.wp-caption-text{ color:var(--ink); }

/* Cancel comment link, reply icons color accents */
#respond #cancel-comment-reply-link:before{ color:var(--blue-light); }

/* Keep form hover colors synonymous with brand */
input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover,
input[type=url]:hover, textarea:hover{ border-color:var(--blue-light); }

/* Ensure widget titles in footer contrast well */
.mh-footer .mh-widget-title{ background:transparent; color:#fff; border-left:none; border-bottom:2px solid rgba(255,255,255,.2); }

/* Ensure legacy ad/info boxes look soft */
.mh-info-spot{ box-shadow:var(--shadow-sm); }

/* Ensure WP core alignment classes don't break layout */
.alignleft{ float:left; margin:0 1em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1em; }
.aligncenter{ display:block; margin:0 auto 1em; }