/*
Theme Name: LandRemoteWork (GeneratePress Child)
Theme URI: https://landremotework.com
Description: Child theme của GeneratePress cho LandRemoteWork — remote job hunting guides. Chứa palette thương hiệu, style nút affiliate và offer box.
Author: LandRemoteWork Team
Author URI: https://landremotework.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lrw-child
*/

/* ==========================================================================
   1. BRAND PALETTE — đồng bộ với thiết kế trang chủ mẫu
   ========================================================================== */
:root {
  /* ============================================================
     BỀ RỘNG NỘI DUNG TOÀN SITE — đổi MỘT số này là xong.
     Áp dụng cho: các section trang chủ, footer, thanh copyright.
     Nên đặt BẰNG với Customizer → Layout → Container → Container
     Width (điều khiển bề rộng header + trang bài viết) để mọi
     thứ thẳng hàng. Gợi ý: 1200px (mặc định) hoặc 1280px.
     ============================================================ */
  --dta-content-width: 1500px;

  --dta-teal: #7C3AED;
  --dta-teal-dark: #5B21B6;
  --dta-teal-pale: #F5F3FF;
  --dta-amber: #059669;
  --dta-amber-pale: #ECFDF5;
  --dta-ink: #1F2937;
  --dta-grey: #6B7280;
  --dta-line: #E5E7EB;
  --dta-soft: #F8FAFC;
  --dta-radius: 14px;
}

/* ==========================================================================
   2. NÚT AFFILIATE (CTA chính) — dùng class "dta-btn" trên link DiscoverCars
   Ví dụ: <a class="dta-btn" href="https://www.discovercars.com/iceland?a_aid=affigo&chan=iceland-guide" rel="sponsored noopener">Compare rental prices in Iceland →</a>
   ========================================================================== */
.dta-btn,
.dta-btn:visited {
  display: inline-block;
  background: var(--dta-teal);
  color: #fff !important;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
  transition: background .15s ease, transform .15s ease;
}
.dta-btn:hover {
  background: var(--dta-teal-dark);
  transform: translateY(-1px);
  color: #fff;
}
/* Biến thể nổi bật (amber) cho CTA cuối bài */
.dta-btn--amber { background: var(--dta-amber); box-shadow: 0 4px 14px rgba(5, 150, 105, .25); }
.dta-btn--amber:hover { background: #047857; }

/* ==========================================================================
   3. OFFER BOX — khối gợi ý đặt xe giữa bài viết
   Dùng trong Gutenberg: Group block với class "dta-offer"
   ========================================================================== */
.dta-offer {
  background: var(--dta-teal-pale);
  border: 1px solid #DDD6FE;
  border-left: 5px solid var(--dta-teal);
  border-radius: var(--dta-radius);
  padding: 24px 28px;
  margin: 32px 0;
}
.dta-offer h4 { margin: 0 0 8px; color: var(--dta-teal-dark); font-size: 19px; }
.dta-offer p { margin: 0 0 16px; color: var(--dta-ink); font-size: 15.5px; }

/* Hộp cảnh báo/mẹo (dùng cho phần bảo hiểm, ZTL, tolls...) */
.dta-tip {
  background: var(--dta-amber-pale);
  border: 1px solid #A7F3D0;
  border-left: 5px solid var(--dta-amber);
  border-radius: var(--dta-radius);
  padding: 18px 24px;
  margin: 28px 0;
  font-size: 15.5px;
}
.dta-tip strong { color: var(--dta-amber); }

/* ==========================================================================
   4. DISCLOSURE — dòng minh bạch affiliate đầu bài
   ========================================================================== */
.dta-disclosure {
  font-size: 13px;
  color: var(--dta-grey);
  border-bottom: 1px solid var(--dta-line);
  padding-bottom: 12px;
  margin-bottom: 20px;
  font-style: italic;
}

/* ==========================================================================
   5. TINH CHỈNH CHUNG
   ========================================================================== */
/* Link trong nội dung */
.entry-content a:not(.dta-btn) { color: var(--dta-teal); }
.entry-content a:not(.dta-btn):hover { color: var(--dta-teal-dark); }

/* Bảng so sánh (bảo hiểm, giá thuê...) */
.entry-content table { border-radius: var(--dta-radius); overflow: hidden; }
.entry-content thead th { background: var(--dta-teal); color: #fff; }
.entry-content tbody tr:nth-child(even) { background: var(--dta-soft); }

/* Ngày "last reviewed" — tín hiệu E-E-A-T */
.dta-updated {
  display: inline-block;
  background: var(--dta-soft);
  border: 1px solid var(--dta-line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  color: var(--dta-grey);
  margin-bottom: 16px;
}

/* ==========================================================================
   6. FOOTER TOÀN SITE — khối nhiều cột (render từ functions.php)
   ========================================================================== */
.dta-footer {
  background: #2E1065;
  color: #C4B5FD;
  padding: 56px 0 40px;
  font-size: 14px;
}
.dta-footer-wrap {
  max-width: var(--dta-content-width, 1500px);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}
.dta-footer h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: .4px;
}
.dta-footer p { max-width: 280px; margin: 0; }
.dta-footer ul { list-style: none; margin: 0; padding: 0; }
.dta-footer li { margin-bottom: 9px; }
.dta-footer a { color: #C4B5FD; text-decoration: none; }
.dta-footer a:hover { color: #fff; }
.dta-footer-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 12px;
}
.dta-footer-brand img { height: 30px; width: auto; }
@media (max-width: 820px) {
  .dta-footer-wrap { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   7. HEADER — sticky + style khớp thiết kế gốc
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dta-line);
}
/* Khi đăng nhập WP, admin bar chiếm 32px trên cùng */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Link menu: đậm vừa, hover chuyển teal */
.main-navigation .main-nav ul li a {
  font-weight: 500;
  color: var(--dta-ink);
  transition: color .15s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--dta-teal);
}
/* Dropdown (menu con) */
.main-navigation ul ul {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  border: 1px solid var(--dta-line);
  overflow: hidden;
}
.main-navigation ul ul li a { font-size: 14px; }

/* Thanh copyright của GP — nhuộm tối cho liền khối với footer */
.site-footer { background: #2E1065 !important; }
.site-info {
  background: #2E1065 !important;
  color: #A78BFA !important;
  text-align: center;
  padding: 20px 24px 32px !important;
  font-size: 12.5px;
  line-height: 1.7;
}
.site-info a { color: #EDE9FE !important; }
.site-info .inside-site-info {
  border-top: 1px solid rgba(255,255,255,.14) !important;
  padding-top: 20px;
  max-width: var(--dta-content-width, 1500px);
  margin: 0 auto;
}