/**
 * Hawaii Magazine - Customizer-Ready Stylesheet
 * Version: 2.0.0
 * Description: Uses CSS variables controllable via WordPress Customizer
 */

/* ==========================================================================
   CSS Custom Properties (Variables) - Controlled by WP Customizer
   ========================================================================== */

:root {
    /* Brand Colors - Set via Customizer */
    --hm-primary-color: #00c7e6;      /* Hawaii Magazine Cyan */
    --hm-secondary-color: #004a80;    /* Deep Blue */
    --hm-accent-color: #85d567;       /* Green accent */
    --hm-alert-color: #00c7e6;        /* Alert blue */
    
    /* Text Colors */
    --hm-text-color: #333333;
    --hm-heading-color: #000000;
    --hm-link-color: #004a80;
    --hm-link-hover: #a9a9a9;
    --hm-meta-color: #666666;
    
    /* Background Colors */
    --hm-body-bg: #ffffff;
    --hm-header-bg: #ffffff;
    --hm-footer-bg: #222222;
    --hm-alt-bg: #f7f7f7;
    
    /* Border Colors */
    --hm-border-light: #e5e5e5;
    --hm-border-medium: #dcdcdc;
    --hm-border-dark: #cccccc;
    
    /* Typography - Set via Customizer */
    --hm-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --hm-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --hm-font-mono: 'Courier New', Courier, monospace;
    
    /* Font Sizes */
    --hm-font-size-base: 16px;
    --hm-font-size-small: 14px;
    --hm-font-size-large: 18px;
    --hm-font-size-h1: 36px;
    --hm-font-size-h2: 28px;
    --hm-font-size-h3: 24px;
    --hm-font-size-h4: 20px;
    
    /* Font Weights */
    --hm-font-weight-normal: 400;
    --hm-font-weight-medium: 500;
    --hm-font-weight-semibold: 600;
    --hm-font-weight-bold: 700;
    
    /* Line Heights */
    --hm-line-height-base: 1.6;
    --hm-line-height-heading: 1.3;
    --hm-line-height-tight: 1.2;
    
    /* Spacing */
    --hm-spacing-xs: 5px;
    --hm-spacing-sm: 10px;
    --hm-spacing-md: 15px;
    --hm-spacing-lg: 20px;
    --hm-spacing-xl: 30px;
    --hm-spacing-xxl: 40px;
    
    /* Layout */
    --hm-container-width: 1200px;
    --hm-grid-gap: 20px;
    --hm-sidebar-width: 300px;
    
    /* Border Radius */
    --hm-radius-small: 3px;
    --hm-radius-medium: 6px;
    --hm-radius-large: 10px;
    
    /* Shadows */
    --hm-shadow-small: 0 2px 4px rgba(0,0,0,0.1);
    --hm-shadow-medium: 0 4px 8px rgba(0,0,0,0.1);
    --hm-shadow-large: 0 8px 16px rgba(0,0,0,0.15);
}

/* ==========================================================================
   Base Styles Using CSS Variables
   ========================================================================== */

/* Global 
body {
    font-family: var(--hm-font-primary);
    font-size: var(--hm-font-size-base);
    line-height: var(--hm-line-height-base);
    color: var(--hm-text-color);
    background-color: var(--hm-body-bg);
}*/

/* Headings 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--hm-font-heading);
    font-weight: var(--hm-font-weight-bold);
    line-height: var(--hm-line-height-heading);
    color: var(--hm-heading-color);
    margin-bottom: var(--hm-spacing-md);
}

h1 { font-size: var(--hm-font-size-h1); }
h2 { font-size: var(--hm-font-size-h2); }
h3 { font-size: var(--hm-font-size-h3); }
h4 { font-size: var(--hm-font-size-h4); }*/

/* Links 
a {
    color: var(--hm-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* ==========================================================================
   Header Styles
   ========================================================================== 

.header,
header {
    /*background-color: var(--hm-header-bg);*/
    /*border-bottom: 1px solid var(--hm-border-light);*/
}

/* Navigation 
nav.primary .nav li a {
    font-size: var(--hm-font-size-base);
    font-weight: var(--hm-font-weight-bold);
    color: var(--hm-heading-color);
    padding: var(--hm-spacing-sm) var(--hm-spacing-md);
    border-top: 5px solid transparent;
    transition: all 0.3s ease;
}

nav.primary .nav li a:hover {
    color: var(--hm-link-hover);
    border-top-color: var(--hm-primary-color);
}

nav.secondary .nav li a {
    font-size: var(--hm-font-size-small);
    font-weight: var(--hm-font-weight-semibold);
    color: var(--hm-text-color);
    padding: var(--hm-spacing-xs) var(--hm-spacing-sm);
    border-right: 1px solid var(--hm-border-light);
}*/

/* ==========================================================================
   Content Lists & Grid System
   ========================================================================== */


.content-list-wrapper {
    margin: var(--hm-spacing-xl) 0;
}

/* List Layout */
.content-list-wrapper:not(.style-grid) .list-item {
    display: flex;
    gap: var(--hm-grid-gap);
    padding-bottom: var(--hm-spacing-lg);
    margin-bottom: var(--hm-spacing-lg);
    border-bottom: 1px solid var(--hm-border-light);
}

/* Grid Layout */
.content-list-wrapper.style-grid {
    /*display: grid;
    gap: var(--hm-grid-gap);*/
	display:flex;
	flex-wrap:wrap;
	gap:inherit; /* Inherit from parent WPBakery container */
}

/*.col-span-2 { grid-template-columns: repeat(2, 1fr); }
.col-span-3 { grid-template-columns: repeat(3, 1fr); }
.col-span-4 { grid-template-columns: repeat(4, 1fr); }*/

/* Grid Items */
.grid-item,
.content-list-wrapper.style-grid .list-item {
    background: var(--hm-body-bg);
    border: 1px solid var(--hm-border-medium);
    border-radius: var(--hm-radius-small);
    padding: var(--hm-spacing-sm);
    transition: box-shadow 0.3s ease;
}

.grid-item:hover {
    box-shadow: var(--hm-shadow-medium);
}

/* Titles */
.list-item-title,
.listing-title,
.entry-title {
    font-size: var(--hm-font-size-h3);
    font-weight: var(--hm-font-weight-bold);
    line-height: var(--hm-line-height-heading);
    margin-bottom: var(--hm-spacing-sm);
}

.list-item-title a,
.entry-title a {
    color: var(--hm-heading-color);
}

.list-item-title a:hover,
.entry-title a:hover {
    color: var(--hm-primary-color);
}

/* Meta Information */
.list-item-category,
.entry-meta,
.cat-links {
    font-size: var(--hm-font-size-small);
    font-weight: var(--hm-font-weight-semibold);
    text-transform: uppercase;
    color: var(--hm-primary-color);
    margin-bottom: var(--hm-spacing-xs);
}

/* Excerpts */
.list-item-excerpt,
.entry-excerpt {
    font-size: var(--hm-font-size-base);
    line-height: var(--hm-line-height-base);
    color: var(--hm-text-color);
}

/* ==========================================================================
   Directory Listings
   ========================================================================== */

.directory-wrapper {
    max-width: var(--hm-container-width);
    margin: 0 auto;
    padding: var(--hm-spacing-lg);
}

.listing-item {
    display: flex;
    gap: var(--hm-spacing-md);
    padding: var(--hm-spacing-lg) 0;
    border-bottom: 1px solid var(--hm-border-light);
    transition: background-color 0.2s;
}

.listing-item:hover {
    background-color: var(--hm-alt-bg);
}

/* Directory Badges */
.badge-gold {
    background: #ffd700;
    color: var(--hm-heading-color);
}

.badge-silver {
    background: #e8e8e8;
    color: var(--hm-heading-color);
    border: 1px solid #c0c0c0;
}

.badge-bronze {
    background: #cd7f32;
    color: white;
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== 

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    font-family: var(--hm-font-primary);
    font-size: var(--hm-font-size-base);
    padding: var(--hm-spacing-sm);
    border: 1px solid var(--hm-border-medium);
    border-radius: var(--hm-radius-small);
    background: var(--hm-body-bg);
    color: var(--hm-text-color);
    transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--hm-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 199, 230, 0.1);
}*/

/* Buttons 
button,
.button,
.btn,
input[type="submit"] {
    font-family: var(--hm-font-primary);
    font-size: var(--hm-font-size-base);
    font-weight: var(--hm-font-weight-semibold);
    padding: var(--hm-spacing-sm) var(--hm-spacing-lg);
    background: var(--hm-primary-color);
    color: white;
    border: none;
    border-radius: var(--hm-radius-small);
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover,
.button:hover {
    background: var(--hm-secondary-color);
}*/

/* ==========================================================================
   Footer
   ==========================================================================
/
footer {
    /*background: var(--hm-footer-bg);
    color: white;
    padding: var(--hm-spacing-xl) 0;
}

footer a {
    color: var(--hm-primary-color);
}

footer a:hover {
    color: white;
}*/

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text Colors 
.text-primary { color: var(--hm-primary-color) !important; }
.text-secondary { color: var(--hm-secondary-color) !important; }
.text-muted { color: var(--hm-meta-color) !important; }*/

/* Background Colors 
.bg-primary { background-color: var(--hm-primary-color) !important; }
.bg-secondary { background-color: var(--hm-secondary-color) !important; }
.bg-light { background-color: var(--hm-alt-bg) !important; }*/

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--hm-spacing-sm) !important; }
.mt-2 { margin-top: var(--hm-spacing-md) !important; }
.mt-3 { margin-top: var(--hm-spacing-lg) !important; }
.mt-4 { margin-top: var(--hm-spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--hm-spacing-sm) !important; }
.mb-2 { margin-bottom: var(--hm-spacing-md) !important; }
.mb-3 { margin-bottom: var(--hm-spacing-lg) !important; }
.mb-4 { margin-bottom: var(--hm-spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--hm-spacing-sm) !important; }
.p-2 { padding: var(--hm-spacing-md) !important; }
.p-3 { padding: var(--hm-spacing-lg) !important; }
.p-4 { padding: var(--hm-spacing-xl) !important; }

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 1200px) {
    :root {
        --hm-container-width: 100%;
        --hm-grid-gap: 15px;
    }
    
    .col-span-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    :root {
        --hm-font-size-base: 15px;
        --hm-font-size-h1: 28px;
        --hm-font-size-h2: 24px;
        --hm-font-size-h3: 20px;
        --hm-spacing-lg: 15px;
        --hm-spacing-xl: 20px;
    }
    
    .col-span-3,
    .col-span-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content-list-wrapper:not(.style-grid) .list-item {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --hm-font-size-base: 14px;
        --hm-font-size-h1: 24px;
        --hm-font-size-h2: 20px;
        --hm-font-size-h3: 18px;
        --hm-grid-gap: 10px;
    }
    
    .col-span-2,
    .col-span-3,
    .col-span-4 {
        grid-template-columns: 1fr;
    }
}