/*
Theme Name:	  KCHC Custom Theme
Theme URI:	  https://www.kodiakchc.org/
Author:		  Chris Trujillo
Author URI:	  https://www.kodiakchc.org/
Description:  A custom, lightweight theme built for the Kodiak Community Health Center.
Version:	  1.0.1
License:	  GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kchc-custom
Tags:		  tailwind, responsive-layout, custom-theme
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Layout
4.0 Links & Buttons
5.0 WordPress Core
6.0 Custom Components
	6.1 Site Header
	6.2 Top Bar
	6.3 Page Header
	6.4 Footer
    6.5 Providers Page
    6.6 Payment Programs Page
    6.7 Services Page
    6.8 Document Lists
    6.9 Awards Section
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body {
  font-family: 'PT Sans', sans-serif; /* Assumes PT Sans is loaded */
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif; /* Assumes Space Grotesk is loaded */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #1a202c;
}

.entry-content p {
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
3.0 Layout
--------------------------------------------------------------*/
.container {
  max-width: 1200px; /* Standard container width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/*--------------------------------------------------------------
4.0 Links & Buttons
--------------------------------------------------------------*/
a {
  color: #1186b0; /* Your primary blue */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  text-decoration: underline;
}

/*--------------------------------------------------------------
5.0 WordPress Core
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* WordPress Image Alignment Classes */
.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*--------------------------------------------------------------
6.0 Custom Components
--------------------------------------------------------------*/

/*--------------------------------------------------------------
6.1 Site Header
--------------------------------------------------------------*/
.kchc-site-header {
  background-color: #fff;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.kchc-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.kchc-header-logo img {
  height: 60px;
  max-width: none;
}

/* --- Desktop Navigation --- */
.kchc-nav-desktop ul {
  display: flex;
  align-items: center; 
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

.kchc-nav-desktop li {
    position: relative; /* Needed for dropdown positioning */
}

.kchc-nav-desktop a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: color 0.2s ease;
}

.kchc-nav-desktop a:hover {
  color: #1186b0; /* Your primary blue color */
}

/* Desktop Dropdown Styles */
.kchc-nav-desktop .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 0.5rem;
    min-width: 200px;
    z-index: 100;
    border-radius: 0 0 4px 4px;
}

.kchc-nav-desktop li:hover > .sub-menu {
    display: block;
}

.kchc-nav-desktop .sub-menu li {
    width: 100%;
}

.kchc-nav-desktop .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.kchc-nav-desktop .sub-menu a:hover {
    background-color: #f4f4f4;
}

/* --- Donate Button Styles --- */
.kchc-nav-desktop .kchc-nav-button a,
.kchc-nav-desktop .kchc-nav-button button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #1186b0;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.kchc-nav-desktop .kchc-nav-button a:hover {
    background-color: #0e6a8e;
    color: #fff;
    text-decoration: none;
}

.kchc-nav-desktop .kchc-nav-button button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.kchc-nav-button-icon {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    stroke-width: 2.5; /* Makes the icon a bit bolder */
}

@media (max-width: 991px) {
  .kchc-nav-desktop {
    display: none; /* Hide desktop navigation on smaller screens */
  }

  .kchc-mobile-menu-button {
    display: block; /* Show mobile hamburger button on smaller screens */
  }
}

/* --- Mobile Menu Styles (Default Hidden) --- */
.kchc-mobile-menu-button {
  display: none; /* THIS IS THE DEFAULT: HIDDEN ON DESKTOP */
  background: none;
  border: none;
  cursor: pointer;
}

/* --- Responsive Header Adjustments --- */
@media (max-width: 991px) {
  .kchc-nav-desktop {
    display: none; /* Hide desktop navigation on smaller screens */
  }

  .kchc-mobile-menu-button {
    display: block; /* THIS OVERRIDES THE DEFAULT on smaller screens */
  }
}

.kchc-mobile-menu-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #333;
}

