/* Default (blog-list/homepage) — smaller float-right images */
img[align="right"] {
  width: 300px !important;
  max-width: 100%;
  float: right;
  margin: 0 0 1rem 1rem !important; /* top | right | bottom | left */
  display: block;
}

img[align="left"] {
  width: 300px !important;
  max-width: 100%;
  float: left;
  margin: 0 1rem 1rem 0 !important; /* top | right | bottom | left */
  display: block;
}


/* like button and flags ******************************/
.likebuttons-and-flags {
    display: flex;
    margin-top: 20px;
    margin-bottom: 10px;
}

.likebuttons-and-flags .like-dislike-wrapper {
    margin-right: 50px;
}
/*****************************************************/


/* the world was spinning the wrong way !!! :))) *** */
.reverse-spin {
  transform: scaleX(-1);
}


/* **************** PINNED **** BREAKING NEWS FRONT PAGE */
.pinned-breaking-header-class {
    background:#ffaaaa;
}

/* .pinned-breaking-class  { */
.card:has(.pinned-breaking-class) {
    background:#ffeeee;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    text-align: justify;
    font-weight: 800;
    line-height: 1.5;
    color: #444;
    border: 1px solid #faa;
    border-radius: 8px;
}


/* HEADING */

.brand-row {
  display: flex;
  justify-content: space-between; /* logo left, search right */
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

.brand-logo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 65%; /* Prevents the logo from hogging all the space */
  display: flex;
  align-items: center;
  padding-right: 200px;
}

.brand-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.brand-search form {
  max-width: 280px;
  width: 100%;
}

.site-description {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: left;
  color: #666;
}

.container-nav {
  padding: 0 1rem;
}


/* Mobile: stack */
@media (max-width: 768px) {
    .brand-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .brand-search {
        width: 100%;
        margin-top: 0.5rem;
    }
}


/* Mobile: stack again when it gets cramped */
@media (max-width: 768px) {
    .navbar-brand {
        flex-direction: column;
        align-items: flex-start;
    }
    .brand-search {
        width: 100%;
        margin-top: .5rem;
    }
}

/* ─── OPINION BLOG -------─────────────────────────────────────────── */
.opinion-leading-articles .blog-item {
    border: 1px solid #ccc;      /* thin grey border */
    border-radius: 8px;
    padding: 1.0rem;
    margin-top: 2rem;         /* space between cards */
    margin-bottom: 0rem;         /* space between cards */
    background:#eee;             /* if you want a white card on coloured page */
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.opinion-intro-articles .blog-item {
    border: 1px solid #ccc;      /* thin grey border */
    border-radius: 8px;
    padding: 1.0rem;
    margin-top: 2rem;         /* space between cards */
    margin-bottom: 0rem;         /* space between cards */
    background:#eee;             /* if you want a white card on coloured page */
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}


/* ─── 3-COLUMN BLOG CARD ─────────────────────────────────────────── */

/* Card shell */
.blog-items.columns-3 .blog-item {
    border:1px solid #bbb;
    border-radius:8px;
    padding:1rem;
    margin:2rem 0 0;
    background:#eee;
    box-shadow:0 2px 6px rgba(0,0,0,.05);

    /* clearfix so floats never collapse the card’s height */
    position:relative;
    
    display: flow-root;
}

/* Heading */
.blog-items.columns-3 .blog-item .item-title,
.blog-items.columns-3 .blog-item .item-title a {
    font-size:1rem;
    margin:0 0 .75rem;
    line-height:1.3;
    text-align:left;          /* overrides any inherited justify */
    -webkit-hyphens:none;
}

/* Body copy */
.blog-items.columns-3 .blog-item .item-content {
    font-size:.8rem;
    line-height:1.1;

    /* clamp to ~10 lines */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:10;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* justify only real text (p, ul, ol, li) */
.blog-items.columns-3 .blog-item .item-content p,
.blog-items.columns-3 .blog-item .item-content ul,
.blog-items.columns-3 .blog-item .item-content ol,
.blog-items.columns-3 .blog-item .item-content li {
    text-align:justify;
}

/* Intro image */
.blog-items.columns-3 .blog-item img[align="right"] {
    float: right !important;
    width: auto !important;
    max-width: 45% !important;
    height: auto !important;
    margin: 0 0 1em 1em !important;
}

/* Make sure headings don’t clear the float */
.blog-item p,
.blog-item h2,
.blog-item h3,
.blog-item h4 {
    clear:none;
}




/* Container (optional) */
.latest-story {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: .5rem;
}

/* Float intro images */
.latest-story .mod-articles-item-content img {
    float: left;
    margin-top: 1em !important;
    margin-left: 0em !important;
    margin-right: 2em !important;
    max-width: 265px !important;
    height: 265px !important;
    width: auto !important;
}

.latest-story .mod-articles-item-content {
  font-size: 1.0em !important;
  font-weight: bold;
}

/* Push only the first paragraph down, creating a gap under the title */
.latest-story .mod-articles-item-content p:first-of-type {
  margin-top: 1.5em;
}
/* Title styling */
.latest-story .mod-articles-title a {
  font-size: 1.5rem;
  color: #0056b3;       /* or inherit from your theme */
  text-decoration: underline;
}

/* Hover state (optional) */
.latest-story .mod-articles-title a:hover {
  color: darken(#0056b3, 10%);
  text-decoration: none;
}

.mod-articles-item-content .mod-articles-title a:hover,
.mod-articles-item-content .mod-articles-title a:active {
  color: #880088 !important;
}


/* MENU SETTINGS ------------------------------------------------------------- */

/* Top-level menu settings */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a {
  font-size: 2.0rem !important;
  color: #CC0099 !important;
  font-weight: 600;
  text-transform: none;
  border-bottom: 2px solid transparent !important; /* Reserve space for border */
  padding: 5px 0px !important; /* Add padding for better spacing */
}

/* Hover and focus for top-level menu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a:hover,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a:focus {
  border-bottom: 2px solid #ffffff !important; /* Change to white on hover */
  padding-bottom: 2px !important; /* Keep existing padding */
}

/* Active/current top-level menu item */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.current > a,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.active > a {
  border-bottom: 2px solid #ffffff !important;
}

/* Dropdown menu container (submenu) */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse {
  background-color: #ffffff !important; /* White background for dropdown */
  border: 1px solid #CC0099 !important; /* Border to match theme */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  min-width: 200px; /* Adjust width as needed */
  padding: 10px 0 !important; /* Padding inside dropdown */
  position: absolute;
  z-index: 1000; /* Ensure dropdown appears above other content */
  display: none; /* Hidden by default (MetisMenu may override this via JS) */
}

/* Show dropdown on parent hover */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li:hover > ul.mm-collapse,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li.parent > ul.mm-collapse[aria-expanded="true"] {
  display: block !important; /* Show dropdown on hover or when expanded */
}

/* Submenu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a {
  font-size: 1.6rem !important; /* Slightly smaller font for subitems */
  color: #10aa10 !important;
  font-weight: 400; /* Lighter weight for subitems */
  text-transform: none;
  padding: 8px 15px !important; /* Padding for submenu items */
  display: block; /* Ensure full-width clickable area */
}

/* Hover and focus for submenu items */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a:hover,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li > a:focus {
  color: #ffffff !important;
  background-color: #CC0099 !important; /* Background on hover */
  border-bottom: none !important; /* No underline for subitems */
}

/* Active/current submenu item */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li.current > a,
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > ul.mm-collapse > li.active > a {
  color: #ffffff !important;
  background-color: #CC0099 !important;
  border-bottom: none !important;
}

/* Style for the toggle button (optional, if you want to customize it) */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > button.mm-toggler {
  background: transparent !important;
  border: none !important;
  color: #CC0099 !important; /* Match menu color */
  padding: 0 10px !important;
}

/* Hover for toggle button */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > button.mm-toggler:hover {
  color: #ffffff !important;
}

.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 0px;
    background-color: #000000; /* Solid black background */
    background-image: none; /* Remove gradient */
    box-shadow: inset 0 5px 5px rgba(0, 0, 0, 0.6); /* Adjust shadow to match black background */
}

/* clickable header link: bigger and fatter */
.container-header a {
  font-size: 4rem;    /* about 24px—adjust as needed */
  font-weight: 800;     /* extra-bold weight */
  line-height: 1.2;      /* prevents it from looking too tight */
  text-decoration: none !important; /* remove underlines (optional) */
}

