/*
Theme Name: DriveTheAtlas (GeneratePress Child)
Theme URI: https://drivetheatlas.com
Description: Child theme của GeneratePress cho DriveTheAtlas — road trip & car rental guides. Chứa palette thương hiệu, style nút affiliate và offer box.
Author: DriveTheAtlas Team
Author URI: https://drivetheatlas.com
Template: generatepress
Version: 1.2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dta-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: #0F766E;
  --dta-teal-dark: #134E4A;
  --dta-teal-pale: #F0FDFA;
  --dta-amber: #B45309;
  --dta-amber-pale: #FFFBEB;
  --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=YOUR_ID&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(15, 118, 110, 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(180, 83, 9, .25); }
.dta-btn--amber:hover { background: #92400E; }

/* ==========================================================================
   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 #99F6E4;
  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 #FDE68A;
  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: #0B3A36;
  color: #B9D8D4;
  padding: 56px 0 40px;
  font-size: 14px;
}
.dta-footer-wrap {
  max-width: var(--dta-content-width, 1200px);
  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: #B9D8D4; 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; }
}

/* Thanh copyright của GP — nhuộm tối cho liền khối với footer */
.site-footer { background: #0B3A36 !important; }
.site-info {
  background: #0B3A36 !important;
  color: #8FBAB5 !important;
  text-align: center;
  padding: 20px 24px 32px !important;
  font-size: 12.5px;
  line-height: 1.7;
}
.site-info a { color: #CCFBF1 !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, 1200px);
  margin: 0 auto;
}