/* ==========================================================================
   AMO LUZ — HOMEPAGE CSS
   File: /assets/css/amoluz-homepage.css
   Enqueue: functions.php (homepage only)
   Theme: Shoptimizer child theme + GenerateBlocks
   Last updated: May 2026
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. CSS VARIABLES — Brand Kit
   NOTE: Nếu đã khai báo ở theme global, bỏ block này.
   -------------------------------------------------------------------------- */
:root {
  /* Primary */
  --al-ink: #2C2C2A;
  --al-parchment: #F1EFE8;
  --al-amber: #854F0B;
  --al-stone: #D3D1C7;

  /* Extended */
  --al-sage: #8B9F7B;
  --al-dusty-rose: #C4908A;
  --al-mustard: #C9A84C;
  --al-slate: #6B7B8D;
  --al-ivory: #F5F0E8;
  --al-berry: #7D4E6B;
  --al-terracotta: #B8704B;

  /* Semantic text */
  --al-text-primary: #2C2C2A;
  --al-text-secondary: #5F5E5A;
  --al-text-muted: #888780;

  /* Typography */
  --al-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --al-font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;

  /* Spacing & radii */
  --al-radius-sm: 8px;
  --al-radius-md: 12px;
  --al-border: 0.5px solid #D3D1C7;
}


/* --------------------------------------------------------------------------
   1. HOMEPAGE BODY / PAGE WRAPPER
   -------------------------------------------------------------------------- */
.page-template-default .site-content,
.home .site-content {
  background-color: var(--al-parchment);
}


/* --------------------------------------------------------------------------
   2. SHARED UTILITIES
   -------------------------------------------------------------------------- */

/* Section wrapper — dùng class này trên mỗi GB Container ngoài cùng */
.al-section {
  padding: 64px 0;
}

.al-section--sm {
  padding: 48px 0;
}

.al-section--bg-white {
  background: #FFFFFF;
}

.al-section--bg-ivory {
  background: var(--al-ivory);
}

.al-section--bg-parchment {
  background: var(--al-parchment);
}

/* Section header pattern: H2 + subtitle */
.al-section__header {
  margin-bottom: 32px;
}

.al-section__header h2 {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--al-ink);
  margin: 0 0 8px;
}

