/***************************************************                                
  ___ _   _ ___| |_ ___  _ __ ___     ___ ___ ___ 
 / __| | | / __| __/ _ \| '_ ` _ \   / __/ __/ __|
| (__| |_| \__ \ || (_) | | | | | | | (__\__ \__ \
 \___|\__,_|___/\__\___/|_| |_| |_|  \___|___/___/

***************************************************/
/* Keep any customised css attributes here */


/********************************************
Client based CSS for theme-base-custom
********************************************/
:root {

    /* Main colors for the custom theme
     * These colors are used throughout the theme for consistency.
     */
    --main-background-color: #025f60;
    --main-background-color-lighter: #029d99;
    --tertiary-background-color: #f0f0f0;
    --tertiary-background-color-lighter: #ffffff;
    --secondary-background-color: #e0e0e0;
    --secondary-background-color-lighter: #f5f5f5;
    --main-font-color: #4a5d7a;
    --main-font-color-inverse: #e5dddb;
    --main-heading-color: #025f60;
    --main-link-hover: #025f60;
    --main-link-hover-inverse: #abf6ea91;

    /* Linear gradient for the background block (side bar and messages) */
    --linear-gradient-background-block: linear-gradient(120deg,
            var(--main-background-color-lighter),
            var(--main-background-color));

    /* Linear gradient for the shimmer effect on the header of the sidebar */
    --linear-gradient-text-shimmer: linear-gradient(90deg, #e5dddb, #f9dcd4, #fce59bb7, #e5dddb);
}

.theme-base-custom .content a,
.theme-base-custom .related-posts li a:hover {
    color: var(--main-link-hover);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    50% {
        background-position: 0 1;
    }

    100% {
        background-position: -200% 0;
    }
}

.theme-base-custom .sidebar {
    background: var(--linear-gradient-background-block);
    background-size: cover;
    color: var(--main-font-color-inverse);
}

.theme-base-custom .sidebar a {
    color: var(--main-font-color-inverse)
}

.theme-base-custom .sidebar a:hover {
    color: var(--main-link-hover-inv)
}

.theme-base-custom .content {
    color: var(--main-font-color);
}

/** 
* Shimmering effect in the sidebar
* This is a simple shimmering effect using CSS animations.
*/
.theme-base-custom .sidebar h1 {
    background: var(--linear-gradient-text-shimmer);
    background-clip: text;
    background-size: 200% 200%;
    color: transparent;
    animation: shimmer 21s infinite;
}

.theme-base-custom .hamburger-line {
   background: var(--main-font-color-inverse);
}

/**
* other headings are flat
*/
.theme-base-custom .content h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--main-heading-color);
}

.theme-base-custom .message {
    background: var(--linear-gradient-background-block);
    color: var(--main-font-color-inverse);
    border: 2px solid #333;
}

/***********************
sidebar flex container
***********************/
.sidebar-title {
    display: flex;
    align-items: center;
    text-decoration: none;
    max-width: 90%;
    min-width: 0;
    flex-shrink: 1;
    /* overflow: hidden; */
    color: inherit;
}

.sidebar-title h1 {
    font-size: 2.80rem;
}

.sidebar-logo {
    width: 7rem;
    height: auto;
    max-width: 100%;
    margin-right: 0.5rem;
}

/**
* Button
* Customized button for the theme 
* This button uses a gradient background, border, and shadow for a modern look.
* It also includes hover and focus states for better user interaction.
*/
.theme-base-custom .btn-custom {
  
  background: var(--linear-gradient-background-block);
  
  /* Border */
  border: 2px solid #333;
  
  /* Text */
  color: var(--main-font-color-inverse) !important;
  text-decoration: none;
  
  /* Shadow */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  
  /* Button styling */
  padding: 12px 24px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-base-custom .btn-custom:hover {
  /* Enhance shadow on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  
  /* Keep text color on hover */
  color: var(--main-font-color-inverse) !important;
  text-decoration: none;
  
  /* slightly lift the button */
  transform: translateY(-2px);
}

.theme-base-custom .btn-custom:focus {
  outline: 2px solid #e5dddb;
  outline-offset: 2px;
}

/**
* Pagination and pagination items
* Give similar styling to pagination items as buttons
*/

.theme-base-custom .pagination {
  overflow: visible;
  margin-left: -1rem;
  margin-right: -1rem;
  text-align: center;
}

.theme-base-custom .pagination-item {
  
  background: var(--linear-gradient-background-block);
  
  /* Border */
  border: 2px solid #333;
  
  /* Text */
  color: var(--main-font-color-inverse) !important;
  text-decoration: none;
  
  /* Shadow */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  
  /* Button styling */
  padding: 12px 24px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-base-custom .pagination-item:hover {
  /* Enhance shadow on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  
  /* Keep text color on hover */
  color: var(--main-font-color-inverse) !important;
  text-decoration: none;
  
  /* slightly lift the button */
  transform: translateY(-2px);
}

.theme-base-custom .pagination-item:first-child {
  margin-bottom: -1px;
}

/* Only provide a hover state for linked pagination items */
.theme-base-custom a.pagination-item:hover {
  /* Enhance shadow on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  
  /* Keep text color on hover */
  color: var(--main-font-color-inverse) !important;
  text-decoration: none;
  
  /* slightly lift the button */
  transform: translateY(-2px);
}


/*******
tables
*******/
/*Turn off 'zebra' colors on table rows  */
.theme-base-custom tr {
    background: none !important;
}


.theme-base-custom table {
    /*...all table attributes like fontsize etc*/
    margin-bottom: 1rem;
    width: 100%;
    border: 1px solid darkslategrey;
    border-collapse: collapse;
    padding: 8px;
}

.theme-base-custom table td,
table th {
    border: 1px solid darkslategrey;
    /* match the table border style */
}

.theme-base-custom table tr>th {
    background-color: var(--tertiary-background-color);
}

.theme-base-custom table tr>td {
    background-color: var(--tertiary-background-color-lighter);
}

.theme-base-custom table tr>th:nth-child(odd):not(:nth-child(1)) {
    background-color: var(--main-background-color);
}

.theme-base-custom table tr>td:nth-child(odd):not(:nth-child(1)) {
    background-color: var(--main-background-color-lighter);
}

.theme-base-custom table tr>th:nth-child(even) {
    background-color: var(--secondary-background-color);
}

.theme-base-custom table tr>td:nth-child(even) {
    background-color: var(--secondary-background-color-lighter);
}