/**
 * Trek Navigators Plugin Styles
 */

/* ----------------------------------------
   1. CSS VARIABLES (CUSTOM PROPERTIES)
   ---------------------------------------- */
:root {
    /* Base image sizes */
    --trek-navigators-archive-image-size: 330px;
    --trek-navigators-shortcode-image-size: 250px;

    /* Spacing values */
    --trek-navigators-spacing-small: 10px;
    --trek-navigators-spacing-medium: 20px;
    --trek-navigators-spacing-large: 40px;

    /* Colors */
    --trek-navigators-primary-color: #2c6c3e;
    --trek-navigators-secondary-color: #f98e2b;
    --trek-navigators-text-color: #444;
    --trek-navigators-bg-color: #fff;
    --trek-navigators-header-bg: rgb(0, 44, 92);
}

/* ----------------------------------------
   1. MAIN CONTAINERS
   ---------------------------------------- */
.trek-navigators-single {
    color: var(--trek-navigators-text-color);
    font-family: Roboto, sans-serif;
}

.trek-navigators-single p,
.trek-navigators-single li,
.trek-navigators-single div {
    color: #7c7c7c;
}

.trek-navigators-article {
    margin-bottom: var(--trek-navigators-spacing-large);
}

.trek-navigators-single .container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

/* ----------------------------------------
   2. HEADER SECTION
   ---------------------------------------- */
