/*
Theme Name: Faculty
Theme URI: http://owwwlab.com/wp-faculty
Author: owwwlab
Author URI: http://owwwlab.com
Description: Faculty is a unique theme for academic personal profile
Version: 4.0.0
License: GNU General Public License
License URI: license.txt
Tags: theme-options, full-width-template, sticky-post, threaded-comments, featured-images
Text Domain: faculty
*/


/*
find the styles at the css folder
*/

body {
    font-family: 'Roboto', sans-serif;
}

/* Apply the font to specific elements if needed */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}






.style-container{
    position: fixed;
    right:-205px;
    top:150px;
    width:212px;
    height:260px;
    background-color: #3c3c3c;
    padding:10px;
    z-index: 5000;
    color:#fff;
}
#demo-custom{
    position:absolute;
    top:0;
    left:-38px;
    font-size: 25px;
    text-align: center;
    width:250px;
    height:40px;
    cursor: pointer;
    z-index: 5000;
    background-color: #353535;
    text-align:left;
    padding:1px 10px;
}

/*     */
#demo-custom{
display: none;
}
.style-container {
display: none;
}

/*   */ 

#demo-custom h4{
    display: inline;
    padding-left: 15px;
    padding-top: 0;
    margin-top: 0;
    font-size: 20px;
}

ul.pre-styles{
    margin: 60px 0px 10px -7px;
    list-style: none;
}

ul.pre-styles li{
    width:60px;
    height:40px;
    display: inline-block;
    margin-right:10px;
    margin-bottom:10px;
    cursor: pointer;
}
ul.pre-styles li:hover{
    border:2px solid #2c2c2c;
}

.default{
    background-color:#03cc85;
}
.purple{
    background-color:#ec46ef;
}
.red{
    background-color:#ff5468;
}
.pink{
    background-color:#f17098;
}
.yellow{
    background-color:#d5eb7d;
}
.blue{
    background-color:#9a9ef6;
}
.cyan{
    background-color:#0bb;
}






/* CSS for Recent News/Updates Section */
.recent-news-section {
    padding: 50px 0;
    background-color: #ffffff; /* A clean white background to match your theme */
}

.custom-news-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 20px;
}

.custom-news-list li {
    padding: 5px 20px 20px 20px;
    border-bottom: 1px solid #e9e9e9; /* A light border for separation */
    font-size: 1em; /* Adjust font size as needed */
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}

.custom-news-list li:last-child {
    border-bottom: none; /* Removes the border from the last item */
}

.news-date {
    font-weight: 700; /* Bolder font for the date */
    color: #03bb7a;     /* #03bb7a color1 #03cc85 pest color color2: #333, color3: red #ff0000*/  
    margin-right: 15px;
    flex-shrink: 0; /* Prevents the date from wrapping */
}

.news-text {
    color: #555;
    text-align: justify;
}
.news-text a { word-break: break-word; overflow-wrap: anywhere; }


/* Add this to your CSS file */

/* This class will be added by JavaScript to hide extra news items */
/*.hidden-news {display: none;}*/

/* Optional: Style for the "Read More" button */
#load-more-news {
    margin-top: 20px;
    padding: 10px 25px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    /* You can use your theme's primary button class like 'btn btn-primary' as in the HTML */
}

.btn-danger {
    color: #ffffff;
    background-color: #03bb7a;
    border-color: #05b577;
}

.btn-danger:hover {
    color: #ffffff;
    background-color: #0e704e;
    border-color: #05b577;
}

/* Hide all beyond 10 initially */
.custom-news-list li {
    display: none;
}

.custom-news-list li.visible {
    display: list-item;
}


.custom-news-list {
    padding-left: 0; /* remove default bullets */
    list-style: none; /* no default list style */
}

.custom-news-list li {
    margin-bottom: 15px;
    display: none; /* controlled by JS */
}

.custom-news-list li.visible {
    display: flex;          /* flexbox layout */
    align-items: flex-start; /* date aligned at top of text */
}

.custom-news-list .news-date {
    min-width: 90px;        /* keeps date aligned vertically */
    font-weight: bold;
    margin-right: 10px;
    white-space: nowrap;    /* prevent wrapping of date */
}

.custom-news-list .news-text {
    flex: 1;                /* take remaining space */
    text-align: justify;    /* justify the text */
}

.margin_bottom{margin-bottom: 20px;}
.custom_margin_bottom{margin-bottom: 20px;}

.pagecontents{display:block !important;}





/* --- Custom Styles for Visitor Map --- */

/* Fix for embedded visitor map (targets actual id used in HTML) */
#map_container {
  margin-top: 20px;
  padding: 12px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  overflow: hidden;        /* ensures injected map stays within container */
  position: relative;      /* create a stacking context */
  z-index: 0;              /* stay behind elements that should overlay */
}

/* Ensure the embedded map element (iframe, object, or div) stays within the container */
#map_container iframe,
#map_container object,
#map_container embed,
#map_container > div {
  position: relative !important;
  z-index: 0 !important;
  max-width: 100%;
  border: none;
  display: block;
}


/* #visitor-map-container {
/*   margin-top: 30px;         /* Adds space below the title */  
/*   padding: 15px;            /* Adds a little space inside the border */
/*   background-color: #ffffff;/* A clean white background for the map */
/*   border-radius: 8px;       /* Gives the container soft, rounded corners */
/*   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
/*   overflow: hidden;         /* Ensures the map stays within the rounded corners */
/*   text-align: center;       /* Centers the map script output */
/* }

/* Optional: Ensures the map itself is responsive */
/* #visitor-map-container iframe,#visitor-map-container object,#visitor-map-container embed {max-width: 100%;border: none;}