/*
Theme Name: AutoArty Drive
Template:   generatepress
Version:    1.0.0
Description: Automotive-inspired child theme for AutoArty. Carbon-black base, amber headlight accents, Rajdhani racing typography. Built on GeneratePress.
Author:     AutoArty
*/

/* ============================================================
   DESIGN TOKENS — Automotive palette
   ============================================================ */
:root {
  /* Core palette */
  --aa-bg:           #0f0f14;       /* carbon black */
  --aa-surface:      #16161f;       /* panel dark */
  --aa-surface-2:    #1e1e2c;       /* raised surface */
  --aa-navy:         #1a1a2e;       /* deep navy (tools section bg) */

  /* Accent — headlight amber / gold */
  --aa-amber:        #e8a020;
  --aa-amber-light:  #f5bc4a;
  --aa-amber-dark:   #b57a10;

  /* Chrome / steel */
  --aa-chrome:       #8a9bb0;
  --aa-chrome-light: #b8c8d8;

  /* Text */
  --aa-white:        #f0f4f8;
  --aa-text:         #cdd6e0;
  --aa-muted:        #6e7f92;

  /* Borders */
  --aa-border:       rgba(232, 160, 32, 0.28);
  --aa-border-dim:   rgba(255, 255, 255, 0.07);

  /* Shadows */
  --aa-shadow:       0 4px 28px rgba(0, 0, 0, 0.55);
  --aa-glow-amber:   0 0 24px rgba(232, 160, 32, 0.18);

  /* Shape */
  --aa-radius:       5px;
  --aa-radius-lg:    10px;

  /* Transitions */
  --aa-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--aa-bg);
  color: var(--aa-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

/* ============================================================
   TYPOGRAPHY — Rajdhani for all headings
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title,
.widget-title,
.site-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--aa-white);
  line-height: 1.15;
}

h1 { font-size: clamp(2rem,   5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
h4 { font-size: 1.25rem; }

p { color: var(--aa-text); margin-bottom: 1.25rem; }

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--aa-amber);
  text-decoration: none;
  transition: color 0.2s var(--aa-ease);
}
a:hover { color: var(--aa-amber-light); }

/* ============================================================
   SELECTION & SCROLLBAR
   ============================================================ */
::selection { background: var(--aa-amber); color: #000; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--aa-bg); }
::-webkit-scrollbar-thumb {
  background: var(--aa-amber-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--aa-amber); }

/* ============================================================
   SITE WRAPPER
   ============================================================ */
.site { background: var(--aa-bg); }

/* ============================================================
   GENERATEPRESS CONTENT WRAPPERS — override white backgrounds
   ============================================================ */
.inside-article,
.entry-content,
.page-content,
.site-content,
.content-area,
#primary,
.inside-page-header,
.generate-page-header-wrap,
.entry,
.hentry,
.type-page,
.type-post {
  background: transparent !important;
}

/* Separate content container GP uses */
.container .inside-article { background: transparent !important; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header,
.site-header.has-sticky,
.sticky-enabled .site-header {
  background-color: rgba(10, 10, 16, 0.97) !important;
  border-bottom: 2px solid var(--aa-amber) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px);
}

/* Logo / site title */
.site-branding .site-title a,
.site-branding .site-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--aa-white) !important;
  transition: color 0.2s var(--aa-ease) !important;
}
.site-branding .site-title a:hover { color: var(--aa-amber) !important; }

.site-description { color: var(--aa-muted) !important; font-size: 0.8rem !important; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.main-navigation,
.nav-primary {
  background: transparent !important;
}

.main-navigation ul li a,
.nav-primary ul li a {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--aa-chrome-light) !important;
  transition: color 0.2s var(--aa-ease) !important;
  padding: 0.5em 1em !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a {
  color: var(--aa-amber) !important;
}

/* Dropdown */
.main-navigation ul .sub-menu,
.main-navigation ul .children {
  background: var(--aa-surface) !important;
  border: 1px solid var(--aa-border) !important;
  border-top: 2px solid var(--aa-amber) !important;
  box-shadow: var(--aa-shadow) !important;
  border-radius: 0 0 var(--aa-radius) var(--aa-radius) !important;
}

.main-navigation ul .sub-menu li a,
.main-navigation ul .children li a {
  color: var(--aa-text) !important;
  border-bottom: 1px solid var(--aa-border-dim) !important;
}

.main-navigation ul .sub-menu li a:hover {
  background: var(--aa-surface-2) !important;
  color: var(--aa-amber) !important;
}

/* Mobile hamburger */
button.menu-toggle,
.menu-toggle {
  color: var(--aa-white) !important;
  background: transparent !important;
  border: 1px solid var(--aa-border) !important;
  border-radius: var(--aa-radius) !important;
  padding: 0.4rem 0.7rem !important;
  transition: border-color 0.2s ease !important;
}
button.menu-toggle:hover { border-color: var(--aa-amber) !important; }

/* ============================================================
   HERO / COVER BLOCK
   ============================================================ */
.wp-block-cover {
  position: relative;
}

/* Amber speed-line at hero bottom */
.wp-block-cover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--aa-amber-dark) 20%,
    var(--aa-amber) 50%,
    var(--aa-amber-dark) 80%,
    transparent 100%
  );
  z-index: 10;
}

/* ============================================================
   SEARCH BLOCK
   ============================================================ */
.wp-block-search__label {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.04em !important;
  color: var(--aa-white) !important;
}

.wp-block-search__inside-wrapper {
  border: 1px solid var(--aa-border) !important;
  border-radius: var(--aa-radius) !important;
  overflow: hidden !important;
  background: var(--aa-surface) !important;
  box-shadow: var(--aa-glow-amber) !important;
}

.wp-block-search__input {
  background: transparent !important;
  border: none !important;
  color: var(--aa-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.1rem !important;
  outline: none !important;
}

.wp-block-search__input::placeholder { color: var(--aa-muted) !important; }

.wp-block-search__button {
  background: var(--aa-amber) !important;
  color: #0a0a0a !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0.85rem 1.6rem !important;
  cursor: pointer !important;
  transition: background 0.2s var(--aa-ease) !important;
}
.wp-block-search__button:hover { background: var(--aa-amber-light) !important; }

/* ============================================================
   BUTTONS & CTA
   ============================================================ */
.wp-block-button__link,
.wp-block-button a,
.button,
input[type="submit"],
button[type="submit"] {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--aa-radius) !important;
  transition: background 0.2s var(--aa-ease), transform 0.15s ease, box-shadow 0.2s ease !important;
}

/* Primary amber button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--aa-amber) !important;
  color: #0a0a0a !important;
  border: 2px solid var(--aa-amber) !important;
  padding: 0.65rem 1.75rem !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--aa-amber-light) !important;
  border-color: var(--aa-amber-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--aa-glow-amber) !important;
  color: #0a0a0a !important;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--aa-amber) !important;
  border: 2px solid var(--aa-amber) !important;
  padding: 0.65rem 1.75rem !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--aa-amber) !important;
  color: #0a0a0a !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   QUERY LOOP — Article Cards
   ============================================================ */

/* The wp:group inside each query post has inline background-color:#ffffff —
   !important in author stylesheet beats inline styles. */
.wp-block-post .wp-block-group,
.wp-block-post-template .wp-block-group,
.wp-block-query .wp-block-group {
  background-color: var(--aa-surface) !important;
  border-color: var(--aa-border-dim) !important;
}

.wp-block-post .wp-block-group:hover {
  background-color: var(--aa-surface-2) !important;
  border-color: var(--aa-border) !important;
}
.wp-block-post-template {
  gap: 1.5rem !important;
}

.wp-block-post {
  background: var(--aa-surface) !important;
  border: 1px solid var(--aa-border-dim) !important;
  border-radius: var(--aa-radius-lg) !important;
  overflow: hidden;
  transition: transform 0.28s var(--aa-ease),
              box-shadow 0.28s var(--aa-ease),
              border-color 0.28s var(--aa-ease) !important;
}

.wp-block-post:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--aa-shadow), var(--aa-glow-amber) !important;
  border-color: var(--aa-border) !important;
}

/* Post featured image */
.wp-block-post-featured-image img {
  transition: transform 0.4s var(--aa-ease) !important;
}
.wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.04) !important;
}

/* Post title */
.wp-block-post-title a,
.wp-block-post .entry-title a {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: var(--aa-white) !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s var(--aa-ease) !important;
}
.wp-block-post-title a:hover,
.wp-block-post .entry-title a:hover {
  color: var(--aa-amber) !important;
}