.trek-navigators-section-wrapper.trek-navigators-navigator-header {
    background-color: var(--trek-navigators-header-bg);
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* Breadcrumb styling */
.trek-navigators-navigator-header span,
.trek-navigators-navigator-header span a,
.trek-navigators-navigator-header span.breadcrumb_last,
.trek-navigators-navigator-header .trek-navigators-breadcrumb-divider {
    color: white !important;
}

/* ----------------------------------------
   3. HEADER IMAGE
   ---------------------------------------- */
.trek-navigators-header-image-wrapper {
    margin-bottom: var(--trek-navigators-spacing-medium);
    text-align: center;
}

.trek-navigators-header-image {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   4. START DATE
   ---------------------------------------- */
.trek-navigators-start-date-wrapper {
    margin-bottom: var(--trek-navigators-spacing-medium);
    font-weight: 600;
    font-size: 18px;
    color: var(--trek-navigators-primary-color);
}

.trek-navigators-start-date {
    display: inline-block;
}

/* ----------------------------------------
   5. MAIN CONTENT
   ---------------------------------------- */
.trek-navigators-main-content {
    margin-bottom: var(--trek-navigators-spacing-large);
    line-height: 1.6;
}

.trek-navigators-main-content p {
    margin-bottom: 1.2em;
}

/* ----------------------------------------
   6. TWO COLUMN LAYOUT
   ---------------------------------------- */
.trek-navigators-two-column-layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.trek-navigators-column {
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.trek-navigators-column-left {
    flex: 0 0 66.666%;
    max-width: 66.666%;
}

.trek-navigators-column-right {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

/* Ensure images in right column are properly sized */
.trek-navigators-column-right img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   7. VIDEO SECTION
   ---------------------------------------- */
.trek-navigators-video-wrapper {
    margin-bottom: var(--trek-navigators-spacing-large);
}

.trek-navigators-video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.trek-navigators-video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------
   8. CONTENT SECTIONS
   ---------------------------------------- */
.trek-navigators-content-section {
    margin-bottom: var(--trek-navigators-spacing-large);
}

.trek-navigators-section-title {
    margin-bottom: 15px;
	margin-top: 30px;
    font-weight: 700;
    color: #007d89;
    font-size: 25px;
	line-height: 31px;
}

.trek-navigators-section-content {
    line-height: 1.6;
    color: var(--trek-navigators-text-color);
    font-size: 16px;
}

.trek-navigators-section-content p {
    margin-bottom: 1.2em;
}

.trek-navigators-section-content ul,
.trek-navigators-section-content ol {
    margin-left: 2rem;
    margin-bottom: 1.8rem;
    padding-left: 0;
}

.trek-navigators-section-content li {
    margin-bottom: 0.8em;
    padding-left: 0.3em;
    line-height: 1.6;
}

.trek-navigators-section-content a {
    color: var(--trek-navigators-secondary-color);
    text-decoration: underline;
}

.trek-navigators-section-content a:hover {
    text-decoration: none;
}

/* ----------------------------------------
   9. RIGHT COLUMN - BADGES
   ---------------------------------------- */
.trek-navigators-badges-wrapper {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-badges-image {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   10. RIGHT COLUMN - DIGITAL BADGES
   ---------------------------------------- */
.trek-navigators-digital-badges-wrapper {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-digital-badges-button {
    display: inline;
    padding: .375rem .75rem;
    background-color: #f98e2b; /* Orange button */
    border: 1px solid transparent;
    color: #fff;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none !important;
}

.trek-navigators-digital-badges-button:hover {
    background-color: rgba(255, 255, 255, 0.64); /* Semi-transparent white background on hover */
    color: #f98e2b; /* Orange text on hover */
    border: 1px solid #f98e2b; /* 1px orange border */
    text-decoration: none !important;
}

/* ----------------------------------------
   11. RIGHT COLUMN - MORE ABOUT
   ---------------------------------------- */
.trek-navigators-more-about-wrapper {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-more-about-image {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   12. RIGHT COLUMN - LEARN MORE TREK
   ---------------------------------------- */
.trek-navigators-learn-more-trek-wrapper {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-learn-more-trek-link {
    display: block;
}

.trek-navigators-learn-more-trek-image {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------
   13. ARCHIVE GRID STYLING
   ---------------------------------------- */
.trek-navigators-grid-container {
    margin-bottom: var(--trek-navigators-spacing-large);
}

.trek-navigators-grid {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--trek-navigators-spacing-small));
}

.trek-navigators-grid-item {
    box-sizing: border-box;
    padding: var(--trek-navigators-spacing-small);
}

/* Default archive grid (3 columns) */
.trek-navigators-archive .trek-navigators-grid-item {
    width: 33.333%;
}

.trek-navigators-grid-image-wrapper {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.trek-navigators-grid-image-wrapper:hover {
    transform: translateY(-5px);
}

.trek-navigators-grid-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Size control for archive images */
.trek-navigators-archive .trek-navigators-grid-image {
    width: var(--trek-navigators-archive-image-size);
    height: var(--trek-navigators-archive-image-size);
    object-fit: cover;
}

/* For when no image is available */
.trek-navigators-no-image {
    background-color: #e9e9e9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trek-navigators-archive .trek-navigators-no-image {
    width: var(--trek-navigators-archive-image-size);
    height: var(--trek-navigators-archive-image-size);
}

.trek-navigators-placeholder {
    text-align: center;
    padding: 15px;
    color: #777;
    font-weight: bold;
}

/* No results message */
.trek-navigators-none {
    padding: 20px;
    text-align: center;
    width: 100%;
    font-style: italic;
    color: #666;
}

/* ----------------------------------------
   13-A. ROW LAYOUT SHORTCODE STYLING
   ---------------------------------------- */
.trek-navigators-row-layout .trek-navigators-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: -10px;
    width: 100%;
}

.trek-navigators-row-layout .trek-navigators-grid-item {
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    flex: 0 0 25%;
}



/* ----------------------------------------
   14. SINGLE PAGE TITLE STYLING
   ---------------------------------------- */
.trek-navigators-single-title {
    color: var(--trek-navigators-primary-color);
    margin-bottom: var(--trek-navigators-spacing-medium);
    font-size: 32px;
    line-height: 1.2;
}

.trek-navigators-single-meta {
    margin-bottom: var(--trek-navigators-spacing-medium);
}

.trek-navigators-single-date {
    color: var(--trek-navigators-primary-color);
    font-weight: 600;
}

.trek-navigators-single-image {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-single-image img {
    max-width: 100%;
    height: auto;
}

.trek-navigators-single-content {
    margin-bottom: var(--trek-navigators-spacing-large);
    line-height: 1.6;
}

.trek-navigators-single-sections {
    margin-bottom: var(--trek-navigators-spacing-large);
}

.trek-navigators-single-section {
    margin-bottom: var(--trek-navigators-spacing-medium);
}

.trek-navigators-more-about h3 {
    color: var(--trek-navigators-primary-color);
    margin-bottom: var(--trek-navigators-spacing-small);
}

.trek-navigators-single-badges-link {
    margin-bottom: var(--trek-navigators-spacing-large);
    text-align: center;
}

.trek-navigators-single-badges-link a {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--trek-navigators-secondary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.trek-navigators-single-badges-link a:hover {
    background-color: darken(var(--trek-navigators-secondary-color), 10%);
}

/* ----------------------------------------
   14. BOTTOM NAVIGATION SECTION
   ---------------------------------------- */
.trek-navigators-bottom-divider {
    background-color: #f98e2b;
    height: 29px; /* 25px + 15% */
    margin-top: 1.15rem; /* 1rem + 15% */
    margin-bottom: 1.15rem; /* 1rem + 15% */
}

.trek-navigators-more-links-wrapper {
    text-align: center;
    margin-bottom: 1.15rem; /* 1rem + 15% */
}

.trek-navigators-more-text {
    color: #f98e2b; /* Same color as the divider */
    font-weight: 700;
    font-size: 25px;
    margin-right: 10px;
    display: inline-block;
}