/*
Theme Name: Area Tourism Office
Author: George Akaeze
Description: A fully custom hand-coded classic WordPress theme built for the Comox Tourism Office as part of DGL233 Project 3. 
             Features two custom post types (Activity and Accommodation) with their own taxonomies, Advanced Custom Fields integration for featured listings on the homepage and archive pages, dynamic loops, custom template hierarchy, and clean semantic HTML. 
             Includes a responsive-ready hero section with background images on archive pages, professional two-column single post layouts, next/previous post navigation, hover effects, and a modern coastal color palette. 
             Designed to closely follow the provided wireframes while maintaining excellent code organization and WordPress best practices.
Version: 1.0
Tags: tourism, custom-post-type, activities, accommodations, acf, two-columns, custom-menu, threaded-comments, featured-images, clean-design
*/

/* ================ RESET & BASE ================ */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #1F2A44;
}

/* ================ HEADER ================ */
header {
    background: #13293D;
    color: white;
    padding: 1rem 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.main-menu a {
    color: white;
    text-decoration: none;
}

/* ================ HERO & GENERAL SECTIONS ================ */
.hero, .page-hero {
    background: #F8F9FA;
    padding: 4rem 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

h1, h2 {
    margin: 0 0 1rem;
}

/* ================ CARDS (Featured & Archive) ================ */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.card {
    background: white;
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #eee;
    border-radius: 4px;
}

.card h3 {
    margin: 1rem 0 0.5rem;
}

/* ================ SINGLE PAGES ================ */
.single-hero {
    padding-top: 3rem;
    text-align: left;
    padding-bottom: 0;
}
.single-hero h1 {
    text-align: left;
}
.single-hero p {
    text-align: left;
}
.left-column {
    width: 40%;
}

.single-content .container {
    display: flex;
    gap: 3rem;
    padding: 3rem 20px;
    text-align: left;
    padding-top: 0;
}

.left-column { flex: 2; }
.right-column { flex: 2; }

/* ================ FOOTER ================ */
footer {
    background: #13293D;
    color: #ccc;
    padding: 2rem 0 2rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    text-align: left;
}
.footer-content p {
    text-align: left;
}
.footer-content h2 {
    text-align: left;
}
.footer-column {
    padding: 1.2rem;
    padding-top: 0;
}
.footer-column a {
    padding-right: 0.5rem;
    color: white;
}

.social-icons a {
    color: #ccc;
    font-size: 1.8rem;
    margin-right: 1rem;
}

/* ================ UTILITY ================ */
.btn {
    display: inline-block;
    background: #00B8A9;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.btn:hover {
    background: #00938A;
}

/* ==================== HOMEPAGE SPECIFIC STYLES ==================== */

/* Hero */
.hero {
    background: #13293D;
    color: white;
    padding: 120px 20px 80px;
    text-align: center;
    background-image: linear-gradient(rgba(19,41,61,0.6), rgba(19,41,61,0.6)), url('<?php echo get_template_directory_uri(); ?>/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 1rem;
}

.hero-excerpt {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Featured sections */
.featured-activities, .featured-accommodations {
    
    padding: 80px 20px;
    background: #F8F9FA;
    padding-top: 0;
}

.featured-activities h2, .featured-accommodations h2 {
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    color: #555;
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

.card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card h3 {
    padding: 1rem 1.5rem 0;
    margin: 0;
}

.card .category {
    padding: 0 1.5rem;
    color: #666;
    font-size: 0.95rem;
}

.card p {
    padding: 0 1.5rem 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    margin: 20px auto;
}

.btn-primary, .btn-black {
    background: #00B8A9;
    color: white;
}

.btn-black { background: #00938A; }

.btn-outline {
    border: 2px solid #00B8A9;
    color: #00B8A9;
}

/* ==================== LOGO FIX ==================== */
.logo {
    height: 60px;
    width: auto;
    max-width: 180px;
    display: block;
}


header .container {
    padding: 1rem 61px;
}

/* ==================== WEDDING CTA ==================== */
.wedding-cta {
    background: #F8F9FA;
    padding: 110px 20px;
    text-align: center;
    padding-top: 0;
}

.wedding-cta .btn {
    background: #00B8A9;
    color: white;
    padding: 16px 40px;
    font-size: 1.1rem;
}

.wedding-cta .btn:hover {
    background: #00938A;
}

/* ==================== FOOTER ==================== */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    
}

.footer-column h3 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.footer-column p {
    color: #ccc;
    line-height: 1.6;
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list a {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-bottom {
    background: #0F2538;
    padding: 1.5rem 0;
    color: #888;
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== HEADER - FINAL WIREFRAME MATCH ==================== */
.site-header {
    background: #13293D;
    padding: 20px 0;
    position: relative;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-right a {
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
}

.logo-box {
    position: absolute;
    text-decoration: none;
    color: white;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 50px;
    border-radius: 6px;
    font-weight: bolder;
    font-size: 20px;
}
.logo-box p{
   border-left: 2px solid white;
   border-right: 2px solid white;
   padding: 0 10px;
}

.logo {
    height: 58px;
    width: auto;
    display: block;
}

/* Navigation below header */
.main-nav {
    background: #13293D;
    border-top: 1px solid #444;
}

.main-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 0;
    padding: 20px 0;
    flex-wrap: wrap;
}

.main-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

/* ==================== HERO - image.png BACKGROUND ==================== */
.hero {
    background: linear-gradient(rgba(19,41,61,0.65), rgba(19,41,61,0.65)), 
                url('image.png');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 160px 20px 120px;
    text-align: center;
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 1rem;
}

.hero-excerpt {
    font-size: 1.3rem;
    max-width: 720px;
    margin: 0 auto 2rem;
}

/* ==================== ARCHIVE - ACTIVITIES (matches wireframe) ==================== */

/* Dark archive header */
.archive-header {
    background: linear-gradient(rgba(19,41,61,0.55), rgba(19,41,61,0.65)), 
                url('activities-hero-4.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 160px 20px 100px;
    text-align: center;
    margin-top: 0;    
    height: 60vh;
}

.archive-header h1 {
    font-size: 3.2rem;
    margin-bottom: 1rem;
}

.archive-header p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Featured Listings - black section */
.featured-listings {
    background: #F8F9FA;
    padding: 60px 20px;
}

.featured-listings h2 {
    text-align: center;
    margin-bottom: 2rem;
}

/* Filter section */
.filter-listings {
    background: #F8F9FA;
    padding: 40px 20px 20px;
}

.filter-listings h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #00B8A9;
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
    background: #00938A;
}

/* Main grid */
.listings-grid {
    padding: 60px 20px;
    background: #F8F9FA;
    padding-top: 0;
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

.card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card h3 {
    padding: 1.2rem 1.5rem 0.5rem;
    margin: 0;
}

.card .category {
    padding: 0 1.5rem;
    color: #666;
    font-size: 0.95rem;
}

.card p {
    padding: 0;
}

/* Black buttons - "View Listing" */
.btn-small,
a.btn-small {
    display: inline-block !important;
    background: #00B8A9 !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    margin: 1rem 1.5rem 1.5rem !important;
    transition: all 0.3s;
}

.btn-small:hover,
a.btn-small:hover {
    background: #00938A !important;
}

/* ==================== SINGLE PAGE - IMAGE LEFT + INFO RIGHT ==================== */

.single-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.single-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.single-details {
    line-height: 1.7;
}

.single-details h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.single-details p {
    margin-bottom: 0.8rem;
}

.single-description {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

/* ==================== ARCHIVE HERO IMAGES ==================== */

/* Things to Do (Activities Archive) */
.archive-header {
    background: linear-gradient(rgba(19,41,61,0.55), rgba(19,41,61,0.65)), 
                url('activities--hero.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 160px 20px 100px;
    text-align: center;
    margin-top: 0;
}

.hero-accommodation {
    background: linear-gradient(rgba(19,41,61,0.55), rgba(19,41,61,0.65)), 
                url('accommodations-hero.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 160px 20px 100px;
    text-align: center;
    margin-top: 0;
}
.hero {
    background: linear-gradient(rgba(19,41,61,0.55), rgba(19,41,61,0.65)), 
                url('hero.png');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 160px 20px 100px;
    text-align: center;
    margin-top: 0;
}
/* ==================== 404 PAGE - UNIQUE CLASSES (No conflicts) ==================== */
.error-hero {
    background: #F1F3F5;
    padding: 140px 20px 120px;
    text-align: center;
}

.error-title {
    font-size: 9rem;
    line-height: 1;
    margin: 0 0 1rem;
    color: #A5D6FF;
    font-weight: 900;
}

.error-subtitle {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    color: #13293D;
}

.error-message {
    font-size: 1.25rem;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    color: #555;
    line-height: 1.6;
}

/* Button styling for 404 */
.error-hero .btn {
    background: #00B8A9;
    color: white;
    padding: 16px 40px;
    font-size: 1.1rem;
}

.error-hero .btn:hover {
    background: #00938A;
}

/* ==================== POST NAVIGATION (Next / Previous) ==================== */
.post-navigation {
    background: #F1F3F5;
    padding: 40px 20px;
    border-top: 1px solid #ddd;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 20px;
}

.nav-previous a,
.nav-next a {
    color: #00B8A9;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}

.nav-previous a:hover,
.nav-next a:hover {
    color: #00938A;
}