/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

/* put top menu to right of brand */
.container-header {
    display: flex;
    justify-content: left;
    align-items: center;
}

.navbar-brand {
    order: 1;
}

.navbar-nav {
    order: 2;
    margin-left: auto;
}

.grid-child{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:unset;justify-content:space-between;padding:0.01rem .5em}

/* *************************8 */
/* SIDEBAR LAYOUT - Only apply to pages with sidebar */

/* Reset the site-grid layout to block for proper banner behavior */
body.has-sidebar-left .site-grid {
    display: block !important;
}

/* Banner should be full width and outside any grid constraints */
.container-banner {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-bottom: 20px !important;
}

/* Create a flex wrapper for just the content area (after banner) */
body.has-sidebar-left .grid-child.container-sidebar-left {
    float: left;
    width: 220px;
    margin-right: 20px;
}

body.has-sidebar-left .grid-child.container-component {
    margin-left: 240px; /* 260px sidebar + 20px margin */
    width: auto;
}

/* Clear floats after the content */
body.has-sidebar-left .site-grid::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Make sidebar module headers have white text on black background */
body.has-sidebar-left .sidebar-left.card .card-header {
    background: #343a40 !important;  /* Notícias and Projetos background */
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    margin-bottom: 10px !important;
    border-radius: 4px !important;
}

/* More specific selector to ensure it overrides existing styles */
.sidebar-left .card-header h5,
.sidebar-left .card-header h3 {
    background: #0056b3 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* ******************************* */

/* Control maximum dimensions for images in main content area */
.left.item-image {
    width: auto !important;         /* Let container size to content */
    max-width: 600px !important;    /* Match image max-width */
    float: left;                    /* Maintain existing float behavior */
    /*padding-right: 5px; */            /* Keep existing padding */
    margin-right: 25px;   /* needed for narrow window */
}

.left.item-image img {
    max-width: 600px !important;    /* Maximum width for landscape images */
    max-height: 500px !important;   /* Maximum height for portrait images */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* Maintains aspect ratio while fitting within constraints */
    display: block !important;      /* Remove any inline spacing */
}


/* ******************************* */

/* ***************************** */

/* Make all hyperlinks in body text black */
.com-content-article__body a {
    color: #000000 !important;
}

/* Optional: Add hover effect for better user experience */
.com-content-article__body a:hover {
    color: #333333 !important;
    text-decoration: underline !important;
}

/* DELETE FROM HERE */

/* CLEAN SIDEBAR NAVIGATION STYLING - Replace existing sidebar rules */

/* Remove default card styling and create clean look */
body.has-sidebar-left .sidebar-left.card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Keep the header styling you already have working */
body.has-sidebar-left .sidebar-left .card-header {
    background: #343a40 !important;  /* Keep your existing dark header */
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    margin-bottom: 10px !important;
    border-radius: 4px !important;
}

body.has-sidebar-left .sidebar-left .card-body {
    padding: 0 !important;
}

body.has-sidebar-left .sidebar-left .nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* UPDATED: Reduce spacing between nav items by 25% */
body.has-sidebar-left .sidebar-left .nav-item {
    margin-bottom: 1px !important; /* Reduced from 5px for more compact look */
}

/* UPDATED: Reduce vertical padding in links by 25% and clean styling */
body.has-sidebar-left .sidebar-left .nav-item a {
    display: block !important;
    padding: 2px 10px !important; /* Reduced from 12px (25% reduction) */
    color: #495057 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover effect */
body.has-sidebar-left .sidebar-left .nav-item a:hover {
    background: #e9ecef !important;
    color: #001B4C !important;
    border-left-color: #001B4C !important;
}

/* SIMPLE APPROACH: Target current page by JavaScript class */
body.has-sidebar-left .sidebar-left .nav-item a.current-page {
    background: #d4edda !important; /* Light green background - cleaner look */
    color: #155724 !important; /* Dark green text */
    border-left-color: #28a745 !important; /* Green left border */
    font-weight: 600 !important; /* Bold for emphasis */
    border-radius: 4px !important;
}

/* Make sure hover works on current page */
body.has-sidebar-left .sidebar-left .nav-item a.current-page:hover {
    background: #c3e6cb !important; /* Slightly darker green on hover */
    color: #155724 !important;
    border-left-color: #28a745 !important;
}
/* ***************************** */

/* artigos de projeto */

/*
.left.item-image{float:left;
                 width: 600px;
                 padding-right: 25px;
                  max-width: 100%;
                }
*/
.container-banner .banner-overlay{
  background-attachment:unset;
  background-position:top,100%;
  background-repeat:no-repeat;
  color:#fff;
  height:70vh;
  /*  --r: 2302 / 780;
  aspect-ratio: var(--r);
  */
  /*background-size:contain;*/
  object-fit: contain;
}



/* Mobile/tablet responsive layout for pages with sidebar */

/* More specific fix for image layout that overrides mobile CSS */
/* Add this CSS with higher specificity to override the mobile rules */


@media only screen and (max-width: 1199px) {    /* Keep mobile layout for sidebar and main structure */
    body.has-sidebar-left .site-grid {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 20px !important;
        /*padding-right: 25px !important;*/
	/*margin-right: 15px !important;*/
    }
    
    
    /* Make sure banner stays at top and spans full width without padding */
    .container-banner {
        order: 1 !important;
        width: 100vw !important;
        margin-left: -20px !important; /* Offset the padding */
        margin-right: -20px !important; /* Offset the padding */
        margin-bottom: 20px !important;
    }
    
    body.has-sidebar-left .grid-child.container-sidebar-left {
        float: none !important;
        width: 220px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        order: 3;
    }
    
    body.has-sidebar-left .grid-child.container-component {
        float: none !important;
        margin-left: 0 !important;
        width: 100% !important;
        order: 2;
    }
    
    /* BUT override the image behavior to keep it floating left */
    .left.item-image {
        float: left !important;
        width: auto !important;
        max-width: 350px !important;  /* Reasonable size for mobile */
        /*padding-right: 25px !important;*/
        margin-bottom: 10px !important;
        text-align: left !important;
    }
    
    .left.item-image img {
        max-width: 350px !important;
        max-height: 450px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Allow text to wrap around image */
    .com-content-article__body {
        clear: none !important;
    }
    
    /* Add some spacing between sections */
    .grid-child.container-component {
        margin-bottom: 30px !important;
    }
}


/* Fix for maintaining single row layout between 993px and 1515px */
@media only screen and (min-width: 993px) and (max-width: 1514px) {
    
    /* Ensure the header container uses flexbox and stays in one row */
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Make sure the navbar collapse is always expanded in this range */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    /* Ensure nav container doesn't wrap */
    .container-nav {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Make the navbar more compact */
    .navbar {
        padding: 0 !important;
    }
    
    /* Adjust menu items to be more compact */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.4em !important; /* Reduced from 0.8em */
        font-size: 0.9rem !important; /* Slightly smaller font */
    }
    
    /* Make search container more flexible */
    .container-search {
        flex-shrink: 2 !important;
        min-width: 120px !important;
    }
    
    .container-search input {
        width: 120px !important;
        font-size: 0.85em !important;
    }
    
    /* Ensure logo doesn't get too squeezed */
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-brand img {
        max-width: 280px !important; /* Slightly smaller than original 320px */
        height: auto !important;
    }
    
    /* Hide the hamburger button in this range since we want expanded menu */
    .navbar-toggler {
        display: none !important;
    }
}


/* Fix for maintaining single row layout between 993px and 1515px */
@media only screen and (min-width: 993px) and (max-width: 1514px) {
    
    /* Ensure the header container uses flexbox and stays in one row */
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Make sure the navbar collapse is always expanded in this range */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    /* Ensure nav container doesn't wrap */
    .container-nav {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Make the navbar more compact */
    .navbar {
        padding: 0 !important;
    }
    
    /* Adjust menu items to be more compact */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.4em !important; /* Reduced from 0.8em */
        font-size: 0.9rem !important; /* Slightly smaller font */
    }
    
    /* Make search container more flexible */
    .container-search {
        flex-shrink: 2 !important;
        min-width: 120px !important;
    }
    
    .container-search input {
        width: 120px !important;
        font-size: 0.85em !important;
    }
    
    /* Ensure logo doesn't get too squeezed */
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-brand img {
        max-width: 280px !important; /* Slightly smaller than original 320px */
        height: auto !important;
    }
    
    /* Hide the hamburger button in this range since we want expanded menu */
    .navbar-toggler {
        display: none !important;
    }
}





@media only screen and (max-width: 1500px) {
 
  .container-banner .banner-overlay {
    height: 50vh;
  }
}

@media only screen and (max-width: 1199px) {
 
  .container-banner .banner-overlay {
    height: 40vh;
  }
}

@media only screen and (max-width: 880px) {
 
  .container-banner .banner-overlay {
    height: 30vh;
  }
}

@media only screen and (max-width: 767px) {
    .container-header {
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    
    .navbar-brand {
        flex-shrink: 1 !important;
	max-width: 280px !important; 
    }
    
    .navbar-brand img {
        width: 280px !important;
        height: auto !important;
    }
    
    .container-search input {
        width: 100px !important;
        font-size: 0.85em !important;
    }
}

@media only screen and (max-width: 680px) {
 
  .container-banner .banner-overlay {
    height: 20vh;
  }
  
  body { font-size:0.8rem;
  /*line-height:0.1;
  padding:0.01em 0.8em */
  } 
}

@media only screen and (max-width: 522px) {
    .container-header {
        gap: 5px !important;
    }
    
    .navbar-brand img {
        width: 280px !important; /* Even smaller logo */
        height: auto !important;
    }
    
    .container-search input {
        width: 80px !important;
        font-size: 0.8em !important;
        padding: 4px 8px !important;
    }
    
    .container-search {
        min-width: 90px !important;
    }
    
    /* Make hamburger button smaller if needed */
    .navbar-toggler {
        padding: 2px 2px !important;
        /*font-size: 1.9em !important; */
    }
}



@media only screen and (max-width: 437px) {
    .container-header {
        gap: 2px !important;
        padding: 5px !important;
    }
    
    /* Make logo very small */
/*    .navbar-brand img {
        width: 220px !important;
        height: auto !important;
    }
  */  
    /* Make search field tiny */
    .container-search input {
        width: 60px !important;
        font-size: 0.75em !important;
        padding: 2px 4px !important;
    }
    
    .container-search {
        min-width: 70px !important;
        flex-shrink: 2 !important;
    }
    
    /* Remove hamburger button size reduction - keep it normal size */
    /* .navbar-toggler rules removed */
    
    /* Reduce grid-child padding if it exists */
    .grid-child {
        padding: 0 !important;
    }
    
    /* Force everything to be as compact as possible */
    .container-header .grid-child {
        margin: 0 !important;
        padding: 0 2px !important;
    }

    .footer {
    padding-top: 20px !important;
    margin-top: 20px !important;
}
}





/* Fix for maintaining single row layout - targeting the specific problem range */
@media only screen and (min-width: 992px) and (max-width: 1092px) {
    
    /* Ensure the header container uses flexbox and stays in one row */
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important; /* Reduced gap for tighter spacing */
    }
    
    /* Make sure the navbar collapse is always expanded in this range */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    /* Ensure nav container doesn't wrap */
    .container-nav {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Make the navbar more compact */
    .navbar {
        padding: 0 !important;
    }
    
    /* Adjust menu items to be very compact in this narrow range */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.3em !important; /* Even more reduced padding */
        font-size: 0.85rem !important; /* Smaller font for tight space */
    }
    
    /* Make search container very compact */
    .container-search {
        flex-shrink: 2 !important;
        min-width: 100px !important;
    }
    
    .container-search input {
        width: 100px !important;
        font-size: 0.8em !important;
        padding: 4px 8px !important;
    }
    
    /* Reduce logo size more aggressively in this range */
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-brand img {
        max-width: 280px !important; /* More aggressive reduction */
        height: auto !important;
    }
    
    /* Hide the hamburger button in this range since we want expanded menu */
    .navbar-toggler {
        display: none !important;
    }
}

/* Smoother transition for slightly wider screens */
@media only screen and (min-width: 1093px) and (max-width: 1514px) {
    
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    .container-nav {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    .navbar {
        padding: 0 !important;
    }
    
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.5em !important;
        font-size: 0.9rem !important;
    }
    
    .container-search {
        flex-shrink: 1 !important;
        min-width: 120px !important;
    }
    
    .container-search input {
        width: 120px !important;
        font-size: 0.85em !important;
    }
    
    .navbar-brand img {
        max-width: 280px !important;
        height: auto !important;
    }
    
    .navbar-toggler {
        display: none !important;
    }
}




/* ADD this rule to ensure text wraps properly at exactly 1200px */
@media only screen and (min-width: 1200px) and (max-width: 1514px) {
    /* Header menu styling */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.6em !important;
        font-size: 0.95rem !important;
    }
    
    .container-search input {
        width: 140px !important;
    }
    
    .navbar-brand img {
        max-width: 280px !important;
    }
    
    /* Image rules to ensure proper text wrapping */
    .left.item-image {
        float: left !important;
        width: auto !important;
        max-width: 600px !important;
        /*padding-right: 35px !important; */
        margin-bottom: 10px !important;
    }
    
    .left.item-image img {
        max-width: 600px !important;
        max-height: 500px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* CRITICAL: Ensure text flows around image */
    .com-content-article__body {
        clear: none !important;
        overflow: visible !important;
    }
}



/*@media (min-width:992px){.offcanvas-sm{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-clip:padding-box;background-color:var(--offcanvas-bg);bottom:0;color:var(--offcanvas-color);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;max-width:100%;outline:0;position:fixed;-webkit-transition:var(--offcanvas-transition);transition:var(--offcanvas-transition);visibility:hidden;z-index:var(--offcanvas-zindex)}}
*/

.banner-overlay{background-attachment:fixed;background-position:top,100%;background-repeat:no-repeat;background-size:contain;color:#fff;height:70vh}

.container-banner .banner-overlay .overlay{
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;padding:0em;text-align:center;
}

/* height:70vh */

.metismenu.mod-menu .metismenu-item{
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  display:-webkit-box;
  display:-ms-flexbox;
  /*display:flex;-ms-flex-wrap:wrap;
  flex-wrap:wrap;
  */
  font-size:1.0rem;
  line-height:2.8;
  padding:0.01em 0.8em}

/*.mod-custom-escuta {
  position: relative; 
  background-size:cover;
}
*/

.container-banner .banner-overlay .overlay {
  display: -webkit-box;
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 1em;
  text-align: center;
  background-color: hsla(0, 0%, 0%, 0.5);

}

.container-header .mod-menu{-webkit-box-flex:1;color:#000000;-ms-flex:1 0 100%;flex:1 0 100%;list-style:none;margin:0;padding:0; 
                            /*display: flex; */
    /*justify-content: space-between;*/
    align-items: right;}

   .topbar .grid-child {
       margin-right: auto; /* or use appropriate value to adjust the left margin */
   }
.logo {
    flex: 0 0 auto;
}

.container-banner img {
  display: block;
  margin: auto;

}

.container-banner .banner-overlay .overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 1em;
  text-align: center;
  background-color: hsla(0, 0%, 0%, 0);
  

}
.container-banner .banner-overlay .overlay .text-thin {
  font-weight: lighter;
}
.container-banner .banner-overlay .overlay .text-thin::after {
  display: block;
  width: 30%;
  height: 4px;
  margin: 1rem auto 2rem;
  content: "";
  background: hsl(0, 0%, 100%);
}
.container-banner .banner-overlay .overlay .text-thin .lead {
  font-size: 150vh;
}

/*
@media screen and (max-height: 740px) {
  .container-banner .banner-overlay {
    height: 200vh;
  }
}
*/
@media screen and (max-height: 140px) {
  .container-banner .banner-overlay {
    /*width: 100%;*/
  }
}


/* Add this NEW media query to handle exactly 1200px */
/*@media only screen and (min-width: 1200px) and (max-width: 1200px) {*/
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
    /* Override mobile layout for exactly 1200px to use desktop layout */
    body.has-sidebar-left .site-grid {
        display: block !important; /* Back to desktop block layout */
        padding-left: 0 !important; /* Remove mobile padding */
        padding-right: 0 !important; /* Remove mobile padding */
    }
    
    /* Restore desktop sidebar positioning */
    body.has-sidebar-left .grid-child.container-sidebar-left {
        float: left !important;
        width: 220px !important;
        margin-right: 20px !important;
        margin-left: 0 !important;
        order: initial !important; /* Remove mobile ordering */
    }
    
    /* Restore desktop main content positioning */
    body.has-sidebar-left .grid-child.container-component {
        float: none !important;
        margin-left: 240px !important; /* Restore desktop margin */
        width: auto !important;
        order: initial !important; /* Remove mobile ordering */
    }
    
    /* Image rules for proper text wrapping */
    .left.item-image {
        float: left !important;
        width: auto !important;
        max-width: 600px !important;
       /* padding-right: 25px !important; */
        margin-bottom: 10px !important;
        text-align: left !important;


    }
    
    .left.item-image img {
        max-width: 600px !important;
        max-height: 500px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Ensure text flows around image */
    .com-content-article__body {
        clear: none !important;
        overflow: visible !important;
    }
}




/* Change some root colors and settings of the document */

:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 0.9rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
}

/* Use the importeed font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

body {
    font-family: sans-serif;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {
    background: rgb(5, 0, 36);
     background: rgb(255, 255, 255);
 /*    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); */
  
}

/* Smaller banner */

/*
.container-banner .banner-overlay {
    height: 85vh; 
  color: transparent;
  width: 100hw;
}
*/

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: #0d6efd;
    /*background: #475BAF; */
    
}

/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
     /*color: #0000;*/
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    /*box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35); */
    /*-webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35); */
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}

/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
   /* color: rgba(119, 9, 121, 1);*/
  color: rgba(0, 0, 0, 1);
}

/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(119, 9, 121, 1);
}

/* If you want to color something, only if you move the mouse over it then write :hover after it
*/

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    background: rgb(220, 220, 220);
    /*background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
}



/* Global login form styling for all screen sizes */
/* Add this to your user.css file outside of any media queries */

/* Align the login form container to match sidebar-left positioning */
.footer .grid-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Align the entire login form to the left to match sidebar */
.mod-login {
    text-align: left !important;
    max-width: 220px !important; /* Match sidebar width */
    margin-left: 0 !important;
    padding-left: 20px !important; /* Match sidebar content padding */
    padding-right: 20px !important; /* Match sidebar content padding */
}

/* For desktop screens with sidebar, position form under sidebar-left */
@media only screen and (min-width: 1200px) {
     .footer {
        text-align: left !important; /* Override any center alignment */
    }
    
    .footer .grid-child {
        text-align: left !important; /* Override any center alignment */
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
    }
    
    .mod-login {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
        text-align: left !important;
    }
}

/* For medium screens, align with sidebar position */
@media only screen and (max-width: 1199px) and (min-width: 768px) {
    .footer {
        text-align: left !important; /* Override any center alignment */
    }
    
    .footer .grid-child {
        text-align: left !important; /* Override any center alignment */
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
    }
    
    .mod-login {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
        text-align: left !important;
    }
}

