/* Base Reset & Variables */
:root {
    --color-bg: #FAF7F2;
    /* Creamy Beige */
    --color-text: #4B3621;
    /* Dark Coffee Brown */
    --color-accent: #8e705b;
    /* Lighter Brown */
    --color-green: #355E3B;
    /* Hunter Green (Coffee Leaf) */
    --color-white: #FFFFFF;
    --font-main: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", serif;
    --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.8;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

/* Utility Classes */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-weight: bold;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-primary {
    background-color: var(--color-green);
    color: var(--color-white);
    border: 1px solid var(--color-green);
}

.btn-primary:hover {
    background-color: #26422b;
    transform: translateY(-2px);
}

h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-align: center;
    font-weight: normal;
    border-bottom: 1px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 10px;
}

.section-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(250, 247, 242, 0.95);
    border-bottom: 1px solid #e0ddd8;
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(75, 54, 33, 0.05);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: var(--color-text);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

nav a {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text);
}

/* Mobile Menu Toggle (Hidden on desktop) */
.menu-toggle {
    display: none;
}

/* Page Header (Common for subpages) */
.page-header {
    margin-top: 60px;
    /* Offset for fixed header */
    padding: 60px 0;
    text-align: center;
    background-color: #dccbb6;
    /* Default fallback */
}

.page-header h1 {
    font-size: 2.2rem;
    color: var(--color-text);
}

/* --- Page Specific Styles --- */

/* HOME: Hero Section */
#home {
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dccbb6;
    /* Fallback */
    /* Fallback for older browsers */
    background-image: linear-gradient(rgba(75, 54, 33, 0.3), rgba(75, 54, 33, 0.3)), url('../pics/Prompt_A_serene_lifestyle_photograph_of_a_pour-over_coffee_br_a132e1a0-199c-43aa-b1e9-a95080fa5e6a_1.png');
    /* Modern browsers */
    background-image: linear-gradient(rgba(75, 54, 33, 0.3), rgba(75, 54, 33, 0.3)), url('../pics/Prompt_A_serene_lifestyle_photograph_of_a_pour-over_coffee_br_a132e1a0-199c-43aa-b1e9-a95080fa5e6a_1.webp');
    background-size: cover;
    color: var(--color-white);
    text-align: center;
    margin-top: 60px;
    /* Offset for fixed header */
}

.hero-content {
    padding: 40px;
    background-color: rgba(75, 54, 33, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-family: var(--font-sans);
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.hero-cta-group .btn {
    margin-top: 0;
    padding: 13px 24px;
    font-size: 0.9rem;
}

/* HISTORY */
#history {
    background-color: var(--color-bg);
}

.history-text {
    max-width: 700px;
    margin: 0 auto;
    text-align: justify;
}

.history-text p {
    margin-bottom: 20px;
}

.history-timeline {
    max-width: 800px;
    margin: 60px auto 0;
    border-left: 2px solid var(--color-accent);
    padding-left: 30px;
}

.timeline-item {
    margin-bottom: 40px;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.timeline-year {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
    display: block;
    color: var(--color-green);
}

/* BEAN GUIDE */
#bean-guide {
    background-color: #EFEBE0;
    /* Slightly darker shade */
}

/* Override page header color for bean guide if necessary, but default is ok or specific below */
body:has(#bean-guide) .page-header {
    background-color: #EFEBE0;
}

/* Modern CSS way, strictly strictly speaking we are stripping ids from body usually so let's stick to class overrides if needed. But for now let's use the colors from the files */

/* Since we are merging, we need to handle the specific page header colors.
   The HTML files used inline styles or different values in the style tag for .page-header.
   We can create modifier classes or just use generic rules. */

.page-header.dark {
    background-color: #2F3E32;
    color: #fff;
}

.page-header.dark h1 {
    color: #E8DCC2;
}

.page-header.beige {
    background-color: #EFEBE0;
}

.page-header.archive-bg {
    background-color: #e6e2d8;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.guide-card {
    background: var(--color-white);
    padding: 30px;
    border: 1px solid #e0ddd8;
    text-align: center;
    transition: transform 0.3s;
}

.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.guide-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--color-text);
}

.guide-card p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-accent);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--color-accent);
}

.bean-note {
    text-align: right;
    font-size: 0.85rem;
    color: var(--color-text);
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}

/* RECOMMENDED BRAND */
#recommended {
    background-color: #2F3E32;
    /* Very dark green background */
    color: var(--color-white);
    text-align: center;
}

#recommended h2 {
    border-color: rgba(255, 255, 255, 0.3);
}

.brand-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    /* Centered in recommended.html */
}

/* Note: In index.html recommended section text-align was center, 
   but in recommended.html specific styles were added. */

.brand-name {
    font-size: 3rem;
    font-family: serif;
    margin-bottom: 20px;
    color: #E8DCC2;
    /* Gold/Beige */
}

.brand-description-text {
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.features-list {
    list-style: none;
    margin: 30px auto;
    /* Centered block */
    font-family: var(--font-sans);
    display: inline-block;
    /* Useful for centering list */
    text-align: left;
}

/* .features-list in index.html had margin: 30px 0 and different alignments. 
   Let's ensure compatibility. The sub-page version is more detailed. */

.features-list li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    /* justify-content: center;  <-- removed from index version to match recommended page text-align left flow */
    gap: 15px;
}

