/*
Theme Name: Coop SSL
Theme URI: https://coop-ssl.ch
Author: Raghavendra N Acharya
Author URI: https://ranarts.in
Description: Custom WordPress theme for Coop-SSL using Bootstrap
Version: 1.0
License: GPL-2.0+
*/

:root {
    /* Brand Colors */
    --primary: #009EE3;
    --primary-dark: #0077B6;
    --text-heading: #313231;
    --text-body: #4B5563;
    --link: #009EE3;
    --link-hover: #0077B6;
    --border-color: #D1D5DB;
    --bg-light: #F9FAFB;
    --bg-muted: #F3F4F6;
}

body {
    font-family: Calibri!important;
    font-size: 22px;
/*    color: var(--text-body);*/
    line-height: 1.6;
    background-color: #ffffff;
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Poppins!important;
    /*color: var(--text-heading);*/
    color: #000;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 48px;
    font-weight: 700;
}

h2 {
    font-size: 36px;
    font-weight: 600;
}

h3 {
    font-size: 28px;
    font-weight: 600;
}

h4 {
    font-size: 22px;
    font-weight: 500;
}

h5 {
    font-size: 18px;
    font-weight: 600;
}

h6 {
    font-size: 16px;
    font-weight: 600;
}

a {
    color: var(--link);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--bg-muted);
    border: 1px solid var(--border-color);
    color: var(--text-heading);
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: #E5E7EB;
    /* slightly darker muted bg */
}

.hero-section .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 158, 227, 0.35);
    /* Brand blue with transparency */
    z-index: 1;
    pointer-events: none;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.navbar .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

/* Base dropdown item style */
.dropdown-menu .dropdown-item {
    color: #000;
    /* Dark blue text */
    background-color: #ffffff;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 500;
}

/* On hover */
.dropdown-menu .dropdown-item:hover {
    background-color: #009fe3!important;
    /* Light blue background */
    color: white!important;
	text-transform: capitalize!important;
	
    /* Primary blue */
}


 ul.dropdown-menu.dropdown-menu-start.show {
        
        color: white !important;
        text-transform: capitalize !important;
    }

/* On active (current page) */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #009FE3!important;
    /* Slightly darker blue for active */
    color: white!important;
    font-weight: 600;
	 text-transform: capitalize!important;
}

.custom-submission-form .acf-field input[type=text], .acf-field input[type=password], .acf-field input[type=date], .acf-field input[type=datetime], .acf-field input[type=datetime-local], .acf-field input[type=email], .acf-field input[type=month], .acf-field input[type=number], .acf-field input[type=search], .acf-field input[type=tel], .acf-field input[type=time], .acf-field input[type=url], .acf-field input[type=week], .acf-field textarea, .acf-field select {
    line-height: 2 !important;
}
 
.updated {
  background-color: #d1e7dd;
  color: #0f5132;
  padding: 12px 12px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: 500;
}
 
.updated p {
    margin: 0 !important;
}

.footer-links li {
  margin-bottom: 6px; /* or whatever you prefer */
}

.footer-links li a {
  color: white;
  text-decoration: none;
}

.footer-links li a:hover {
  text-decoration: underline;
}






/*Danu work*/
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #009fe3!important;
}
.logo-desktop {
  display: block;
}

.logo-mobile {
  display: none;
}
img.img-fluid.rounded.mb-4 {
    width: 100%;
}
.text-primary {
	color: #009fe3!important;
}
.mrl {
    margin-right: 100px;
    margin-left: 100px;
}
ul#menu-main-menu li a {
    font-family: Poppins!important;
	color: #009fe3;
    padding-right: 25px;
    font-weight: 600;
}
.boxes-ctn{
        min-height: 115px;
 /*min-height: 87px;*/
}


div#mainNavbar {
    text-transform: uppercase;
}

ul.dropdown-menu.dropdown-menu-start.show li a {
    color: #000 !important;
}

ul.dropdown-menu.dropdown-menu-start.show li a:hover {
    color: #fff !important;
}
ul.dropdown-menu.dropdown-menu-start.show li a:active {
    color: #fff !important;
}

/* section.hero-section.text-white.d-flex.align-items-center.position-relative {
    height: 60vh !important;
} */

.acf-content {
    font-family: calibri;
    color: #000;
    font-size: 22px;
}

.py-8 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}


/* .card.h-100.shadow-sm.rounded-4.p-4.d-flex.flex-column.justify-content-between {
    border: 2px solid #000;
} */

.rounded-pill {
    border: 2px solid #000;
    padding: 10px 10px 10px 10px;
    border-radius: 15px!important;
}

.acf-form-submit {
    padding-top: 25px;
} 

input.acf-button.button.button-primary.button-large {
    background-color: #009ee3;
    color: #fff;
    width: 100%;
    border: none;
    padding: 10px 10px;
    border-radius: 10px;
}

.text-center.h-100.p-4.card-hover {
	border: 1px solid #dcdcdc;
	border-radius: 15px;
}

.text-center.h-100.p-4.card-hover:hover {
    background-color: #00aeef42;
}

/*Datatable css*/

/* Table Styling */
table.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  background-color: #fff; /* Bootstrap Primary */
  color: black;
  vertical-align: middle;
  text-align: center;
}

.card-header.bg-success h4,
.card-header.bg-primary h4 {
  font-weight: 600;
  font-size: 1.25rem;
}

.table tbody td {
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Alternate header color for Suppliers table */
.card-header.bg-success {
  background-color: #28a745 !important;
}

/* Responsive tweaks */
@media screen and (max-width: 768px) {
	.hero-section h1 {
        font-size: 2.5rem; /* Adjust this value as needed for mobile */
        line-height: 1.1; /* Slightly tighter line height might also help on mobile */
    }
	
    .logo-desktop {
      display: none;
    }

    .logo-mobile {
      display: block;
		height: 100px;
    }
  .table thead {
    display: none;
  }

  .table, .table tbody, .table tr, .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
  }

  .table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

/* Optional: Match DataTables UI to Bootstrap 5 */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 5px 10px;
  margin-left: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 10px;
  border-radius: 4px;
  margin: 2px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #007bff;
  color: white !important;
  border-color: #007bff;
}

.dataTables_wrapper .dataTables_info {
  padding-top: 10px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 10px;
}





/* to fix the pdf documents listed on Statutes and Regulations page */
.acf-content p:has(a[href$=".pdf"]) { /* Targets only paragraphs containing a PDF link */
    display: inline-block; /* Allows them to sit side-by-side */
    vertical-align: top;   /* Aligns them at the top if heights vary slightly */
    margin-right: 20px;    /* Add some spacing between them */
    margin-bottom: 20px;   /* Keep some vertical spacing if they wrap */
	
}

/* Or, if you want more control with flexbox for individual items */
.acf-content p:has(a[href$=".pdf"]) {
    display: inline-flex; /* Use inline-flex for better alignment control */
    flex-direction: column; /* Ensure content inside aligns vertically */
    align-items: center; /* Center the image/link within its own paragraph */
    text-align: center; /* For any text that might be directly in the paragraph */
    margin-right: 20px;
    margin-bottom: 20px;
}

/* Ensure the image and link don't cause extra spacing */
.acf-content p a,
.acf-content p img {
    display: block; /* Make the link and image block elements within the flex/inline-block p tag */
    margin-bottom: 10px; /* Add space below the image if you have text below it */
}














 @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
      .mrl {
     margin-right: 0px; 
     margin-left: 0px; 
}
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }