/* ==========================================================================
   VENDOR STYLES — Guidance for humans & automated agents (AIs)

   Summary
   - tokens.css is the single source of truth for colors, spacing, radii,
     shadows, breakpoints and many semantic tokens. Edit tokens.css to
     change the overall site theme.
   - styles.css contains the shared base styles and UI components (buttons,
     grids, forms, typography, responsive rules). Do NOT duplicate those
     core components in page-level CSS.
   - This file (`vendor/styles.css`) must contain only vendor-page-specific
     overrides and visual tweaks that are unique to vendor pages.
     Examples: page hero gradients, vendor callout treatments, logo sizing
     rules that only apply on vendor pages.

   Guidelines (follow these to keep the codebase consistent)
   1) Site-wide theme changes: edit `g2g-namecheap/tokens.css` -> the `:root`
      variables. That will re-theme all pages that import tokens.css.
   2) Page-scoped tweaks: set variables on a body class (e.g.
         body.vendor-page { --brand-1: #....; --highlight: #....; }
      or add a theme class (e.g. body.theme-cool) and toggle it via HTML/JS.
   3) Avoid hard-coded colors, spacings, radii or shadows here. If a new
      token is needed, add it to `tokens.css` and then reference it here.
   4) Do not re-implement shared components (cards, grids, forms, buttons,
      .submit-btn, etc.) — update ../styles.css instead if a global change
      is required.
   5) Data-URI or inline SVGs with embedded color hex codes do NOT inherit
      CSS variables. Convert to inline SVG (so you can use `fill="currentColor"`
      or CSS variables) if you want them to follow tokens.
   6) Keep selector specificity low. Prefer variable-driven styling and
      scope changes under a body class (body.vendor-page or .vendors-section).
   7) When adding documentation for new tokens or patterns, update tokens.css
      comments so future contributors (and AIs) can find tokens quickly.

   Quick examples
   - Global theme change:
       Edit `g2g-namecheap/tokens.css` -> :root { --brand-1: #0b69ff; ... }
   - Page-only change:
       In this file or in a page-scoped file:
         body.vendor-page { --brand-1: #8b4513; --highlight: #ff8c00; }

   Automation notes for AIs
   - For broad rethemes: change tokens.css only; do not modify page-level
     component rules unless a page needs a specific override.
   - For converting hard-coded colors: replace them with token variables and
     add missing tokens to tokens.css.
   - For visible honeypot issues or accessibility fixes: prefer updating
     ../styles.css (shared utilities) so all pages benefit.

   =========================================================================*/

/* ------------------------------------------------------------------
   vendor/styles.css
   Purpose: Vendor-specific overrides only. The main site styles live
   in ../styles.css — this file contains theme tokens and page-level
   overrides used exclusively on vendor pages.
   ------------------------------------------------------------------ */

/* Vendor design tokens (scoped to vendor pages) */
/* Vendor tokens: page-scoped overrides
   Tokens are defined globally in tokens.css; keep vendor-specific
   overrides scoped to the body so they don't affect other pages. */
@import url("../styles.css");

/* ---------------------------
   Vendor / Page Hero
   - Reuses .hero/.hero-content from main stylesheet but applies
     a vendor color palette and a reduced min-height for these pages.
     Updated to match the homepage hero colors/pattern (kept local to
     vendor pages so this change doesn't alter global components).
   --------------------------- */
.vendor-hero,
.page-hero {
    /* Use token-driven vendor palette so vendor pages follow the site theme */
    background: var(
        --hero-gradient,
        linear-gradient(
            135deg,
            var(--accent-1) 0%,
            var(--brand-1) 50%,
            var(--accent-2) 100%
        )
    );
    min-height: 30vh; /* vendor pages use a shorter hero */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
}

/* subtle patterned overlay for vendor hero (non-critical decorative)
   Using the same tie-dye decorative pattern as homepage hero so overlays
   and color accents match exactly. */
.vendor-hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* patterned overlay tuned to the new festival palette */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="tie-dye" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="8" fill="%23E2A23A" opacity="0.16"/><circle cx="5" cy="5" r="3" fill="%236B3F26" opacity="0.12"/><circle cx="15" cy="15" r="4" fill="%237FA335" opacity="0.12"/></pattern></defs><rect width="100%" height="100%" fill="url(%23tie-dye)"/></svg>')
        repeat;
    /* Use a similar opacity to the homepage hero overlay for consistent density */
    opacity: var(--vendor-hero-overlay, 0.45);
    pointer-events: none;
}

/* hero content sizing for vendor pages */
.vendor-hero .hero-content,
.page-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 2rem;
    margin: 0 1rem;
    box-sizing: border-box;
}

/* Titles inside vendor hero should remain visible over the palette */
.vendor-title,
.page-title {
    color: var(--color-white);
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    margin-bottom: 0.5rem;
    line-height: 1.05;
}

.vendor-subtitle,
.page-tagline {
    color: var(--vendor-highlight);
    font-weight: 600;
    font-size: clamp(1rem, 2.6vw, 1.6rem);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

/* Keep responsive width rule consistent with main stylesheet */
@media (min-width: 640px) {
    .submit-btn {
        width: auto;
    }
}

/* ---------------------------
   Small responsive / accessibility tweaks specific to vendor pages
   --------------------------- */
@media (max-width: 768px) {
    .vendor-hero,
    .page-hero {
        min-height: 25vh;
        padding: 1.2rem 0;
    }
    .vendor-title,
    .page-title {
        font-size: clamp(1.6rem, 7vw, 2.6rem);
    }
}