.al-section__header p {
  font-family: var(--al-font-body);
  font-size: 16px;
  color: var(--al-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}

/* Section "see all" link — dùng cuối mỗi section */
.al-section__cta {
  text-align: center;
  margin-top: 40px;
}

/* Buttons */
.al-btn {
  font-family: var(--al-font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: var(--al-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
  border: none;
  line-height: 1;
}

.al-btn:hover {
  text-decoration: none;
}

.al-btn--primary {
  background: var(--al-ink);
  color: var(--al-parchment);
}

.al-btn--primary:hover {
  background: #444441;
  color: var(--al-parchment);
}

.al-btn--secondary {
  background: transparent;
  color: var(--al-ink);
  border: 0.5px solid var(--al-ink);
}

.al-btn--secondary:hover {
  background: var(--al-ink);
  color: var(--al-parchment);
}

.al-btn--amber {
  background: var(--al-amber);
  color: var(--al-parchment);
}

.al-btn--amber:hover {
  background: #6B3F09;
  color: var(--al-parchment);
}

/* Overline label (nhỏ, uppercase, muted — dùng trên H2) */
.al-overline {
  font-family: var(--al-font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--al-text-muted);
  display: block;
  margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   3. HERO SECTION (Section 1)
   GB: Container (full-width, bg parchment, padding 80px 0 64px)
     > Container (max-width 680px, center, text-align center)
       > Text (H1) > Text (subtitle) > Buttons (2)
   -------------------------------------------------------------------------- */
.al-hero {
  padding: 80px 0 64px;
  text-align: center;
  background: var(--al-parchment);
}

.al-hero h1 {
  font-family: var(--al-font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--al-ink);
  max-width: 680px;
  margin: 0 auto 16px;
}

.al-hero__subtitle {
  font-family: var(--al-font-body);
  font-size: 17px;
  color: var(--al-text-secondary);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 32px;
}

.al-hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   4. SHOP BY GENRE (Section 2 — Layer 2B Genre Hubs)
   GB: Container > Text (H2) > Grid (5 cols, gap 16px)
     > 5x Container (mỗi genre 1 card)
   -------------------------------------------------------------------------- */
.al-genre-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.al-genre-card {
  position: relative;
  border-radius: var(--al-radius-md);
  padding: 36px 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.al-genre-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(44, 44, 42, 0.08);
  text-decoration: none;
}

.al-genre-card__name {
  font-family: var(--al-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 4px;
}

.al-genre-card__tagline {
  font-family: var(--al-font-body);
  font-size: 13px;
  color: var(--al-text-secondary);
}

/* Genre accent backgrounds — extended palette at 12% opacity */
.al-genre-card--romance   { background: rgba(196, 144, 138, 0.12); border: 0.5px solid rgba(196, 144, 138, 0.25); }
.al-genre-card--fantasy   { background: rgba(139, 159, 123, 0.12); border: 0.5px solid rgba(139, 159, 123, 0.25); }
.al-genre-card--horror    { background: rgba(107, 123, 141, 0.12); border: 0.5px solid rgba(107, 123, 141, 0.25); }
.al-genre-card--classics  { background: rgba(184, 112, 75, 0.12);  border: 0.5px solid rgba(184, 112, 75, 0.25);  }
.al-genre-card--scifi     { background: rgba(133, 79, 11, 0.10);   border: 0.5px solid rgba(133, 79, 11, 0.18);   }


/* --------------------------------------------------------------------------
   5. SHOP BY DESIGN STYLE (Section 3 — Layer 2A Design Hubs)
   GB: Container (bg white) > Text (H2) > Grid (3 cols, gap 16px)
     > 6x Container (mỗi theme 1 card)
   -------------------------------------------------------------------------- */
.al-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.al-theme-card {
  border: var(--al-border);
  border-radius: var(--al-radius-md);
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  display: block;
  background: #FFFFFF;
}

.al-theme-card:hover {
  border-color: var(--al-amber);
  transform: translateY(-2px);
  text-decoration: none;
}

.al-theme-card__icon {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
  line-height: 1;
}

.al-theme-card__name {
  font-family: var(--al-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 4px;
}

.al-theme-card__desc {
  font-family: var(--al-font-body);
  font-size: 13px;
  color: var(--al-text-secondary);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   6. SHOP BY PRODUCT TYPE (Section 4 — Layer 1 Product Hub)
   GB: Container > Text (H2) > Grid (3 cols, gap 20px)
     > 3x Container (Shirts / Hoodies / Sweatshirts)
   Mỗi card = image + product type name + CTA
   -------------------------------------------------------------------------- */
.al-product-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.al-product-type-card {
  position: relative;
  border-radius: var(--al-radius-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #FFFFFF;
  border: var(--al-border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.al-product-type-card:hover {
  border-color: var(--al-amber);
  transform: translateY(-2px);
  text-decoration: none;
}

.al-product-type-card__img {
  aspect-ratio: 4 / 3;
  background: var(--al-stone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--al-text-muted);
  overflow: hidden;
}

.al-product-type-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.al-product-type-card__info {
  padding: 20px;
  text-align: center;
}

.al-product-type-card__name {
  font-family: var(--al-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 6px;
}

.al-product-type-card__desc {
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-text-secondary);
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   7. FEATURED PRODUCTS (Section 5 — 4-6 curated, hand-picked)
   GB: Container > Text (H2) > Grid (4 cols, gap 20px)
     > WooCommerce product blocks hoặc GB Query Loop
   -------------------------------------------------------------------------- */
.al-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.al-product-card {
  background: #FFFFFF;
  border: var(--al-border);
  border-radius: var(--al-radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  display: block;
}

.al-product-card:hover {
  border-color: var(--al-amber);
  transform: translateY(-2px);
  text-decoration: none;
}

.al-product-card__img {
  aspect-ratio: 1;
  background: var(--al-stone);
  overflow: hidden;
}

.al-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.al-product-card:hover .al-product-card__img img {
  transform: scale(1.03);
}

.al-product-card__info {
  padding: 14px 16px;
}

.al-product-card__title {
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 4px;
  line-height: 1.4;
}

.al-product-card__price {
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-amber);
  font-weight: 500;
}

.al-product-card__category {
  font-family: var(--al-font-body);
  font-size: 12px;
  color: var(--al-text-muted);
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   8. SUBJECT PAGES (Section 6 — Layer 3)
   GB: Container > Text (H2) > Grid (auto-fit, min 150px)
     > Nx link pills/cards (popular subjects: spicy, enemies-to-lovers, jane austen...)
   -------------------------------------------------------------------------- */
.al-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.al-subject-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border: var(--al-border);
  border-radius: var(--al-radius-sm);
  background: #FFFFFF;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
}

.al-subject-pill:hover {
  border-color: var(--al-amber);
  background: var(--al-ivory);
  text-decoration: none;
}

.al-subject-pill__name {
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--al-ink);
}

.al-subject-pill__parent {
  font-family: var(--al-font-body);
  font-size: 11px;
  color: var(--al-text-muted);
  display: block;
  margin-top: 2px;
}


/* --------------------------------------------------------------------------
   9. CUSTOM PRODUCTS (Section 7 — Layer 4)
   GB: Container (bg ivory, border-radius 12px, padding 48px)
     > Grid (2 cols: text + image/preview)
   -------------------------------------------------------------------------- */
.al-custom-section {
  background: var(--al-ivory);
  border-radius: var(--al-radius-md);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.al-custom-section h2 {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 12px;
}

.al-custom-section p {
  font-family: var(--al-font-body);
  font-size: 16px;
  color: var(--al-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.al-custom-section__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.al-custom-section__features li {
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-text-secondary);
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
}

.al-custom-section__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--al-amber);
  font-weight: 500;
}

.al-custom-section__img {
  border-radius: var(--al-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--al-stone);
}

.al-custom-section__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   10. GIFT HUB (Section 8 — Layer 5)
   GB: Container > Text (H2) > pill links to gift sub-pages
   -------------------------------------------------------------------------- */
.al-gift-section {
  background: var(--al-ivory);
  border-radius: var(--al-radius-md);
  padding: 48px;
}

.al-gift-section h2 {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 8px;
}

.al-gift-section > p {
  font-family: var(--al-font-body);
  font-size: 16px;
  color: var(--al-text-secondary);
  margin-bottom: 20px;
  max-width: 480px;
}

.al-gift-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.al-gift-pill {
  border: var(--al-border);
  padding: 10px 20px;
  border-radius: 24px;
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--al-text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  background: #FFFFFF;
}

.al-gift-pill:hover {
  border-color: var(--al-amber);
  color: var(--al-amber);
  text-decoration: none;
}

.al-gift-pill--accent {
  border-color: var(--al-amber);
  color: var(--al-amber);
  font-weight: 500;
}

.al-gift-pill--accent:hover {
  background: var(--al-amber);
  color: var(--al-parchment);
}


/* --------------------------------------------------------------------------
   11. GUIDES / RESOURCES (Section 9 — Layer 6)
   GB: Container > Text (H2) > Grid (3 cols or 2 cols)
     > Nx guide card (title + short desc + link)
   -------------------------------------------------------------------------- */
.al-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.al-guide-card {
  background: #FFFFFF;
  border: var(--al-border);
  border-radius: var(--al-radius-md);
  padding: 24px;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.al-guide-card:hover {
  border-color: var(--al-amber);
  transform: translateY(-2px);
  text-decoration: none;
}

.al-guide-card__icon {
  font-size: 24px;
  margin-bottom: 12px;
  display: block;
  line-height: 1;
}

.al-guide-card__title {
  font-family: var(--al-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 6px;
  line-height: 1.4;
}

.al-guide-card__desc {
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.al-guide-card__link {
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--al-amber);
}


/* --------------------------------------------------------------------------
   12. BRAND STORY + TRUST SIGNALS (Section 10)
   GB: Container > Grid (2 cols: 1.2fr + 0.8fr)
   -------------------------------------------------------------------------- */
.al-brand-story {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

.al-brand-story__text h2 {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-ink);
  margin-bottom: 16px;
}

.al-brand-story__text p {
  font-family: var(--al-font-body);
  font-size: 16px;
  color: var(--al-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}

.al-brand-story__text a {
  font-weight: 500;
  color: var(--al-amber);
}

.al-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.al-trust-item {
  text-align: center;
  padding: 24px 16px;
  background: var(--al-ivory);
  border-radius: var(--al-radius-sm);
}

.al-trust-item__icon {
  font-size: 28px;
  color: var(--al-amber);
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}

.al-trust-item__label {
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--al-ink);
}

.al-trust-item__detail {
  font-family: var(--al-font-body);
  font-size: 12px;
  color: var(--al-text-secondary);
  margin-top: 2px;
}


/* --------------------------------------------------------------------------
   13. NEWSLETTER / SUBSCRIPTION (Section 11 — FluentForm)
   GB: Container (bg ink, text parchment, border-radius 12px, padding 48px)
     > Grid (2 cols: text + form)
   Shortcode: [fluentform id="2"]
   -------------------------------------------------------------------------- */
.al-subscribe {
  background: var(--al-ink);
  border-radius: var(--al-radius-md);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.al-subscribe h2 {
  font-family: var(--al-font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--al-parchment);
  margin-bottom: 12px;
}

.al-subscribe p {
  font-family: var(--al-font-body);
  font-size: 16px;
  color: #B4B2A9;
  line-height: 1.6;
}

/* FluentForm overrides inside .al-subscribe */
.al-subscribe .ff-el-form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--al-radius-sm);
  color: var(--al-parchment);
  font-family: var(--al-font-body);
  font-size: 15px;
  padding: 12px 16px;
}

.al-subscribe .ff-el-form-control::placeholder {
  color: #888780;
}

.al-subscribe .ff-el-form-control:focus {
  border-color: var(--al-amber);
  outline: none;
  box-shadow: 0 0 0 2px rgba(133, 79, 11, 0.3);
}

.al-subscribe .ff-btn-submit {
  background: var(--al-amber);
  color: var(--al-parchment);
  font-family: var(--al-font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: var(--al-radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
}

.al-subscribe .ff-btn-submit:hover {
  background: #6B3F09;
}

.al-subscribe .ff-el-group {
  margin-bottom: 12px;
}

.al-subscribe .ff-el-input--label {
  display: none;  /* Hide labels, use placeholders */
}

/* Privacy note under form */
.al-subscribe__privacy {
  font-family: var(--al-font-body);
  font-size: 12px;
  color: #888780;
  margin-top: 12px;
}


/* --------------------------------------------------------------------------
   14. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .al-genre-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .al-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .al-custom-section {
    padding: 36px;
    gap: 32px;
  }

  .al-subscribe {
    padding: 36px;
    gap: 32px;
  }
}

/* Tablet small — 768px */
@media (max-width: 768px) {
  .al-section {
    padding: 48px 0;
  }

  .al-hero {
    padding: 56px 0 48px;
  }

  .al-hero h1 {
    font-size: 26px;
  }

  .al-genre-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Last genre card span full width nếu lẻ */
  .al-genre-grid > :last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .al-theme-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .al-product-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Third product type card below */
  .al-product-type-grid > :last-child:nth-child(odd) {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
  }

  .al-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .al-subject-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .al-custom-section {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }

  .al-custom-section__img {
    order: -1;  /* Image on top on mobile */
  }

  .al-gift-section {
    padding: 32px 24px;
  }

  .al-guides-grid {
    grid-template-columns: 1fr 1fr;
  }

  .al-brand-story {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .al-subscribe {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
}

/* Mobile — 480px */
@media (max-width: 480px) {
  .al-hero h1 {
    font-size: 24px;
  }

  .al-hero__subtitle {
    font-size: 15px;
  }

  .al-hero__cta {
    flex-direction: column;
    align-items: center;
  }

  .al-hero__cta .al-btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  .al-genre-grid {
    grid-template-columns: 1fr 1fr;
  }

  .al-theme-grid {
    grid-template-columns: 1fr;
  }

  .al-product-type-grid {
    grid-template-columns: 1fr;
  }

  .al-product-type-grid > :last-child:nth-child(odd) {
    max-width: 100%;
    grid-column: span 1;
  }

  .al-products-grid {
    grid-template-columns: 1fr 1fr;
  }

  .al-subject-grid {
    grid-template-columns: 1fr 1fr;
  }

  .al-guides-grid {
    grid-template-columns: 1fr;
  }

  .al-trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .al-section__header h2 {
    font-size: 22px;
  }

  .al-gift-pills {
    gap: 8px;
  }

  .al-gift-pill {
    font-size: 13px;
    padding: 8px 16px;
  }
}