/*
Theme Name: Lilieni
Description: Custom WordPress theme for lilieni.com - editorial, pencil-illustration aesthetic driven by Google Stitch designs. Forked from the Walking the World theme. Preserves case study CPT, content pillar taxonomy, and all customizer controls.
Author: Lilian
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lilieni
Tags: custom-header, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, portfolio, e-commerce

Lilieni WordPress Theme
Editorial, hand-drawn aesthetic for lilieni.com
Rebuilt from Google Stitch designs
*/

/* ==========================================================================
   Design Tokens — "The Personal Sketchbook"
   ========================================================================== */
:root {
    /* Paper & ink */
    --lilieni-surface: #f4ece1;
    --lilieni-surface-container-low: #ede2d4;
    --lilieni-surface-container: #efeeea;
    --lilieni-surface-container-high: #e9e8e4;
    --lilieni-surface-container-lowest: #ffffff;

    /* Ink (primary) — dark moss */
    --lilieni-primary: #293616;
    --lilieni-primary-container: #3f4d2b;
    --lilieni-on-primary: #ffffff;

    /* Wash (secondary) */
    --lilieni-secondary: #536441;
    --lilieni-secondary-container: #d3e6bb;

    /* Accent pencil (tertiary) — muted gold */
    --lilieni-tertiary: #3e3110;
    --lilieni-tertiary-container: #564724;
    --lilieni-tertiary-fixed: #f7e0b2;
    --lilieni-tertiary-fixed-dim: #dac498;
    --lilieni-on-tertiary-container: #cbb68a;
    --lilieni-accent-gold: #C3AE83;

    /* Text */
    --lilieni-on-surface: #1b1c1a;
    --lilieni-on-surface-variant: #45483e;
    --lilieni-outline: #76786d;
    --lilieni-outline-variant: #c6c8bb;
}

/* ==========================================================================
   Base & Typography
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--lilieni-on-surface);
    background-color: var(--lilieni-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::selection,
body ::selection {
    background-color: var(--lilieni-tertiary-fixed);
    color: var(--lilieni-on-surface);
}

/* Editorial headline font (Be Vietnam Pro) */
h1, h2, h3, h4, h5, h6,
.font-headline {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    font-weight: 700;
    color: var(--lilieni-primary);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Handwritten script — hero titles and signature moments */
.font-handwritten {
    font-family: 'Give You Glory', cursive;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
}

.font-label {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 500;
}

p {
    font-family: 'Manrope', system-ui, sans-serif;
    line-height: 1.7;
}

a {
    color: var(--lilieni-primary);
    text-decoration-color: var(--lilieni-accent-gold);
    text-underline-offset: 3px;
    transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
}

a:hover {
    color: var(--lilieni-primary-container);
}

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

/* ==========================================================================
   Signature components — the hand-drawn touches
   ========================================================================== */

/* Gold scribble highlight behind a word (mimics colored-pencil swipe) */
.scribble-accent {
    position: relative;
    z-index: 1;
    display: inline-block;
}
.scribble-accent::after {
    content: '';
    position: absolute;
    bottom: 0.08em;
    left: -0.1em;
    right: -0.1em;
    height: 0.4em;
    background-color: var(--lilieni-accent-gold);
    opacity: 0.3;
    z-index: -1;
    transform: rotate(-1deg);
    border-radius: 20% 80% 30% 70% / 50% 50% 50% 50%;
}

/* Dashed-line sketch divider */
.sketch-border-bottom {
    background-image: linear-gradient(to right, var(--lilieni-primary) 10%, transparent 0%);
    background-position: bottom;
    background-size: 8px 1px;
    background-repeat: repeat-x;
    opacity: 0.2;
}

/* Section divider — 0.5px dashed rule between homepage sections */
.section-rule {
    border: none;
    border-top: 0.5px dashed var(--lilieni-on-surface-variant);
    opacity: 0.35;
    margin: 0;
}

/* Hand-drawn horizontal divider */
.hand-drawn-divider {
    height: 2px;
    background: var(--lilieni-outline-variant);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    position: relative;
    overflow: visible;
}
.hand-drawn-divider::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--lilieni-outline-variant);
    filter: blur(1px);
    opacity: 0.5;
}

/* Frosted-vellum sticky header */
.glass-header {
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    background-color: rgba(244, 236, 225, 0.85);
}

/* Single post content — matches base body size (16px) */
.lilieni-post-content {
    font-size: 16px;
    line-height: 1.75;
}
.lilieni-post-content p,
.lilieni-post-content li,
.lilieni-post-content blockquote,
.lilieni-post-content figcaption {
    font-size: 16px;
    line-height: 1.75;
}
.lilieni-post-content p:first-of-type::first-letter {
    font-size: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    float: none;
    line-height: inherit;
    padding: 0;
    color: inherit;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    background: var(--lilieni-primary);
    color: var(--lilieni-on-primary);
    padding: 1rem 1.5rem;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* ==========================================================================
   WordPress core classes
   ========================================================================== */
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }

.wp-caption { max-width: 100%; margin-bottom: 1.5rem; }
.wp-caption-text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    color: var(--lilieni-on-surface-variant);
    text-align: center;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.comments-area { margin-top: 4rem; }