/*
Theme Name: Ferment Foundry
Theme URI: https://fermentfoundry.com
Author: Ferment Foundry
Author URI: https://fermentfoundry.com
Description: Living Food, Made at Home. A magazine-style WordPress theme converted from the Ferment Foundry React/Vite source. Editorial layout for fermentation guides — sauerkraut, kombucha, miso, hot sauce and everything bubbling between.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fermentfoundry
Tags: blog, magazine, food, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================================
   Google Fonts — Fraunces (serif), Inter (sans), IBM Plex Mono (mono)
   Mirrors the @import in src/index.css.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

/* =========================================================================
   Brand color tokens — exact values from src/index.css @theme block
   ========================================================================= */
:root {
    --font-serif: "Fraunces", ui-serif, Georgia, serif;
    --font-sans:  "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

    --color-moss:        #4F6B3A;
    --color-moss-50:     #f4f7f2;
    --color-moss-100:    #e5ecd9;
    --color-moss-200:    #cbddb6;
    --color-moss-600:    #3a5229;

    --color-forest:      #1F2418;
    --color-forest-900:  #12150e;

    --color-mustard:     #D4A82F;
    --color-mustard-50:  #fbf6ea;
    --color-mustard-600: #b58d22;

    --color-ferment:     #C45C7C;
    --color-ferment-50:  #fbf2f5;
    --color-ferment-600: #a74864;

    --color-offwhite:    #F4F0E6;
    --color-taupe:       #7A6E5C;

    /* Brand role aliases used throughout templates */
    --color-brand-primary:   var(--color-moss);
    --color-brand-secondary: var(--color-forest);
    --color-brand-accent1:   var(--color-mustard);
    --color-brand-accent2:   var(--color-ferment);
    --color-brand-bg:        var(--color-offwhite);
    --color-brand-surface:   #ffffff;
    --color-brand-muted:     var(--color-taupe);
}

/* =========================================================================
   Base reset / typographic defaults — mirrors @layer base in index.css
   ========================================================================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-brand-bg);
    color: var(--color-brand-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--color-brand-secondary);
    margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================================================
   Bubbling-ferment decoration — copied verbatim from index.css
   ========================================================================= */
.ferment-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: float 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1);   opacity: 0.2; }
    50%      { transform: translateY(-20px) scale(1.1); opacity: 0.5; }
}

/* =========================================================================
   Custom scrollbar (WebKit) — from index.css
   ========================================================================= */
::-webkit-scrollbar          { width: 8px; }
::-webkit-scrollbar-track    { background: var(--color-brand-bg); }
::-webkit-scrollbar-thumb    { background-color: var(--color-moss-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-moss); }

/* =========================================================================
   Page-transition fade (replaces motion/react AnimatePresence in Layout.tsx)
   ========================================================================= */
@keyframes ff-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ff-page-enter { animation: ff-fade-in 0.3s ease-out both; }

/* =========================================================================
   Utility helpers used by templates that are not 1:1 Tailwind utilities
   ========================================================================= */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* WP-required default classes */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.alignleft  { float: left;  margin-right: 1.5em; }
.alignright { float: right; margin-left:  1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: .875rem; color: var(--color-brand-muted); text-align: center; }
.bypostauthor { display: block; }
.sticky      { display: block; }
.gallery-caption { font-size: .875rem; color: var(--color-brand-muted); }

/* WP block alignment helpers */
.alignwide { max-width: 1280px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }