/*
Theme Name: Viet Auto Collision
Theme URI: https://rank4sure.com
Author: Mehmood Gujjar Kasana
Author URI: https://rank4sure.com
Description: Professional custom WordPress theme for Viet Auto Collision - Viet Auto Collision in Garden Grove, CA. Built for performance, SEO, and local business visibility.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: https://rank4sure.com
Text Domain: viet-auto-collision
Tags: auto-body, collision-repair, local-business, responsive
*/

/*
 * Design tokens, fonts, base reset and global h1/h2. The services hub and
 * service sub-page templates read these variables. Old section styles live
 * in assets/css/legacy.css until the remaining inner pages are rebuilt.
 */

/* ============================================================
   FONTS (self-hosted, the only two families in the theme)
   ============================================================ */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/public-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  /* Colors — the only three in the theme. Transparency only via color-mix() of these. */
  --color-red:   #e2050a;
  --color-dark:  #001123;
  --color-white: #fdfdfd;
  /* Light grey section tone: a 4% mix of the two above, same as the Auto Service page. */
  --color-surface-light: color-mix(in srgb, var(--color-dark) 4%, var(--color-white));

  /* Typography — the one place heading and body type is defined */
  --font-heading: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;
  --font-body:    "Public Sans", "Helvetica Neue", sans-serif;
  /* 3.25rem max keeps the home H1 on two lines in its 44rem column at 1440px */
  --h1-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
  --h1-line-height: 1.1;
  --h2-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
  --h2-line-height: 1.15;
  --h3-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --h3-line-height: 1.25;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  1.875rem;
  --font-size-3xl:  2.25rem;
  --font-size-4xl:  3rem;
  --font-size-5xl:  3.75rem;
  --font-size-6xl:  4.5rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 80px;
  --header-height-scroll: 64px;

  /* Effects */
  --shadow-sm:  0 1px 3px color-mix(in srgb, var(--color-dark) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--color-dark) 8%, transparent);
  --shadow-md:  0 4px 12px color-mix(in srgb, var(--color-dark) 15%, transparent), 0 2px 4px color-mix(in srgb, var(--color-dark) 8%, transparent);
  --shadow-lg:  0 10px 30px color-mix(in srgb, var(--color-dark) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-dark) 10%, transparent);
  --shadow-xl:  0 20px 60px color-mix(in srgb, var(--color-dark) 25%, transparent);
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-dark);
  background: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-red);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--color-red); }

ul, ol { list-style: none; }

/* Restore bullets/numbers specifically inside blog post content —
   the global reset above strips them for nav/footer lists, but was
   also unintentionally wiping them out inside .entry-content. */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.5em;
  padding-left: 1.5em;
}
.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }
.entry-content ul ul,
.entry-content ol ul { list-style-type: circle; }
.entry-content ol ol,
.entry-content ul ol { list-style-type: lower-alpha; }
.entry-content li { margin-bottom: 0.5em; }

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
}

/* ============================================================
   HEADINGS — every H1, H2 and H3 on every page
   ============================================================ */
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
}