/* For small screens, force left alignment and match mobile padding */
@media only screen and (max-width: 767px) {
    .footer {
        text-align: left !important; /* Override any center alignment */
    }
    
    .footer .grid-child {
        text-align: left !important; /* Override any center alignment */
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
    }
    
    .mod-login {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: auto !important; /* Prevent centering */
        max-width: none !important; /* Allow full mobile width */
        text-align: left !important;
    }
}

/* Make login form fields smaller */
.mod-login input[type="text"],
.mod-login input[type="password"] {
    font-size: 0.85rem !important;
    padding: 8px 10px !important;
    height: auto !important;
    width: 100% !important; /* Full width within the sidebar column */
}

/* Make login form text darker grey */
.mod-login,
.mod-login label,
.mod-login .form-check-label,
.mod-login .mod-login__options a {
    color: #343a40 !important; /* Dark grey text */
}

/* Style the input placeholders */
.mod-login input::placeholder {
    color: #6c757d !important;
    font-size: 0.8rem !important;
}

/* Change the Enter button color and make it fit sidebar width */
.mod-login .btn-primary {
    background-color: #28a745 !important; /* Green button */
    border-color: #28a745 !important;
    font-size: 0.9rem !important;
    padding: 10px 15px !important;
    width: 100% !important; /* Full width within sidebar column */
    display: block !important;
}

