/*
Theme Name: hai01
Theme URI: https://turnkeywebsites.net/themes/hai01
Author: HaiTran
Author URI: https://turnkeywebsites.net
Description: A clean, flat, responsive two-sidebar WordPress theme built for WordPress.org standards. Includes Customizer options (colors, typography, layout), primary & footer menus, and accessible markup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hai01
Tags: blog, two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, theme-options, translation-ready, accessibility-ready

License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== Base Reset & Variables ===== */
:root {
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-muted: #6b7280;
  --color-primary: #1969de;
  --color-accent: #f59e0b;
  --container-width: 1200px;
  --radius: 14px;
  --gap: 24px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
                "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-heading: var(--font-body);
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 16px;
}

/* ===== Accessibility ===== */
.screen-reader-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.screen-reader-text:focus {
  position: static;
  width: auto; height: auto;
  padding: 8px 10px;
  background: #fff; outline: 2px solid var(--color-primary);
}

/* ===== Layout ===== */
.wrap {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.branding {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.site-title {
  font-size: 1.25rem; margin: 0; font-weight: 700;
}
.site-title a { color: inherit; text-decoration: none; }
.site-description { margin: 0; color: var(--color-muted); font-size: .95rem; }

/* ===== Navigation ===== */
#nav-toggle {
  display: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}
.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0 16px;
}
.primary-menu,
.footer-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.primary-menu a,
.footer-menu a {
  text-decoration: none;
  color: #111827;
  padding: 8px 12px;
  border-radius: 10px;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.footer-menu a:hover {
  background: #eff6ff;
  color: var(--color-primary);
}

/* Mobile nav */
@media (max-width: 800px) {
  #nav-toggle { display: inline-block; }
  .site-nav .menu-container { display: none; }
  .site-nav.open .menu-container { display: block; }
  .primary-menu { flex-direction: column; align-items: stretch; }
}

/* ===== Main Grid: Two Sidebars ===== */
.site-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: var(--gap);
  margin-top: 24px;
}
@media (max-width: 1100px) {
  .site-grid { grid-template-columns: 240px 1fr 240px; }
}
@media (max-width: 900px) {
  .site-grid { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  .content { order: 1; }
}

.sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 16px;
}
.widget { margin: 0 0 18px; }
.widget-title { margin: 0 0 10px; font-weight: 700; font-size: 1rem; }

.content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 24px;
}

/* ===== Posts ===== */
.entry-header h1, .entry-header h2, .entry-header h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
}
.entry-title { margin: 0 0 4px; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.entry-meta { color: var(--color-muted); font-size: .9rem; margin-bottom: 12px; }
.entry-content { font-size: 1rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; }

/* Cards on blog index */
.post-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 20px;
  transition: transform .08s ease, box-shadow .08s ease;
}
.post-card:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.post-card .entry-title { font-size: 1.25rem; }
.read-more {
  display: inline-block; margin-top: 8px;
  color: #fff; background: var(--color-primary);
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
}
.read-more:hover { background: #1559bb; }

/* Pagination */
.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-block; padding: 8px 12px; border-radius: 8px;
  border: 1px solid #e5e7eb; text-decoration: none; color: #111827;
}
.pagination .current, .pagination .page-numbers:hover {
  background: #eff6ff; color: var(--color-primary);
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 28px; padding: 18px 0;
  color: var(--color-muted);
}
.site-footer small { display:block; margin-top: 6px; }

/* ===== Customizer-driven utility classes ===== */
.hide-on-mobile { display: block; }
@media (max-width: 900px) {
  .hide-on-mobile { display: none !important; }
}

/* ===== Builder Templates ===== */
.builder-full, .elementor-page, .fl-builder-content, .gs-page { max-width: 100%; padding: 0; margin: 0; }
.elementor-section, .fl-row, .gs-section { margin: 0 auto; max-width: var(--container-width); }

/* ===== Sidebar visibility modifiers ===== */
.site-grid.hide-left  { grid-template-columns: 1fr 280px; }
.site-grid.hide-right { grid-template-columns: 280px 1fr; }
.site-grid.hide-both  { grid-template-columns: 1fr; }
.sidebar.is-hidden    { display: none !important; }