/*
Theme Name: Angle Book Theme
Theme URI: https://angelbook143.store
Author: Angel Santee
Author URI: https://angelbook143.store
Description: A premium author theme for Angel Santee — Bestselling Author, Entrepreneur & Survivor. Features book showcases, category filters, newsletter signup, and full author branding.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angle-book-theme
Tags: author, books, one-column, two-columns, custom-menu, featured-images, full-width-template, sticky-post, translation-ready
*/

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
:root {
    --gold: #C9A84C;
    --gold-light: #e6ce8a;
    --gold-hover: #b59540;
    --cream: #FAF6EE;
    --blush: #F2D4D4;
    --black: #1A1A1A;
    --gray-light: #F0EDED;
    --white: #FFFFFF;
    --font-head: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-gold: 0 15px 35px rgba(201,168,76,0.2);
    --transition: all 0.3s ease;
}

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--black);
    line-height: 1.2;
}

h1 {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

a { text-decoration:none; color:inherit; transition: var(--transition); }
ul { list-style:none; }
img { max-width:100%; display:block; }

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

/* ===========================
   BUTTONS
   =========================== */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: var(--font-body);
    text-align: center;
}
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); color: var(--white); }
.btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-outline-gold { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: var(--white); }

/* ===========================
   TYPOGRAPHY HELPERS
   =========================== */
.gold-text { color: var(--gold); }
.section-title { font-size: 2.6rem; margin-bottom: 40px; position: relative; }
.section-title.underline-gold::after {
    content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
    width:60px; height:3px; background: var(--gold);
}
.section-title.underline-gold.left-align::after { left:0; transform:none; }

/* ===========================
   FADE IN ANIMATION
   =========================== */