/* Button hover effect */
.mod-login .btn-primary:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Make checkbox slightly smaller and align left */
.mod-login .form-check-input {
    transform: scale(0.95) !important;
}

.mod-login .form-check {
    text-align: left !important;
}

/* Adjust spacing in login form */
.mod-login .form-group {
    margin-bottom: 1rem !important;
}

/* Make the show/hide password button consistent */
.mod-login .input-password-toggle {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
}

/* Style the links in login form and align left */
.mod-login .mod-login__options {
    text-align: left !important;
}

.mod-login .mod-login__options a:hover {
    color: #212529 !important;
    text-decoration: underline !important;
}







/* Language Switcher Flag Styling */
.mod-languages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.mod-languages li {
    display: inline-block;
}

.mod-languages a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.mod-languages a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Flag image styling */
.mod-languages img {
    width: 20px;
    height: auto;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

/* Active language styling */
.mod-languages .lang-active a {
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* Hide text if you want flags only */
.mod-languages .lang-name {
    /* display: none; */ /* Uncomment to show flags only */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mod-languages ul {
        justify-content: center;
    }
    
    .mod-languages img {
        width: 18px;
    }
}







/* Custom language switcher styling */
.custom-language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px; /* Space from search box */
}

/* Remove underlines and styling from flag links */
.custom-language-switcher a {
    text-decoration: none !important;
    border: none !important;
    display: inline-block;
    line-height: 1;
}

.custom-language-switcher a:hover,
.custom-language-switcher a:focus,
.custom-language-switcher a:active {
    text-decoration: none !important;
    border: none !important;
}

/* Style the flag images */
.custom-language-switcher img {
    border: 1px solid #ddd;
    border-radius: 2px;
    display: block;
    transition: opacity 0.2s ease;
}

.custom-language-switcher img:hover {
    opacity: 0.8;
}

/* Position flags to the right of search box */
.container-search {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ensure search form doesn't take full width */
.mod-finder.js-finder-searchform {
    flex: 0 0 auto;
    margin-bottom: 0;
}



/* Alternative fix: Reduce gap between logo and menu */

/* Reset font sizes to normal */
.metismenu.mod-menu .metismenu-item {
    padding: 0.01em 0.8em !important;
    font-size: 1.0rem !important;
}

/* Reduce the main gap in header container */
.container-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2px !important; /* Much smaller gap between logo and menu */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Remove any margins between brand and navigation */
.navbar-brand {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.container-nav {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Add padding to header container for breathing room */
.container-header {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Make the grid children tighter but not zero */
.grid-child {
    padding: 0.01rem 0.2em !important; /* Reduced from 0.5em */
}

/* Keep search and flags together with adequate space */
.container-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important; /* Push to the right */
}

/* Ensure language switcher stays with search */
.custom-language-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}



/* Targeted fix for Portuguese page header wrapping */

/* Force header to stay in one row with better space management */
.container-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important; /* Add some breathing room */
}

/* Make logo area more compact */
.navbar-brand {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.navbar-brand img {
    max-width: 280px !important; /* Slightly smaller logo */
    height: auto !important;
}

/* Make navigation area flexible but efficient */
.container-nav {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

/* Compress menu items slightly for Portuguese content */
.metismenu.mod-menu .metismenu-item {
    padding: 0.01em 0.6em !important; /* Slightly reduced from 0.8em */
    font-size: 0.95rem !important; /* Slightly smaller but still readable */
}

/* Make search and language area more compact */
.container-search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    min-width: 160px !important;
}

/* Optimize search input size */
.container-search input {
    width: 110px !important;
    font-size: 0.9em !important;
    padding: 6px 8px !important;
}

/* Ensure language switcher stays compact */
.custom-language-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Target screens where Portuguese might still wrap */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
    /* More aggressive compression for tight spaces */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.4em !important;
        font-size: 0.9rem !important;
    }
    
    .container-search input {
        width: 100px !important;
        font-size: 0.85em !important;
    }
    
    .navbar-brand img {
        max-width: 260px !important;
    }
}


/* Targeted fix for Portuguese page header wrapping */

/* Force header to stay in one row with better space management */
.container-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important; /* Add some breathing room */
}

/* Make logo area more compact - bring menu closer to logo */
.navbar-brand {
    flex-shrink: 0 !important;
    margin-right: 5px !important; /* Reduced from 10px */
    padding-right: 0 !important;
}

.navbar-brand img {
    max-width: 280px !important; /* Slightly smaller logo */
    height: auto !important;
}

/* Make navigation area start immediately after logo */
.container-nav {
    flex-grow: 1 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Reduce gap between grid children */
.grid-child {
    padding: 0.01rem 0.1em !important; /* Reduced from default */
}

/* Compress menu items slightly for Portuguese content */
.metismenu.mod-menu .metismenu-item {
    padding: 0.01em 0.6em !important; /* Slightly reduced from 0.8em */
    font-size: 0.95rem !important; /* Slightly smaller but still readable */
}

/* Make search and language area more compact */
.container-search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    min-width: 160px !important;
}

/* Optimize search input size */
.container-search input {
    width: 110px !important;
    font-size: 0.9em !important;
    padding: 6px 8px !important;
}

/* Ensure language switcher stays compact */
.custom-language-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Target screens where Portuguese might still wrap */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
    /* More aggressive compression for tight spaces */
    .metismenu.mod-menu .metismenu-item {
        padding: 0.01em 0.4em !important;
        font-size: 0.9rem !important;
    }
    
    .container-search input {
        width: 100px !important;
        font-size: 0.85em !important;
    }
    
    .navbar-brand img {
        max-width: 260px !important;
    }
}




/* RESPONSIVE BRAND LOGO SIZING - Add this to your existing CSS */

/* Default logo size (for screens above 1515px) */
.navbar-brand img {
    max-width: 320px !important; /* Original size */
    height: auto !important;
    transition: max-width 0.3s ease !important; /* Smooth transitions */
}

/* Large desktop screens (1200px - 1514px) */
@media only screen and (min-width: 1200px) and (max-width: 1514px) {
    .navbar-brand img {
        max-width: 300px !important;
        height: auto !important;
    }
}

/* Medium desktop screens (992px - 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-brand img {
        max-width: 280px !important;
        height: auto !important;
    }
}

/* Small desktop/large tablet screens (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-brand img {
        max-width: 260px !important;
        height: auto !important;
    }
}

/* Tablet screens (600px - 767px) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .navbar-brand img {
        max-width: 240px !important;
        height: auto !important;
    }
}

/* iain */

