/* ==========================================================================
   TYPOGRAPHY — 3VOLUTEC
   ========================================================================== */

/* -----------------------------
   Font-face declarations
----------------------------- */
@font-face {
  font-family: 'FF_3VOLUTEC';
  src: url('../fonts/FF_3VOLUTEC-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FF_3VOLUTEC';
  src: url('../fonts/FF_3VOLUTEC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FF_3VOLUTEC';
  src: url('../fonts/FF_3VOLUTEC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}

/* -----------------------------
   Root variables
----------------------------- */
:root {
  --font-sans: 'FF_3VOLUTEC', 'Arial', sans-serif;

  --text-color: #B3B4B4;
  --text-muted: #b8b8b8;
  --heading-color: #ffffff;

  --font-size-base: 1rem;        /* 16px */
  --font-size-sm: 0.875rem;      /* 14px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.5rem;        /* 24px */

  --line-height-base: 1.6;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-tight: -0.02em;
}

/* -----------------------------
   Base
----------------------------- */
html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------
   Headings
----------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--heading-color);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

h4 {
  font-size: 1.2rem;
  font-weight: 400;
}

h5, h6 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* -----------------------------
   Paragraphs & text
----------------------------- */
p {
  margin-bottom: 1.2em;
  max-width: 70ch;
}

strong {
  font-weight: 400;
}

em {
  font-style: italic;
}

/* -----------------------------
   Links
----------------------------- */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/*a:hover {
  opacity: 0.8;
}*/

/* -----------------------------
   Lists
----------------------------- */
ul, ol {
  margin-bottom: 1.2em;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.5em;
}

/* -----------------------------
   Small text / captions
----------------------------- */
small,
.k-id_small {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* -----------------------------
   Buttons
----------------------------- */
/*button,
.k-id_btn {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
}*/
button,
input[type=submit],
.button, 
.wp-block-button .wp-block-button__link, 
.k-id_btn, 
.wpcf7-submit {
font-family: var(--font-sans);
  display: inline-block;
  padding: 15px 64px 12px 30px;
  background: rgba(228,35,19,0);
  color: var(--color-accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  line-height: 110%;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
}
input[type=submit],
.wpcf7-submit {
	padding: 15px 30px 12px 30px;
}
.button::after, 
.wp-block-button .wp-block-button__link::after,
.wpcf7-submit::after {
  content: "→";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.button:hover, 
.wp-block-button .wp-block-button__link:hover,
.wpcf7-submit:hover {
  color: #fff !important;
  background: var(--color-accent);
}

.button:hover::after, 
.wp-block-button .wp-block-button__link:hover::after,
.wpcf7-submit:hover::after {
  right: 24px;
}

.button.on-red,
.wp-block-button.on-red .wp-block-button__link {
	color: #fff !important;
  	background: var(--color-accent);
}


/* -----------------------------
   Hero typography (for large headings)
----------------------------- */
.k-id_hero-title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.k-id_hero-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* -----------------------------
   Section titles
----------------------------- */
.k-id_section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 1rem;
}

.k-id_section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: 2rem;
}

/* -----------------------------
   Utilities
----------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-muted { color: var(--text-muted); }