/*
Theme Name:   Assman Seats Child
Theme URI:    https://assmanseats.com
Description:  Child theme for Divi — holds all custom CSS for the Assman Seats site so it survives Divi updates and lives in version control.
Author:       Assman Seats
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  assman-child
*/

/* ===================================================================
   HOW TO USE THIS FILE

   Add custom CSS below, not in Divi > Theme Options > Custom CSS.
   Both survive updates, but a file can be version-controlled,
   reviewed, and diffed. A textarea in the database cannot.

   IMPORTANT: after editing, bump the Version number in the header
   above (1.0.0 -> 1.0.1). That is the cache-buster. Without it,
   browsers and CDNs may serve the old stylesheet for days.
   =================================================================== */


/* ===================================================================
   1. BRAND TOKENS
   Mirrors the prototype's css/base.css :root block.
   Divi's Design Variables cover most module styling, but these keep
   the hand-written rules below in sync with the same source values.
   =================================================================== */

:root {
  --as-ink:    #0d0d0d;  /* page background */
  --as-bone:   #f4f2ec;  /* body + heading text */
  --as-muted:  #8a8a86;  /* secondary text */
  --as-error:  #ff6b6b;  /* form validation */
}


/* ===================================================================
   2. NAV "GET A QUOTE" BUTTON                          [SAFE TO USE]

   Divi's Menu module has no "style the last item as a button" option.
   This targets the nav-cta class added to that menu item in
   Appearance > Menus (Screen Options > tick "CSS Classes").

   This selector is safe: it uses your own class, not Divi's markup.
   =================================================================== */

.nav-cta a {
  background: var(--as-bone);
  color: var(--as-ink) !important;
  padding: 0.5rem 1rem;
  font-weight: 700;
  transition: opacity 0.15s ease;
}

.nav-cta a:hover {
  opacity: 0.85;
}


/* ===================================================================
   3. HOME HERO                                    [CONFIRM SELECTOR]

   Two things Divi's Hero module panel cannot do:
     a) a gradient scrim (Divi's Overlay is a flat colour)
     b) the approved clamp() left offset

   Add CSS Class "home-hero" to the Hero module:
   module settings > Advanced > CSS ID & Classes.

   >>> BEFORE TRUSTING THIS BLOCK: right-click the hero in your browser
   >>> and Inspect. Divi 5's internal markup differs from Divi 4, so the
   >>> inner wrapper below may need adjusting. If the gradient does not
   >>> appear, the ::after is landing on the wrong element.
   >>> Turn OFF Divi's own Overlay setting if you use this.
   =================================================================== */

.home-hero {
  position: relative;
  padding-left: clamp(1.5rem, 8vw, 8rem);
}

/* Gradient scrim — keeps the video visible up top, text legible below. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.15) 55%,
    transparent 100%
  );
}

/* Keep the text above the scrim. Raise this if copy disappears. */
.home-hero > * {
  position: relative;
  z-index: 1;
}


/* ===================================================================
   4. SQUARE TEASER IMAGES                         [CONFIRM SELECTOR]

   The homepage "The Work" grid uses 1:1 crops. Add CSS Class
   "work-thumb" to each of the four Image modules.
   =================================================================== */

.work-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}


/* ===================================================================
   5. ACCESSIBILITY

   Divi does not always give a strong visible focus ring. This matters
   for keyboard users on the quote form.
   =================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--as-bone);
  outline-offset: 2px;
}


/* ===================================================================
   6. PROJECT CSS — add new rules below this line
   =================================================================== */