/* Special handling for index page if needed, but the recommended page style is better generally */

.features-list li::before {
    content: "✓";
    color: #E8DCC2;
    /* Default gold */
}

/* Modifier for green tick on white background (recommended.html) */
.features-list.green-tick li::before {
    color: var(--color-green);
    font-weight: bold;
}

.btn-white {
    background-color: var(--color-white);
    color: #2F3E32;
    border: 1px solid var(--color-white);
}

.btn-white:hover {
    background-color: #E8DCC2;
    color: #2F3E32;
}

.btn-green {
    background-color: var(--color-green);
    color: var(--color-white);
    border: 1px solid var(--color-green);
}

.btn-green:hover {
    background-color: #26422b;
    transform: translateY(-2px);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.product-card {
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    background: #fff;
    color: var(--color-text);
    /* Ensure text color is correct on white bg */
}

.product-img {
    height: 200px;
    background: #eee;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

/* COLUMN */


.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.column-card {
    background: var(--color-white);
    border: 1px solid #e0ddd8;
    overflow: hidden;
    display: flex;
    /* Flex from column.html */
    flex-direction: column;
}

.column-img-placeholder {
    width: 100%;
    height: 200px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-family: var(--font-sans);
}

.column-body {
    padding: 20px;
    flex-grow: 1;
    /* from column.html */
}

.column-body h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.column-readmore {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-accent);
}

/* ARCHIVE */
#archive {
    background-color: #e6e2d8;
    text-align: center;
}

.archive-notice {
    border: 1px solid var(--color-text);
    padding: 40px;
    display: block;
    /* changed from inline-block for better margin control in subpage */
    max-width: 800px;
    margin: 0 auto;
    /* subpage had margin-bottom: 60px too */
    text-align: center;
    /* subpage specific */
    background-color: #fff;
    /* subpage specific */
}

/* Index page .archive-notice was inline-block and transparent bg. 
   Optimizing for subpage look as it is richer. */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    background-color: #ddd;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 0.8rem;
}

/* Footer */
footer {
    background-color: var(--color-text);
    color: var(--color-bg);
    text-align: center;
    padding: 40px 0;
    font-size: 0.8rem;
    font-family: var(--font-sans);
    margin-top: auto;
    /* Sticky footer behavior */
}

/* ===== AFFILIATE & PRIVACY ADDITIONS ===== */

/* Footer affiliate notice */
.footer-affiliate-notice {
    font-size: 0.8rem;
    color: rgba(250, 247, 242, 0.6);
    margin-bottom: 12px;
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
}

/* Footer nav links */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.footer-links a {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(250, 247, 242, 0.7);
    text-decoration: none;
    transition: opacity 0.3s;
    border-bottom: 1px solid rgba(250, 247, 242, 0.2);
    padding-bottom: 1px;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--color-bg);
}

/* In-article affiliate notice bar */
.affiliate-notice-bar {
    background-color: #f5f0e8;
    border-left: 3px solid var(--color-accent);
    padding: 12px 18px;
    margin-bottom: 40px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #888;
    line-height: 1.6;
}

.affiliate-notice-bar a {
    color: var(--color-green);
    text-decoration: underline;
}

/* ===== END AFFILIATE & PRIVACY ADDITIONS ===== */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        gap: 15px;
    }

    nav ul {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .guide-grid {
        grid-template-columns: 1fr;
    }
}

/* FLAVOR MAP SECTION */
.flavor-map-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e0ddd8;
}

.flavor-map-title {
    text-align: center;
    margin-bottom: 50px;
}

.flavor-map-title h2 {
    font-size: 2rem;
    color: var(--color-text);
    margin-bottom: 10px;
    border-bottom: none;
    display: inline-block;
    position: relative;
}

.flavor-map-title h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent);
    margin: 15px auto 0;
}

.region-group {
    margin-bottom: 60px;
}

.region-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.region-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-accent);
    margin-right: 20px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 5px;
    border-right: 3px solid var(--color-accent);
    padding-right: 15px;
    height: 100px;
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}

.flavor-card {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flavor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.flavor-img-area {
    height: 160px;
    background-color: #fce4ec;
    /* Placeholder fallback */
    overflow: hidden;
}

.flavor-img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flavor-info {
    padding: 25px;
}

.country-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-text);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roast-badge {
    font-size: 0.7rem;
    background: #5d4037;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: normal;
}

.flavor-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    height: 4.8em;
    /* approx 3 lines */
    overflow: hidden;
}

/* Flavor Radar Bars Sim */
.flavor-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-row {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.bar-label {
    width: 60px;
    color: #999;
}

.bar-track {
    flex-grow: 1;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 3px;
}

@media (max-width: 768px) {
    .region-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .region-name {
        writing-mode: horizontal-tb;
        border-right: none;
        border-bottom: 3px solid var(--color-accent);
        padding-right: 0;
        padding-bottom: 10px;
        margin-bottom: 20px;
        height: auto;
        width: 100%;
    }

    .flavor-card {
        margin-bottom: 20px;
    }
}