.kchc-mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -100%; /* Start off-screen */
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  padding: 2rem;
  overflow-y: auto; /* Allow scrolling for long menus */
}

/* ... the rest of your mobile menu CSS continues here ... */

.kchc-mobile-menu-panel.is-open {
  right: 0; /* Slide in when open */
}

.kchc-mobile-menu-panel nav ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.kchc-mobile-menu-panel li {
  margin-bottom: 1.5rem;
  position: relative;
}

.kchc-mobile-menu-panel a {
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  font-weight: bold;
}

.kchc-submenu-toggle {
    background: none;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    padding: 0.25rem;
}

.kchc-mobile-menu-panel .sub-menu {
    display: none; /* Hidden by default */
    padding-left: 1rem;
    margin-top: 1rem;
}

.kchc-mobile-menu-panel .sub-menu.is-open {
    display: block; /* Show when toggled */
}

.kchc-mobile-menu-panel .sub-menu a {
    font-size: 1rem;
    font-weight: normal;
}


/* Styles for the new contact info in the mobile menu */
.kchc-mobile-menu-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.kchc-mobile-menu-contact a {
    font-size: 1rem;
    font-weight: normal;
    color: #555;
}

/*--------------------------------------------------------------
6.2 Top Bar
--------------------------------------------------------------*/
.kchc-top-bar {
    background-color: #f8f9fa; 
    padding: 0.75rem 1rem;
    font-size: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    z-index: 40; /* Below header sticky z-index */
}

.kchc-top-bar .kchc-header-container {
    justify-content: center; 
    gap: 1.5rem; 
    flex-wrap: wrap;
}

.kchc-top-bar a,
.kchc-top-bar span {
    color: #374151; /* Darker gray for better contrast */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-weight: 600; /* Bolder text */
}

.kchc-top-bar b {
    margin-right: 0.3em;
}

.kchc-top-bar .icon-phone {
    margin-right: 0.3em;
}

.kchc-top-bar-divider {
    color: #ccc;
}

/*--------------------------------------------------------------
6.3 Page Header
--------------------------------------------------------------*/
.kchc-page-header {
	background-color: #1186b0; /* Your primary blue */
	background-image: linear-gradient(to bottom right, #1186b0, #60a5fa); /* Gradient */
	padding: 4rem 1rem;
	color: #fff;
	text-align: center;
}

.kchc-page-header .entry-title {
	color: #fff;
	margin-bottom: 0;
	font-size: 2.25rem; /* Corresponds to text-4xl */
	font-weight: 700;
	letter-spacing: -0.025em; /* Corresponds to tracking-tight */
}

/* Center the container content within the page header */
.kchc-page-header .kchc-header-container {
    justify-content: center;
}

/* Responsive adjustments for larger screens */
@media (min-width: 640px) {
	.kchc-page-header .entry-title {
		font-size: 3rem; /* Corresponds to sm:text-5xl */
		line-height: 1;
	}
}

@media (min-width: 768px) {
	.kchc-page-header .entry-title {
		font-size: 3.75rem; /* Corresponds to md:text-6xl */
	}
}

/*--------------------------------------------------------------
6.4 Footer
--------------------------------------------------------------*/
.site-footer {
	background-color: #1186b0; /* Changed to primary blue */
	color: #fff;
	padding: 2rem 1rem;
}

.site-footer .container {
    max-width: 1400px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 992px) { /* Adjusted breakpoint for 5 columns */
    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
        text-align: left;
    }
}

.footer-grid h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* semibold */
    color: #fff;
}

.footer-grid p, .footer-grid a {
    color: #fff; /* Changed to white for better contrast */
    font-size: 0.9rem;
}

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

.footer-grid ul {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-connect-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .footer-connect-icons {
        justify-content: flex-start;
    }
}

.footer-buttons {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .footer-buttons {
        flex-direction: row;
    }
}

.footer-copyright {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border */
    text-align: center;
    color: #e5e7eb; /* Lighter gray for copyright */
}


/*--------------------------------------------------------------
6.5 Providers Page
--------------------------------------------------------------*/
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.provider-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.provider-photo {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.provider-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.provider-name {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    margin-bottom: 0.25rem;
}

.provider-title {
    color: #6b7280; /* text-muted-foreground */
    margin-bottom: 1rem;
    font-size: 1.125rem;
    flex-grow: 1; /* Pushes details to the bottom */
}

.provider-details {
    font-size: 0.9rem;
    color: #4b5563;
}

.provider-details p {
    margin-bottom: 0.5rem;
}


/*--------------------------------------------------------------
6.6 Payment Programs Page
--------------------------------------------------------------*/
.payment-programs-list {
    display: grid;
    grid-template-columns: 1fr;
    list-style-type: none;
    padding-left: 0;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .payment-programs-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 2rem;
    }
}

.payment-programs-list li {
    position: relative;
    padding-left: 1.75rem; /* space for the icon */
    line-height: 1.5;
}

.payment-programs-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: #22c55e; /* green-500 */
    font-weight: bold;
}

.sfdp-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.sfdp-table th, .sfdp-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.sfdp-table thead th {
    font-weight: bold;
    color: #6b7280;
}

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

/*--------------------------------------------------------------
6.7 Services Page
--------------------------------------------------------------*/
.services-intro .intro-text {
    font-size: 1.25rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    color: #4b5563;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 2rem;
}

.service-title {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #1186b0;
}

.service-list, .service-sublist {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-list > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.service-list > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231186b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.service-sublist {
    margin-top: 0.75rem;
    padding-left: 1rem;
}

.service-sublist li {
    margin-bottom: 0.5rem;
    list-style-type: '– '; /* Em-dash bullet */
    padding-left: 0.5rem;
}

/*--------------------------------------------------------------
6.8 Document Lists
--------------------------------------------------------------*/
.document-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.document-list li {
    border-bottom: 1px solid #e5e7eb;
}

.document-list li:last-child {
    border-bottom: none;
}

.document-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.document-list a:hover .document-list-title {
    color: #1186b0;
}

.document-list-icon svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

/*--------------------------------------------------------------
6.9 Awards & Gallery Sections
--------------------------------------------------------------*/

/* Scoped container for all awards and gallery content */
.kchc-homepage-sections {}

/* Main container for the awards grid */
.kchc-awards-section .awards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This centers the cards, including the last row */
    gap: 2rem;
    align-items: stretch;
    margin-top: 3rem;
}

@media (min-width: 992px) {
    .kchc-awards-section .awards-grid {
        grid-template-columns: repeat(5, 1fr); /* 5 columns on desktop */
    }
}

.kchc-awards-section .award-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;

    /* Define card width for the 2-column mobile layout */
    flex-basis: calc(50% - 1rem); 
}

/* Use a media query to change the card width for the 5-column desktop layout */
@media (min-width: 992px) {
    .kchc-awards-section .award-card {
        /* Define card width for the 5-column desktop layout */
        flex-basis: calc(20% - 1.6rem);
    }
}

/* Container for the award image, grows to fill space */
.kchc-awards-section .award-image-container {
    display: flex;
    align-items: center; 
    justify-content: center;
    margin-bottom: 1rem;
    flex-grow: 1; 
    min-height: 150px;
}

.kchc-awards-section .award-image-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Caption container to handle alignment */
.kchc-awards-section .award-caption-container {
    height: 50%; /* Takes up bottom half of the card */
    display: flex;
    align-items: flex-start; /* Aligns text to the top of this container */
    justify-content: center;
}

.kchc-awards-section .award-caption {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 0;
}


/* Gallery Section for Clinic and Island Images */
.kchc-gallery-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 4rem;
}

@media (min-width: 768px) {
    .kchc-gallery-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kchc-gallery-section .gallery-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.kchc-gallery-section .gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .kchc-gallery-section .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kchc-gallery-section .gallery-grid img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media (max-width: 767px) {
  .fl-row-content-wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}