.site-title, .site-description {
    border-bottom: none !important;
    margin-top: 0px; /* Adjust spacing between logo and text */
}

/* Text */
.container-component main p {
  text-align: justify;
  margin-bottom: 1em;
}

/* Single-article page header */
.com-content-article.item-page .page-header h1 {
  font-size: 1.50rem !important;
  text-decoration: none !important;
  color: #AA0077 !important;
}

/* Blog list page titles (homepage/featured) */
h2.item-title {
  font-size: 1.25rem !important;
  text-decoration: none !important;
}

h2.item-title a,
h2.item-title a:link,
h2.item-title a:visited {
  color: #CC0099 !important;
}

h2.item-title a:hover,
h2.item-title a:active {
  color: #880055 !important;
}

/* Category blog module titles */
.com-content-category-blog__item .page-header h2 {
  font-size: 1.25rem !important;
  text-decoration: none !important;
}

.com-content-category-blog__item .page-header h2 a,
.com-content-category-blog__item .page-header h2 a:link,
.com-content-category-blog__item .page-header h2 a:visited {
  color: #CC0099 !important;
}

.com-content-category-blog__item .page-header h2 a:hover,
.com-content-category-blog__item .page-header h2 a:active {
  color: #880055 !important;
}

/* Read more button */
p.readmore a,
p.readmore a:link,
p.readmore a:visited {
  color: #7700AA !important;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.5rem !important;
  line-height: 1.2 !important;
  display: inline-block;
}

p.readmore a:hover,
p.readmore a:active {
  color: #880055 !important;
}

/* Sophisticated flex layout for larger screens */
@media (min-width: 769px) {
  .site-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .container-sidebar-left,
  .container-sidebar-right {
    flex: 0 0 300px !important;
    max-width: 300px !important;
  }

  .container-component {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* Mobile layout: stack content vertically */
@media (max-width: 768px) {
  .site-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }

  .container-sidebar-left,
  .container-sidebar-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .container-component {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Ensure inner module cards don’t overflow */
.container-component .card {
  overflow-wrap: break-word;
}



/************* category NEWS ********************************************************/
.leading-articles-news h1,
.leading-articles-news h2,
.leading-articles-news h3 {
    margin-bottom: 2.0rem;

}

.leading-articles-news {
    padding: 1rem;
    font-weight: bold;     /* Makes text thicker */
    font-size: 1.1rem;     /* Makes text larger */
    line-height: 1.1;      /* Optional: improves readability */
}


/* Bigger heading just for leading NEWS items */
.leading-articles-news .page-header h2 {
    font-size: 1.75rem !important;   
    line-height: 1.2;
}

/* Bigger heading just for leading NEWS items */
.intro-articles-news .page-header h2 {
    font-size: 1.0rem !important;
    line-height: 1.2;
}

/************* category OPINIONS ********************************************************/
body.page-display-opinions {
    background-color: #eeffff;
}


/************* category STORIES ********************************************************/
body.page-display-stories  {
    background-color: #f0fff0;
}


/************* DARKWEB ********************************************************/
body.page-display-darkweb {
  background-color: #0a0a0a;  /* Slightly darker than #111 */
  color: #ddd;
}


.leading-articles-darkweb h1,
.leading-articles-darkweb h2,
.leading-articles-darkweb h3 {
    margin-bottom: 1.5rem;  /* Adjust as needed */

}

.leading-articles-darkweb, .intro-articles-darkweb {
    background: #111;
    color: #ddd;
    padding: 2rem;
    font-weight: bold;     /* Makes text thicker */
    font-size: 1.1rem;     /* Makes text larger */
    line-height: 1.5;      /* Optional: improves readability */
}

.leading-articles-darkweb img[align="right"],
.intro-articles-darkweb img[align="right"] {
      width: 300px !important;
      max-width: 100%;
}

.leading-articles-darkweb .page-header h2,
.intro-articles-darkweb .page-header h2 {
  font-size: 1.75rem !important;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
}


.dark-web-blog .com-content-article.item-page img[align="right"] {
  width: 300px !important;
  max-width: 100%;
  background: #111;
  color: #ddd;
  padding: 2rem;
}


/* Full-article view — override to bigger */
.item-pagepage-display-darkweb img[align="right"] {
  width: 300px !important;
  max-width: 100%;
}

.item-pagepage-display-darkweb .page-header {
  background: #111;
  color: #CC0099 !important;    /* Match other headings color */
  padding: 2rem !important;
}

.item-pagepage-display-darkweb .page-header h1 {
  font-size: 2.0rem !important;
}

.item-pagepage-display-darkweb .com-content-article__body {
  background: #111;
  color: #ddd;
  padding: 2rem;
}

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

/* Mobile image adjustments */
@media (max-width: 576px) {
  img[align="right"] {
   float: right !important;
    width: 100% !important;
    max-width: 150px !important;
  }

  /* Smaller headings for mobile */
  h2.item-title,
  .com-content-category-blog__item .page-header h2 {
    font-size: 1rem !important;
  }
}


.category li {
  display: flex;
  flex-direction: column;
  width: calc(33.33% - 20px);
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
}

.category li h3.cat-item-title {
  font-size: 1.5em;
}

.category li .cat-desc {
  font-size: 1em;
  color: #555;
}

.category li dl.article-count {
  font-size: 0.9em;
  color: #888;
}

.category {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
}

/* ---------- FORCE DESKTOP GRID ON ALL VIEWPORTS ---------- */
.site-grid,
.row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* fix sidebar & main columns */
.container-sidebar-left,
.container-sidebar-right {
  flex: 0 0 300px !important;
  max-width: 300px !important;
}

.container-component {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ---------- FORCE HORIZONTAL TOP MENU ---------- */
.navbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;   /* prevent vertical stacking */
}

.navbar .nav-item {
  display: inline-block !important;
  margin-right: 1rem !important;    /* optional spacing */
}

/* always show full menu, hide the hamburger */
.navbar-toggler,
.navbar-collapse.collapse {
  display: none !important;
}

/*---------------------------------------------------------*/
/* keep the visual order when flex is active */
@media (min-width:1025px){
  .container-sidebar-left {order:1;}
  .container-component    {order:2;}
  .container-sidebar-right{order:3;}
}

@media (min-width:768px){                     /* tablets & up */
  /* turn the UL itself into a flex row (add -webkit-* for pre-iOS10) */
  ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list{
    display:-webkit-box !important;
    display:-webkit-flex !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;              /* prevent stacking */
    white-space:nowrap !important;
    gap:0.5rem;                                /* spacing between items */
  }
}

/* ─── 1 ▸ Search module fits on the same nav row ─────────────────────── */
@media (min-width:768px){                        /* tablets & up */
  /* let the whole module hug the right edge */
  .navbar .mod-search{margin-left:auto!important;flex:0 0 auto!important;}

  /* stop wide legacy widths from forcing a wrap */
  .navbar .mod-search input[type="text"],
  .navbar .mod-search input[type="search"]{
    width:100%!important;         /* grow / shrink with flex item */
    max-width:160px!important;    /* cap on iPad so it fits */
    font-size:1rem!important;
  }
}


/* ─── Two-column grid for ANY “intro/columns” wrapper on iPad ────── */
@media (min-width:768px) and (max-width:1024px){
  /* match .columns-1 / 2 / 3 etc. **or** the Joomla 5 .intro-items wrapper */
  .blog-items[class*="columns-"],
  .blog-items.intro-items{
    display:-webkit-flex!important;   /* old iOS */
    display:flex !important;
    flex-wrap:wrap !important;
    gap:0.5rem !important;
  }
  .blog-items[class*="columns-"] .blog-item,
  .blog-items.intro-items       .blog-item{
    flex:0 0 calc(50% - 0.5rem)!important;   /* 2 cards per row */
    max-width:calc(50% - 0.5rem)!important;
  }
}

/* ─── Keep three columns on real desktops ( ≥ 1025 px ) ─────────── */
@media (min-width:1025px){
  .blog-items[class*="columns-"],
  .blog-items.intro-items{
    display:flex!important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;  /* stretch across row */
    gap:0.5rem !important;
  }
  .blog-items[class*="columns-"] .blog-item,
  .blog-items.intro-items       .blog-item{
    flex:0 0 calc(33.333% - 0.5rem)!important;
    max-width:calc(33.333% - 0.5rem)!important;
    margin-bottom:0.1rem !important;             /* vertical gap fallback */
  }
}