/* Move hamburger menu to the right - IMPROVED VERSION */
@media only screen and (max-width: 991px) {
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .navbar-toggler {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-brand img {
        max-width: 140px !important;
        height: auto !important;
    }
    
    .container-search {
        flex-shrink: 1 !important;
        min-width: 60px !important;
    }
    
    .container-search input {
        width: 50px !important;
        padding: 2px 4px !important;
        font-size: 0.75em !important;
    }
    
    .grid-child {
        padding: 0.01rem 0.1em !important;
        flex-shrink: 1 !important;
    }
}


/* Handle very narrow screens (below 444px) - OPTIMIZED */
@media only screen and (max-width: 443px) {
    .container-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 1px !important; /* Reduced from 3px */
        padding: 2px 5px !important; /* Reduced padding */
    }
    
    .navbar-brand img {
        max-width: 180px !important; /* Keep your desired size */
        height: auto !important;
    }
    
    .container-search {
        min-width: 42px !important; /* Reduced from 60px */
    }
    
    .container-search input {
        width: 30px !important; /* Reduced from 45px */
        padding: 1px 2px !important; /* Reduced padding */
        font-size: 0.7em !important; /* Smaller font */
    }
    
    .navbar-toggler {
        padding: 1px 3px !important; /* Reduced padding */
        font-size: 1.1em !important; /* Slightly smaller */
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .grid-child {
        padding: 0 !important; /* Remove all padding */
        margin: 0 !important;
    }
    
    /* Make language flags smaller to save space */
    .custom-language-switcher img {
        width: 20px !important; /* Smaller flags */
        height: auto !important;
    }
    
    .custom-language-switcher {
        gap: 4px !important; /* Minimal gap between flags */
    }
}






/* Small mobile screens (438px - 479px) */
/*
@media only screen and (min-width: 400px) and (max-width: 479px) {
    .navbar-brand img {
        max-width: 160px !important;
        height: auto !important;
	padding: 0px 0px !important; 
    }
}
 */
 
/* Very small mobile screens (320px - 437px) */
/*
@media only screen and (min-width: 320px) and (max-width: 399px) {
    .navbar-brand img {
        max-width: 150px !important;
        height: auto !important;
	padding: 0px 0px !important; /* Slightly reduced from 0.8em */
    }
}
*/



/* SIMPLE GLOBAL SEARCH FIELD SIZE REDUCTION - Add this to your existing CSS */

.container-search input,
#mod-finder-searchword118 {
    width: 70px !important;
    font-size: 0.8em !important;
    padding: 0px 0px !important;
    border-radius: 3px !important;
    border: 1px solid #ced4da !important;
    box-sizing: border-box !important;
}

.container-search {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 2 !important;
    min-width: 80px !important;
}


/* ****************************** */

/*
@media screen and (max-height:740px){.container-banner .banner-overlay{height:100vh}}
*/

@media screen and (max-height:1040px){.container-banner .banner-overlay{height:100vh}}

.container-banner .banner-overlay {
background-size: contain;
}
/*
.container-banner .banner-overlay {
  background-attachment: unset;
  background-position: top,50%;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
 height: 80vh;
}
*/



/* BANNER CONTENT SPACING FIX - Remove gap between banner and content */

/* Remove the gap after banner in mobile layout */
@media only screen and (max-width: 1199px) {
    /* Remove margin-bottom from banner container */
    .container-banner {
        margin-bottom: 0px !important; /* Remove the 20px gap */
    }
    
    /* Ensure no extra spacing in site-grid */
    body.has-sidebar-left .site-grid {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    
    /* Remove any top margins from content containers */
    body.has-sidebar-left .grid-child.container-sidebar-left {
        margin-top: 0px !important;
    }
    
    body.has-sidebar-left .grid-child.container-component {
        margin-top: 0px !important;
    }
}

/* Also fix for desktop layout */
@media only screen and (min-width: 1200px) {
    .container-banner {
        margin-bottom: 0px !important; /* Remove gap on desktop too */
    }
    
    /* Ensure sidebar and main content start immediately after banner */
    body.has-sidebar-left .grid-child.container-sidebar-left {
        margin-top: 0px !important;
    }
    
    body.has-sidebar-left .grid-child.container-component {
        margin-top: 0px !important;
    }
}



/* BANNER HEIGHT FIX - Size to content but reserve space */

/* Set banner to a reasonable fixed height that matches your image */
.container-banner .banner-overlay,
#mod-custom117,
#mod-custom123 {
    height: 400px !important; /* Fixed height that should match your banner image */
    background-size: cover !important; /* Ensure image covers full width */
    background-position: center top !important; /* Position image at top */
}

/* Override all existing media query height rules with consistent sizing */
@media only screen and (min-width: 1501px) {
    .container-banner .banner-overlay,
    #mod-custom117,
    #mod-custom123 {
        height: 480px !important;
    }
}

@media only screen and (max-width: 1500px) {
    .container-banner .banner-overlay,
    #mod-custom117,
    #mod-custom123 {
        height: 460px !important;
    }
}

@media only screen and (max-width: 1199px) {
    .container-banner .banner-overlay,
    #mod-custom117,
    #mod-custom123 {
        height: 360px !important;
    }
}

@media only screen and (max-width: 880px) {
    .container-banner .banner-overlay,
    #mod-custom117,
    #mod-custom123 {
        height: 320px !important;
    }
}

