/*
Theme Name: TruLife Ecwid Bookstore
Theme URI: https://shop.trulifebooks.com/
Author: TruLife Books LLC
Author URI: https://trulifebooks.com/
Description: A custom bookstore theme designed for TruLife Books and the Ecwid Ecommerce Shopping Cart plugin. Includes a bookstore home page, Ecwid-ready shop template, genre navigation, featured-book sections, campaign messaging, and responsive styling.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: trulife-ecwid
Tags: e-commerce, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready
*/

:root {
  --tl-navy: #14213d;
  --tl-blue: #2457a7;
  --tl-gold: #d8a13b;
  --tl-cream: #f7f3eb;
  --tl-ink: #1f2933;
  --tl-muted: #6b7280;
  --tl-white: #ffffff;
  --tl-border: #e5e7eb;
  --tl-radius: 14px;
  --tl-shadow: 0 14px 35px rgba(20, 33, 61, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tl-ink);
  background: var(--tl-white);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.65;
}
a { color: var(--tl-blue); text-decoration: none; }
a:hover { color: var(--tl-navy); }
img { max-width: 100%; height: auto; }

.tl-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.tl-site-main { min-height: 60vh; }

.tl-topbar {
  background: var(--tl-navy);
  color: var(--tl-white);
  font-size: .92rem;
}
.tl-topbar .tl-container {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tl-topbar a { color: var(--tl-white); }

.tl-header {
  background: var(--tl-white);
  border-bottom: 1px solid var(--tl-border);
  position: sticky;
  top: 0;
  z-index: 999;
}
.admin-bar .tl-header { top: 32px; }
.tl-header-inner {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
}
.tl-brand { display: flex; align-items: center; gap: 14px; }
.tl-brand img { max-height: 58px; width: auto; }
.tl-brand-text strong { display:block; color:var(--tl-navy); font-size:1.18rem; }
.tl-brand-text span { color:var(--tl-muted); font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; }

.tl-nav ul { display:flex; justify-content:center; align-items:center; gap:25px; list-style:none; margin:0; padding:0; }
.tl-nav a { color:var(--tl-ink); font-weight:700; font-size:.95rem; }
.tl-nav a:hover { color:var(--tl-blue); }
.tl-header-actions { display:flex; align-items:center; gap:12px; }
.tl-button,
button,
input[type="submit"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:999px;
  background:var(--tl-blue);
  color:var(--tl-white);
  padding:12px 20px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}
.tl-button:hover,
button:hover,
input[type="submit"]:hover { background:var(--tl-navy); color:var(--tl-white); transform:translateY(-1px); }
.tl-button--gold { background:var(--tl-gold); color:var(--tl-navy); }
.tl-button--outline { background:transparent; color:var(--tl-navy); border:2px solid var(--tl-navy); }

.tl-mobile-toggle { display:none; background:transparent; color:var(--tl-navy); padding:8px; border-radius:8px; }

.tl-hero {
  background:linear-gradient(120deg, rgba(20,33,61,.96), rgba(36,87,167,.90));
  color:var(--tl-white);
  padding:78px 0;
  overflow:hidden;
}
.tl-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.tl-eyebrow { color:var(--tl-gold); text-transform:uppercase; letter-spacing:.14em; font-weight:900; font-size:.78rem; }
.tl-hero h1 { margin:.35rem 0 1rem; font-family:Georgia,serif; font-size:clamp(2.6rem,5vw,5.2rem); line-height:1.02; }
.tl-hero p { font-size:1.16rem; max-width:660px; color:rgba(255,255,255,.88); }
.tl-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.tl-book-stack { position:relative; min-height:380px; }
.tl-book-card { position:absolute; width:210px; aspect-ratio:2/3; border-radius:7px 14px 14px 7px; box-shadow:0 25px 55px rgba(0,0,0,.35); display:grid; place-items:center; padding:24px; text-align:center; font-family:Georgia,serif; font-weight:700; }
.tl-book-card:nth-child(1) { background:#efe6d6; color:var(--tl-navy); left:8%; top:30px; transform:rotate(-10deg); }
.tl-book-card:nth-child(2) { background:var(--tl-gold); color:var(--tl-navy); left:34%; top:0; z-index:2; }
.tl-book-card:nth-child(3) { background:#c8d8ef; color:var(--tl-navy); right:2%; top:45px; transform:rotate(10deg); }

.tl-section { padding:72px 0; }
.tl-section--cream { background:var(--tl-cream); }
.tl-section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.tl-section-heading h2 { margin:0; color:var(--tl-navy); font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.2rem); }
.tl-section-heading p { margin:0; max-width:650px; color:var(--tl-muted); }

.tl-genre-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.tl-genre { background:var(--tl-white); border:1px solid var(--tl-border); border-radius:var(--tl-radius); padding:20px 14px; text-align:center; font-weight:800; color:var(--tl-navy); box-shadow:0 5px 18px rgba(20,33,61,.04); }
.tl-genre:hover { transform:translateY(-2px); box-shadow:var(--tl-shadow); }

.tl-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tl-feature-card { background:var(--tl-white); border:1px solid var(--tl-border); border-radius:var(--tl-radius); padding:28px; box-shadow:0 5px 18px rgba(20,33,61,.05); }
.tl-feature-card h3 { color:var(--tl-navy); margin-top:0; }

.tl-ecwid-wrap { background:var(--tl-white); border-radius:var(--tl-radius); }
.tl-content { padding:54px 0; }
.tl-entry { max-width:900px; margin:0 auto; }
.tl-entry h1 { color:var(--tl-navy); font-family:Georgia,serif; font-size:clamp(2.2rem,4vw,3.6rem); }

.tl-newsletter { background:var(--tl-navy); color:var(--tl-white); border-radius:24px; padding:46px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.tl-newsletter h2 { margin:0 0 8px; font-family:Georgia,serif; font-size:2rem; }
.tl-newsletter p { margin:0; color:rgba(255,255,255,.75); }

.tl-footer { background:#0d1629; color:rgba(255,255,255,.76); padding:55px 0 25px; }
.tl-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:45px; }
.tl-footer h3, .tl-footer h4 { color:var(--tl-white); }
.tl-footer ul { list-style:none; margin:0; padding:0; }
.tl-footer li { margin:.45rem 0; }
.tl-footer a { color:rgba(255,255,255,.78); }
.tl-copyright { border-top:1px solid rgba(255,255,255,.12); margin-top:35px; padding-top:22px; font-size:.9rem; }

@media (max-width: 980px) {
  .tl-mobile-toggle { display:inline-flex; }
  .tl-header-inner { grid-template-columns:1fr auto; }
  .tl-nav { display:none; grid-column:1/-1; padding-bottom:20px; }
  .tl-nav.is-open { display:block; }
  .tl-nav ul { flex-direction:column; align-items:flex-start; }
  .tl-header-actions .tl-button--outline { display:none; }
  .tl-hero-grid { grid-template-columns:1fr; }
  .tl-book-stack { display:none; }
  .tl-genre-grid { grid-template-columns:repeat(3,1fr); }
  .tl-feature-grid { grid-template-columns:1fr; }
  .tl-newsletter { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .tl-container { width:min(100% - 24px,1180px); }
  .tl-topbar .tl-container { justify-content:center; text-align:center; }
  .tl-topbar .tl-topbar-links { display:none; }
  .tl-brand-text span { display:none; }
  .tl-header-actions .tl-button { display:none; }
  .tl-hero { padding:55px 0; }
  .tl-section { padding:52px 0; }
  .tl-section-heading { display:block; }
  .tl-genre-grid { grid-template-columns:repeat(2,1fr); }
  .tl-footer-grid { grid-template-columns:1fr; }
  .tl-newsletter { padding:30px 24px; }
}