/* Craig Sumerel — Per-Site CSS Overrides
   Loaded after global.css via BaseLayout.astro */

/* Self-hosted fonts */
@font-face {
  font-family: 'PP Writer';
  src: url('/sites/craig-sumerel/fonts/PPWriter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stint Ultra Expanded';
  src: url('/sites/craig-sumerel/fonts/stint-pro-ultra-expanded-medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stint Ultra Expanded Regular';
  src: url('/sites/craig-sumerel/fonts/StintUltraExpanded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterVar';
  src: url('/sites/craig-sumerel/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InterVar';
  src: url('/sites/craig-sumerel/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors */
  --color-espresso: #352d22;
  --color-burgundy: #3e1f20;
  --color-light-gray: #d9d9d9;
  --color-tangerine: #f25e22;
  --color-cream: #fff6ed;

  /* Typography */
  --font-heading: 'PP Writer', Georgia, serif;
  --font-body: 'InterVar', system-ui, sans-serif;
  --font-stint: 'Stint Ultra Expanded', 'Times New Roman', serif;
  --font-stint-regular: 'Stint Ultra Expanded Regular', 'Times New Roman', serif;
}

body {
  background-color: var(--color-espresso);
  color: white;
}

/* Corner scoop effect — radial-gradient mask for scooped corners */
.corner-scoop {
  /* Fallback for very old browsers */
  border-radius: 1.5rem;

  /* Cross-browser scooped corners */
  --scoop-radius: 1.5rem;
  -webkit-mask-image:
    radial-gradient(circle at top left, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at top right, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at bottom right, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at bottom left, transparent var(--scoop-radius), black var(--scoop-radius));
  mask-image:
    radial-gradient(circle at top left, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at top right, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at bottom right, transparent var(--scoop-radius), black var(--scoop-radius)),
    radial-gradient(circle at bottom left, transparent var(--scoop-radius), black var(--scoop-radius));
  -webkit-mask-position: top left, top right, bottom right, bottom left;
  mask-position: top left, top right, bottom right, bottom left;
  -webkit-mask-size: 51% 51%;
  mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Reset standard border radius if mask is active */
  border-radius: 0;
}

/* Link styling: tangerine with uppercase tracking */
a {
  color: var(--color-tangerine);
  font-family: var(--font-stint);
  text-transform: uppercase;
  letter-spacing: 3.28px;
  text-decoration: underline;
  font-size: 1rem;
}

a:hover {
  opacity: 0.8;
}

/* Button override - no underline */
a.no-underline {
  text-decoration: none;
}

/* Strong text in body */
strong {
  font-variation-settings: "wght" 700;
  font-weight: 700;
}

p {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-family: var(--font-body);
  font-variation-settings: "wght" 450;
  font-weight: 450;
}
p:last-of-type {
  margin-bottom: 0!important;
}
/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Override heading styles */
h2, h3 {
  font-family: var(--font-stint);
  text-transform: uppercase;
  letter-spacing: 4px;
  color: white;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: unset;

}
/* ============================================
   COMPONENT CLASSES
   Replace inline style= attributes in CraigSumerelPage.astro
============================================= */

/* Navigation */
.cs-nav {
  background-color: rgba(53, 45, 34, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Backgrounds */
.cs-bg-cream {
  background-color: var(--color-cream);
}

.cs-bg-light-gray {
  background-color: var(--color-light-gray);
}

/* Text: espresso on cream (body text, labels, descriptions) */
.cs-text-espresso {
  color: var(--color-espresso);
  font-family: var(--font-body);
}

/* Text: cream on espresso (experience items, primary text) */
.cs-text-cream {
  color: var(--color-cream);
  font-family: var(--font-body);
}

/* Text: muted cream (secondary/supporting text on dark bg) */
.cs-text-muted-cream {
  color: rgba(255, 246, 237, 0.7);
  font-family: var(--font-body);
  text-wrap: balance;
}

/* Text: muted white (footer text, footer buttons) */
.cs-text-muted-white {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
}

/* Text: muted espresso (close buttons on cream panels) */
.cs-text-muted-espresso {
  color: rgba(53, 45, 34, 0.6);
}

/* Headings: Stint + tangerine (section subheadings) */
.cs-heading-tangerine {
  font-family: var(--font-stint);
  color: var(--color-tangerine);
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Headings: Stint + white (section headings on dark bg) */
.cs-heading-stint {
  font-family: var(--font-stint);
  text-transform: uppercase;
  letter-spacing: 4px;
  color: white;
}

/* Headings: PP Writer + espresso (CTA, modal, drawer headings) */
.cs-heading-writer {
  font-family: var(--font-heading);
  color: var(--color-espresso);
  text-transform: none;
  letter-spacing: normal;
}

/* Stint label (e.g. "brand bar" span) */
.cs-label-stint {
  font-family: var(--font-stint);
}

/* Borders: cream */
.cs-border-cream {
  border-color: var(--color-cream);
}

/* Borders: white subtle (footer) */
.cs-border-white-subtle {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Button: primary (tangerine bg, espresso text, stint font) */
.cs-btn-primary {
  background-color: var(--color-tangerine);
  color: var(--color-espresso);
  font-family: var(--font-stint);
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

.cs-btn-primary:hover {
  border-color: var(--color-tangerine);
}

/* Form inputs */
.cs-form-input {
  border-color: rgba(53, 45, 34, 0.3);
  color: var(--color-espresso);
  font-family: var(--font-body);
  --tw-ring-color: var(--color-tangerine);
}

/* Form error text */
.cs-form-error {
  color: var(--color-tangerine);
  font-family: var(--font-body);
}

/* Panel: cream background with espresso text (drawers, modals) */
.cs-panel {
  background-color: var(--color-cream);
  color: var(--color-espresso);
}

/* Prose content blocks inside panels */
.cs-prose {
  font-family: var(--font-body);
}

/* Heading colors inside cream panels (override global white) */
.cs-panel h1,
.cs-panel h2,
.cs-panel h3,
.cs-panel h4,
.cs-panel h5,
.cs-panel h6 {
  color: var(--color-espresso);
}

/* Hero intro border + text on cream */
.cs-hero-intro {
  border-color: var(--color-espresso);
  color: var(--color-espresso);
  font-family: var(--font-body);
}

/* CTA heading: PP Writer, espresso, balanced wrapping */
.cs-cta-heading {
  font-family: var(--font-heading);
  color: var(--color-espresso);
  text-wrap: balance;
  text-transform: none;
  letter-spacing: normal;
}

/* CTA description text */
.cs-cta-description {
  color: var(--color-espresso);
  font-family: var(--font-body);
  text-wrap: balance;
}

/* Video cover (responsive full-bleed) */
.cs-video-cover {
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
}

/* Focus ring override for drawer close */
.cs-focus-tangerine {
  --tw-outline-color: var(--color-tangerine);
}

/* Experience list styling */
.cs-experience-list {
  color: var(--color-cream);
  font-family: var(--font-body);
  list-style: none;
  padding: 0;
}

/* Legal modal prose (Terms, Privacy) */
.cs-legal-prose {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--color-espresso);
}

.cs-legal-prose h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: black;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.cs-legal-prose p,
.cs-legal-prose li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  font-weight: 400;
}

.cs-legal-prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cs-legal-prose li {
  margin-bottom: 0.25rem;
}
#hubspot-form-container{
/* HubSpot form overrides inside contact drawer */
.hsfc-Step__Content {
  padding: 0!important;
}

.hsfc-FormWrapper [data-hsfc-id="Renderer"] {
  font-family: var(--font-body);
  font-size: 1rem;
}

.hsfc-FieldLabel {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-espresso);
}
.hsfc-TextareaInput {
  font-family: var(--font-body);
  font-size: 1rem;
}

.hsfc-Button {
  font-family: var(--font-stint);
  text-transform: uppercase;
  letter-spacing: 3px;
  background-color: var(--color-tangerine);
  color: var(--color-espresso);
}

.hsfc-RichText,
.hsfc-FieldDescription,
.hsfc-FieldFooter {
  font-family: var(--font-body);
  font-size: 1rem;
}
}
/* Drawer heading */
.cs-drawer-heading {
  font-family: var(--font-stint);
  color: var(--color-espresso);
  text-transform: uppercase;
  letter-spacing: 3px;
}