@media only screen and (max-width: 680px) {
    .container-banner .banner-overlay,
    #mod-custom117,
    #mod-custom123 {
        height: 200px !important;
    }
}

/* Ensure content starts immediately after banner with no gap */
.container-banner {
    margin-bottom: 0px !important;
}

/* Force content to respect banner space */
@media only screen and (max-width: 1199px) {
    body.has-sidebar-left .grid-child.container-sidebar-left,
    body.has-sidebar-left .grid-child.container-component {
        margin-top: 0px !important;
    }
}





/* Hide mobile banners on desktop/tablet */
@media only screen and (min-width: 481px) {
    #mod-custom127, /* Mobile Portuguese banner */
    #mod-custom126  /* Mobile English banner */ {
        display: none !important;
    }
}

/* Show mobile banners on small screens */
@media only screen and (max-width: 480px) {
    #mod-custom117, /* Regular Portuguese banner */
    #mod-custom123  /* Regular English banner */ {
        display: none !important;
    }
    
    #mod-custom127, /* Mobile Portuguese banner */
    #mod-custom128  /* Mobile English banner */ {
        display: block !important;
        height: 200px !important;
        background-size: cover !important;
    }
}

#mod-custom127 {
    background-image: url("/images/headers/escuta_banner_mob_pt.jpg");
}

#mod-custom128 {
    background-image: url("/images/headers/escuta_banner_mob_en.jpg");
}



.vimeo-responsive {
    padding: 56.25% 0 0 0;
    position: relative;
}

.vimeo-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Hide intro image on photography article page only */
body.itemid-136 .left.item-image {
    display: none !important;
}


/* Keep 4 articles in single row on mobile */
@media (max-width: 480px) {
    .featured-articles-container {
        gap: 8px !important; /* Smaller gaps */
        justify-content: space-between !important;
    }
    
    .featured-article-item {
        flex: 1 1 calc(25% - 6px) !important; /* Force 4 per row */
        max-width: calc(25% - 6px) !important;
        min-width: auto !important; /* Remove min-width constraint */
    }
    
    .featured-article-title {
        font-size: 0.7rem !important; /* Smaller text */
        margin-top: 6px !important;
        line-height: 1.2 !important;
        padding: 0 2px !important; /* Less padding */
    }
    
    /* Make images slightly smaller if needed */
    .featured-article-image {
        border-width: 1px !important;
    }
}

/* For very small screens */
@media (max-width: 360px) {
    .featured-articles-container {
        gap: 5px !important;
    }
    
    .featured-article-item {
        flex: 1 1 calc(25% - 4px) !important;
        max-width: calc(25% - 4px) !important;
    }
    
    .featured-article-title {
        font-size: 0.65rem !important;
        margin-top: 4px !important;
    }
}


.newsflash-image figcaption {
    display: none !important;
}



/* Hide captions */
.newsflash-image figcaption {
    display: none !important;
}

/* Force newsflash items to use flexbox for proper ordering */
.mod-articlesnews__item {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}

/* Move image first using flexbox order */
.newsflash-image {
    order: 1 !important;
    margin-bottom: 0 !important;
}

/* Move title below image and style it - left aligned with padding */
.mod-articlesnews .newsflash-title {
    order: 2 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    padding: 0 0 0 15px !important;
}

.mod-articlesnews .newsflash-title a {
    color: #495057 !important;
    text-decoration: none !important;
    font-family: "Noto Sans", sans-serif !important;
}

.mod-articlesnews .newsflash-title a:hover {
    color: #001B4C !important;
    text-decoration: none !important;
}



.audio-player {
    margin: 20px 0;
    text-align: left;
}

.audio-player audio {
    width: 100%;
    max-width: 500px;
    height: 40px;
}

/* MetisMenu dropdown styling - match sidebar grey */
.metismenu .mm-collapse {
    background-color: #343a40 !important; /* Same as featured-articles-header */
}

/* Individual dropdown menu items */
.metismenu .mm-collapse li a {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* Hover state for dropdown items */
.metismenu .mm-collapse li a:hover {
    background-color: #495057 !important; /* Slightly lighter for hover */
}

/* Active/current dropdown items */
.metismenu .mm-collapse li a:focus,
.metismenu .mm-collapse li a.active {
    background-color: #6c757d !important; /* Even lighter for active */
}

/* Alternative selector for nested dropdowns */
.metismenu ul.mm-collapse {
    background-color: #343a40 !important;
}

/* Ensure proper styling for all menu levels */
.metismenu .mm-collapse .metismenu-item a {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.metismenu .mm-collapse .metismenu-item a:hover {
    background-color: rgba(255,255,255,0.1) !important;
}