.fade-in { opacity:1; transform:translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.animate-hidden { opacity:0; transform:translateY(30px); }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===========================
   NAVBAR
   =========================== */
.navbar {
    position: sticky; top:0; left:0; width:100%;
    background: var(--white); box-shadow: var(--shadow-sm);
    z-index: 1000; transition: var(--transition);
}
.nav-container { display:flex; justify-content:space-between; align-items:center; height:80px; }
.logo { font-family: var(--font-head); font-size:1.9rem; font-weight:700; color:var(--black); }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-link { font-size:0.95rem; font-weight:500; color:var(--black); position:relative; }
.nav-link::after {
    content:''; position:absolute; width:0; height:2px;
    bottom:-5px; left:0; background:var(--gold); transition:width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.current-menu-item > a::after,
.current-page-ancestor > a::after { width:100%; }
.nav-links li a { font-size:0.95rem; font-weight:500; color:var(--black); position:relative; }
.nav-links li a::after {
    content:''; position:absolute; width:0; height:2px;
    bottom:-5px; left:0; background:var(--gold); transition:width 0.3s ease;
}
.nav-links li a:hover::after { width:100%; }
.nav-links li.current-menu-item > a::after { width:100%; }
.hamburger { display:none; font-size:1.5rem; cursor:pointer; color:var(--black); background:none; border:none; }

/* ===========================
   HERO
   =========================== */
.hero {
    background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
    padding: 100px 0; overflow:hidden;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }

.hero-photo-wrap {
    width:100%; max-width:420px; margin:0 auto;
    position:relative;
}
.hero-photo-wrap img {
    width:100%; aspect-ratio:3/4; object-fit:cover;
    border-radius: 8px 80px 8px 8px;
    border:4px solid var(--gold);
    box-shadow: var(--shadow-md);
}
.hero-badge {
    display:inline-block; padding:6px 16px;
    background: rgba(201,168,76,0.12); color:var(--gold);
    font-size:0.82rem; font-weight:600; border-radius:50px;
    margin-bottom:20px; letter-spacing:1px; text-transform:uppercase;
}
.hero h1 { font-size:3.8rem; font-weight:800; line-height:1.08; letter-spacing:-1px; }
.hero p { font-size:1.1rem; color:#555; margin-bottom:30px; }
.hero-buttons { display:flex; gap:15px; margin-bottom:40px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:30px; border-top:1px solid rgba(0,0,0,0.1); padding-top:20px; flex-wrap:wrap; }
.stat-item h4 { font-size:1.5rem; color:var(--gold); }
.stat-item p { font-size:0.85rem; margin-bottom:0; }

/* ===========================
   TOP TITLES STRIP
   =========================== */
.top-titles-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; }
.horizontal-scroll-container {
    width:100%; overflow-x:auto; padding:20px 0 40px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin; scrollbar-color:var(--gold) var(--gray-light);
}
.horizontal-scroll-container::-webkit-scrollbar { height:6px; }
.horizontal-scroll-container::-webkit-scrollbar-track { background:var(--gray-light); border-radius:4px; }
.horizontal-scroll-container::-webkit-scrollbar-thumb { background:var(--gold); border-radius:4px; }
.scrolling-wrapper { display:flex; gap:20px; width:max-content; }

.strip-card { width:160px; scroll-snap-align:start; text-align:left; }
.strip-book-img {
    width:100%; aspect-ratio:2/3; object-fit:cover;
    border-radius:4px 8px 8px 4px;
    box-shadow:4px 4px 12px rgba(0,0,0,0.18);
    margin-bottom:12px;
    transition: var(--transition);
}
.strip-card:hover .strip-book-img { transform:translateY(-5px); box-shadow:6px 8px 18px rgba(0,0,0,0.22); }
.strip-title { font-size:0.9rem; font-weight:600; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.strip-price { font-weight:700; color:var(--gold); font-size:0.88rem; }
.badge-small { display:inline-block; background:var(--gray-light); font-size:0.7rem; padding:2px 7px; border-radius:3px; margin-top:5px; color:#555; }

/* ===========================
   FEATURED BOOKS GRID
   =========================== */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.bg-gray { background: var(--gray-light); }

.book-card {
    background:var(--white); border-radius:8px; padding:18px;
    border:1px solid #eee; transition:var(--transition);
    position:relative; display:flex; flex-direction:column;
}
.book-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-md); border-color:var(--blush); }
.book-cover-container { position:relative; overflow:hidden; border-radius:4px; margin-bottom:14px; }
.book-cover-img {
    width:100%; aspect-ratio:2/3; object-fit:cover;
    display:block; border-radius:4px;
    transition: var(--transition);
}
.book-card:hover .book-cover-img { transform:scale(1.03); }
.quick-look {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(255,255,255,0.95); color:var(--black);
    padding:8px 15px; border-radius:20px; font-size:0.82rem; font-weight:600;
    opacity:0; transition:var(--transition); cursor:pointer; z-index:3;
    white-space:nowrap; box-shadow:var(--shadow-sm);
}
.book-card:hover .quick-look { opacity:1; }

.category-tag { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:7px; }
.tag-pink { color:#d63384; } .tag-teal { color:#20c997; } .tag-green { color:#198754; }
.tag-gold { color:var(--gold); } .tag-indigo { color:#6610f2; } .tag-brown { color:#795548; }
.tag-burgundy { color:#800000; } .tag-navy { color:#0dcaf0; } .tag-red { color:#dc3545; }

.book-card h3 { font-size:1rem; margin-bottom:8px; flex-grow:1; line-height:1.3; }
.book-card p.desc { font-size:0.82rem; color:#666; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-card .price { font-size:1.15rem; font-weight:700; color:var(--black); margin-bottom:12px; }
.book-card .btn { width:100%; padding:9px; font-size:0.88rem; }

/* AMAZON BUTTON */
.btn-amazon {
    background: #FF9900; color: #000;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-weight:600; border-radius:4px; width:100%; padding:10px;
    font-size:0.88rem; cursor:pointer; border:none; font-family:var(--font-body);
    transition: var(--transition);
}
.btn-amazon:hover { background:#e68a00; transform:translateY(-2px); box-shadow:0 5px 15px rgba(255,153,0,0.3); color:#000; }

/* ===========================
   QUOTE SECTION
   =========================== */
.quote-section { background:var(--black); color:var(--white); padding:100px 0; position:relative; overflow:hidden; }
.quote-container { max-width:800px; margin:0 auto; display:flex; gap:40px; align-items:center; }
.quote-bar { width:4px; height:100px; background:var(--gold); flex-shrink:0; }
.quote-text { font-family:var(--font-head); font-size:1.9rem; font-style:italic; line-height:1.5; margin-bottom:20px; }
.quote-author { color:var(--gold); font-size:1.15rem; font-weight:600; }
.quote-icon { font-size:4rem; color:rgba(201,168,76,0.08); position:absolute; right:15%; top:50%; transform:translateY(-50%); }

/* ===========================
   CATEGORIES
   =========================== */
.category-card {
    background:var(--cream); padding:38px 20px; text-align:center;
    border-radius:8px; border:2px solid transparent;
    transition:var(--transition); cursor:pointer;
    text-decoration:none; display:block;
}
.category-card:hover { border-color:var(--gold); transform:translateY(-5px); box-shadow:var(--shadow-md); }
.category-icon { font-size:2.5rem; margin-bottom:15px; }
.category-card h3 { font-size:1.15rem; margin-bottom:8px; }
.category-card p { font-size:0.88rem; color:#666; }

/* ===========================
   NEWSLETTER
   =========================== */
.newsletter { background:linear-gradient(135deg, #e3c46b 0%, var(--gold) 100%); padding:80px 0; color:var(--white); text-align:center; }
.newsletter h2 { color:var(--white); font-size:2.4rem; margin-bottom:10px; }
.newsletter p { font-size:1.05rem; margin-bottom:28px; }
.newsletter-form { max-width:500px; margin:0 auto; display:flex; gap:10px; }
.newsletter-form input { flex-grow:1; padding:14px 20px; border:none; border-radius:4px; font-size:1rem; font-family:var(--font-body); }
.newsletter-form button { background:var(--black); color:var(--white); border:none; border-radius:4px; padding:0 28px; font-weight:600; cursor:pointer; transition:var(--transition); font-family:var(--font-body); }
.newsletter-form button:hover { background:#333; }
.newsletter-note { font-size:0.78rem; margin-top:14px; opacity:0.85; }

/* ===========================
   FOOTER
   =========================== */
.footer { background:var(--black); color:#aaa; padding:80px 0 30px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.footer-logo { font-family:var(--font-head); font-size:1.5rem; color:var(--white); margin-bottom:15px; display:inline-block; }
.footer p { margin-bottom:18px; }
.social-icons { display:flex; gap:12px; }
.social-icons a {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; background:rgba(255,255,255,0.1);
    border-radius:50%; color:var(--white); transition:var(--transition);
}
.social-icons a:hover { background:var(--gold); transform:translateY(-3px); }
.footer h4 { color:var(--white); margin-bottom:18px; font-size:1.05rem; }
.footer-links li { margin-bottom:11px; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { text-align:center; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); font-size:0.82rem; }

/* ===========================
   PAGE HEADER
   =========================== */
.page-header { background:var(--black); color:var(--white); padding:80px 0; text-align:center; }
.page-header h1 { color:var(--white); font-size:3rem; margin-bottom:15px; font-weight:800; }
.page-header p { color:rgba(255,255,255,0.8); font-size:1.1rem; }

/* ===========================
   ABOUT PAGE
   =========================== */
.about-story p { margin-bottom:18px; font-size:1.05rem; color:#444; }
.mission-card { background:var(--cream); border-left:4px solid var(--gold); padding:28px; margin:35px 0; font-family:var(--font-head); font-size:1.25rem; font-style:italic; color:var(--black); }

/* ===========================
   BOOKS PAGE FILTERS
   =========================== */
.filter-container { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:45px; }
.filter-btn { padding:8px 20px; background:transparent; border:1px solid #ddd; border-radius:30px; font-size:0.88rem; cursor:pointer; transition:var(--transition); font-weight:500; font-family:var(--font-body); }
.filter-btn:hover, .filter-btn.active { background:var(--gold); color:var(--white); border-color:var(--gold); }
.book-actions { display:flex; gap:8px; margin-top:auto; }

/* ===========================
   SHOP PAGE
   =========================== */
.shop-banner {
    background: #111111;
    color:var(--white); padding:80px 0; text-align:center;
}
.shop-banner h1 { color:var(--white); }
.shop-card { text-align:center; }
.coming-soon-banner { background:var(--blush); padding:28px; text-align:center; border-radius:8px; margin-top:55px; color:#800000; font-weight:600; }

/* ===========================
   CONTACT PAGE
   =========================== */
.contact-info-card { background:var(--cream); padding:28px; border-radius:8px; margin-bottom:18px; display:flex; align-items:flex-start; gap:15px; }
.contact-info-card i { font-size:1.4rem; color:var(--gold); margin-top:4px; }
.contact-form { background:var(--white); padding:38px; border-radius:8px; box-shadow:var(--shadow-md); border:1px solid #eee; }
.form-group { margin-bottom:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group label { display:block; margin-bottom:7px; font-weight:500; font-size:0.88rem; }
.form-control { width:100%; padding:11px 14px; border:1px solid #ccc; border-radius:4px; font-family:var(--font-body); font-size:0.95rem; transition:var(--transition); }
.form-control:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.18); }
textarea.form-control { resize:vertical; height:140px; }

/* ===========================
   TOAST NOTIFICATIONS
   =========================== */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--black); color:var(--white); padding:14px 22px; border-radius:4px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; transform:translateX(120%); transition:transform 0.3s ease; border-left:4px solid var(--gold); font-size:0.9rem; }
.toast.show { transform:translateX(0); }

/* ===========================
   BOOK COVER GRADIENTS (fallback)
   =========================== */
.bg-grad-gold { background:linear-gradient(135deg,#e6ce8a,#C9A84C); }
.bg-grad-blue { background:linear-gradient(135deg,#7ab6e8,#206da8); }
.bg-grad-purple { background:linear-gradient(135deg,#b084cc,#5c287a); }
.bg-grad-green { background:linear-gradient(135deg,#8ad39e,#288040); }
.bg-grad-brown { background:linear-gradient(135deg,#a88a78,#5e3b26); }
.bg-grad-indigo { background:linear-gradient(135deg,#818cf8,#312e81); }
.bg-grad-red { background:linear-gradient(135deg,#f87171,#7f1d1d); }
.bg-grad-navy { background:linear-gradient(135deg,#38bdf8,#082f49); }
.bg-grad-pink { background:linear-gradient(135deg,#f472b6,#be185d); }
.bg-grad-teal { background:linear-gradient(135deg,#2dd4bf,#0f766e); }
.bg-grad-burgundy { background:linear-gradient(135deg,#9f1239,#4c0519); }

/* ===========================
   RESPONSIVE
   =========================== */
@media(max-width:992px){
    .grid-4,.footer-grid{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .hero-grid{grid-template-columns:1fr;text-align:center;}
    .hero-photo-wrap{margin:0 auto;max-width:320px;}
    .hero-buttons{justify-content:center;}
    .hero-stats{justify-content:center;}
    .quote-container{flex-direction:column;text-align:center;}
    .quote-bar{width:100px;height:4px;}
    .form-row{grid-template-columns:1fr;}
}
@media(max-width:768px){
    .hamburger{display:block;}
    .nav-links{
        position:absolute;top:80px;left:-100%;width:100%;
        background:var(--white);flex-direction:column;padding:30px 0;
        box-shadow:0 10px 15px rgba(0,0,0,0.1);transition:var(--transition);
    }
    .nav-links.active{left:0;}
    .hero h1{font-size:2.6rem;font-weight:800;}
    .newsletter-form{flex-direction:column;}
    .newsletter-form button{padding:14px;}
}
@media(max-width:576px){
    .grid-4,.grid-3,.footer-grid{grid-template-columns:1fr;}
    .hero-stats{flex-direction:column;gap:14px;}
}