/* Post meta */
.wp-block-post-date,
.wp-block-post-author,
.post-date,
.posted-on {
  color: var(--aa-chrome) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* Post excerpt */
.wp-block-post-excerpt__excerpt,
.wp-block-post .entry-summary {
  color: var(--aa-muted) !important;
  font-size: 0.9rem !important;
}

/* Read more link */
.wp-block-post-excerpt__more-link,
.read-more,
.more-link {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--aa-amber) !important;
}
.wp-block-post-excerpt__more-link:hover { color: var(--aa-amber-light) !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.page-numbers {
  background: var(--aa-surface) !important;
  color: var(--aa-text) !important;
  border: 1px solid var(--aa-border-dim) !important;
  border-radius: var(--aa-radius) !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover,
.page-numbers:hover,
.page-numbers.current {
  border-color: var(--aa-amber) !important;
  color: var(--aa-amber) !important;
}

/* ============================================================
   CATEGORY GRID (HTML block / GenerateBlocks)
   ============================================================ */

/* GenerateBlocks containers used as category cards */
.gb-container {
  transition: transform 0.24s var(--aa-ease),
              box-shadow 0.24s var(--aa-ease),
              border-color 0.24s var(--aa-ease);
}

.gb-container a {
  color: inherit !important;
  transition: color 0.2s ease !important;
}

/* ============================================================
   SECTION HEADINGS — amber underline accent
   ============================================================ */
.wp-block-heading + .wp-block-separator,
.section-label {
  border-color: var(--aa-amber) !important;
}

/* ============================================================
   SIDEBAR / WIDGETS
   ============================================================ */
.sidebar .widget,
.widget-area .widget {
  background: var(--aa-surface) !important;
  border: 1px solid var(--aa-border-dim) !important;
  border-radius: var(--aa-radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.widget-title {
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--aa-amber) !important;
  margin-bottom: 1rem !important;
}

.widget ul li {
  border-bottom: 1px solid var(--aa-border-dim) !important;
  padding: 0.4rem 0 !important;
  color: var(--aa-text) !important;
}

/* ============================================================
   SINGLE POST / ENTRY
   ============================================================ */
.entry-content {
  color: var(--aa-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--aa-border-dim);
}

.entry-content blockquote {
  border-left: 4px solid var(--aa-amber) !important;
  background: var(--aa-surface) !important;
  padding: 1rem 1.5rem !important;
  color: var(--aa-chrome-light) !important;
  border-radius: 0 var(--aa-radius) var(--aa-radius) 0 !important;
}

.entry-content code,
.entry-content pre {
  background: var(--aa-surface-2) !important;
  color: var(--aa-amber-light) !important;
  border: 1px solid var(--aa-border-dim) !important;
  border-radius: var(--aa-radius) !important;
}

/* ============================================================
   TABLE
   ============================================================ */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  background: var(--aa-navy) !important;
  color: var(--aa-amber) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--aa-border) !important;
}
td {
  color: var(--aa-text) !important;
  padding: 0.65rem 1rem !important;
  border: 1px solid var(--aa-border-dim) !important;
}
tr:nth-child(even) td { background: var(--aa-surface) !important; }
tr:hover td { background: var(--aa-surface-2) !important; }

/* ============================================================
   FORM INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: var(--aa-surface) !important;
  color: var(--aa-text) !important;
  border: 1px solid var(--aa-border-dim) !important;
  border-radius: var(--aa-radius) !important;
  padding: 0.65rem 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--aa-amber) !important;
  box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.15) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0a0a0a !important;
  border-top: 2px solid var(--aa-amber) !important;
  color: var(--aa-muted) !important;
  padding: 2rem 0 !important;
}

.site-footer a { color: var(--aa-chrome) !important; }
.site-footer a:hover { color: var(--aa-amber) !important; }

/* ============================================================
   GENERATEPRESS VARIABLE OVERRIDES
   ============================================================ */
.site {
  --gen-link-color:                  var(--aa-amber);
  --gen-link-color-hover:            var(--aa-amber-light);
  --gen-button-background-color:     var(--aa-amber);
  --gen-button-color:                #0a0a0a;
  --gen-button-background-hover:     var(--aa-amber-light);
  --gen-header-bg-color:             #0a0a10;
  --gen-navigation-background-color: transparent;
  --gen-navigation-text-color:       var(--aa-chrome-light);
  --gen-footer-background-color:     #0a0a0a;
  --gen-footer-color:                var(--aa-muted);
  --gen-global-color-1:              var(--aa-amber);
  --gen-global-color-2:              var(--aa-navy);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
  h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .site-header { padding: 0.6rem 1rem !important; }

  .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
}