/*
Theme Name: Zenventa Custom
Theme URI: https://zenventaglobal.com/
Author: Zenventa Global
Author URI: https://zenventaglobal.com/
Description: Custom-coded WordPress theme for Zenventa Global.
Version: 1.0.0
Text Domain: zenventa-custom
*/

/* =========================================================
   ZENVENTA CUSTOM
   Main Theme Stylesheet
========================================================= */

/* =========================================================
   1. BRAND DESIGN SYSTEM
========================================================= */

:root {
  /* -----------------------------------------------------
       PRIMARY BRAND COLORS
    ----------------------------------------------------- */

  --zv-primary: #0b2148;
  --zv-primary-dark: #061631;
  --zv-primary-light: #163b78;

  /* -----------------------------------------------------
       SECONDARY BRAND BLUE
    ----------------------------------------------------- */

  --zv-secondary: #1769c2;
  --zv-secondary-dark: #0f4f99;
  --zv-secondary-light: #3d86d3;

  /* -----------------------------------------------------
       BRAND ACCENT
       Orange from Zenventa logo
    ----------------------------------------------------- */

  --zv-accent: #f47b20;
  --zv-accent-dark: #d9610b;
  --zv-accent-light: #ff9b4d;

  /* -----------------------------------------------------
       BASIC COLORS
    ----------------------------------------------------- */

  --zv-white: #ffffff;
  --zv-black: #000000;

  /* -----------------------------------------------------
       LIGHT BACKGROUNDS
    ----------------------------------------------------- */

  --zv-light: #f7f9fc;
  --zv-light-2: #eef3f8;
  --zv-light-3: #e4ebf3;

  /* -----------------------------------------------------
       DARK COLORS
    ----------------------------------------------------- */

  --zv-dark: #0b2148;
  --zv-dark-2: #102b55;
  --zv-dark-3: #061631;

  /* -----------------------------------------------------
       TEXT COLORS
    ----------------------------------------------------- */

  --zv-text: #26364d;
  --zv-text-light: #65748a;
  --zv-text-muted: #8a97a8;
  --zv-text-white: #ffffff;

  /* -----------------------------------------------------
       BORDER COLORS
    ----------------------------------------------------- */

  --zv-border: #dce4ee;
  --zv-border-light: #e9eef4;
  --zv-border-dark: #c6d1df;

  /* -----------------------------------------------------
       STATUS COLORS
       Keep these separate from brand colors.
    ----------------------------------------------------- */

  --zv-success: #198754;
  --zv-warning: #f59e0b;
  --zv-danger: #dc3545;
  --zv-info: #1769c2;

  /* -----------------------------------------------------
       TYPOGRAPHY
    ----------------------------------------------------- */

  --zv-font-primary: "Inter", Arial, sans-serif;
  --zv-font-heading: "Inter", Arial, sans-serif;

  /* -----------------------------------------------------
       LAYOUT
    ----------------------------------------------------- */

  --zv-container: 1200px;
  --zv-container-wide: 1280px;

  --zv-gutter: 24px;

  /* -----------------------------------------------------
       BORDER RADIUS
    ----------------------------------------------------- */

  --zv-radius-sm: 6px;
  --zv-radius-md: 12px;
  --zv-radius-lg: 20px;
  --zv-radius-xl: 28px;
  --zv-radius-pill: 999px;

  /* -----------------------------------------------------
       SHADOWS
    ----------------------------------------------------- */

  --zv-shadow-sm: 0 2px 8px rgba(6, 22, 49, 0.06);

  --zv-shadow-md: 0 10px 30px rgba(6, 22, 49, 0.1);

  --zv-shadow-lg: 0 20px 50px rgba(6, 22, 49, 0.14);

  /* -----------------------------------------------------
       TRANSITIONS
    ----------------------------------------------------- */

  --zv-transition-fast: 0.2s ease;
  --zv-transition: 0.3s ease;
  --zv-transition-slow: 0.5s ease;

  /* -----------------------------------------------------
       Z-INDEX
    ----------------------------------------------------- */

  --zv-z-header: 1000;
  --zv-z-dropdown: 1100;
  --zv-z-mobile-menu: 1200;
  --zv-z-modal: 9999;
}

/* =========================================================
   2. RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  font-family: var(--zv-font-primary);

  font-size: 16px;
  line-height: 1.7;

  color: var(--zv-text);

  background: var(--zv-white);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;

  display: block;
}

svg {
  max-width: 100%;
}

a {
  color: inherit;

  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 20px;

  font-family: var(--zv-font-heading);

  line-height: 1.2;

  color: var(--zv-dark);

  font-weight: 700;
}

/* =========================================================
   3. GLOBAL CONTAINER
========================================================= */

.zv-container,
.zenventa-container {
  width: calc(100% - 48px);

  max-width: var(--zv-container-wide);

  margin-left: auto;
  margin-right: auto;
}

.zv-container-wide {
  width: calc(100% - 48px);

  max-width: var(--zv-container-wide);

  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   4. ACCESSIBILITY
========================================================= */

.screen-reader-text {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

.screen-reader-text:focus {
  position: fixed;

  top: 10px;
  left: 10px;

  width: auto;
  height: auto;

  padding: 12px 18px;
  margin: 0;

  clip: auto;

  background: var(--zv-dark);

  color: var(--zv-white);

  z-index: 999999;
}

/* =========================================================
   5. GLOBAL BUTTONS
========================================================= */

.zv-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 50px;

  padding: 12px 28px;

  border: 2px solid transparent;

  border-radius: var(--zv-radius-pill);

  font-weight: 600;

  line-height: 1;

  transition:
    transform var(--zv-transition),
    background var(--zv-transition),
    color var(--zv-transition),
    border-color var(--zv-transition),
    box-shadow var(--zv-transition);
}

.zv-btn:hover {
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   PRIMARY BUTTON
--------------------------------------------------------- */

.zv-btn-primary {
  background: var(--zv-secondary);

  color: var(--zv-white);
}

.zv-btn-primary:hover {
  background: var(--zv-secondary-dark);

  color: var(--zv-white);

  box-shadow: var(--zv-shadow-md);
}

/* ---------------------------------------------------------
   ACCENT BUTTON
--------------------------------------------------------- */

.zv-btn-secondary {
  background: var(--zv-accent);

  color: var(--zv-white);
}

.zv-btn-secondary:hover {
  background: var(--zv-accent-dark);

  color: var(--zv-white);

  box-shadow: var(--zv-shadow-md);
}

/* ---------------------------------------------------------
   OUTLINE BUTTON
--------------------------------------------------------- */

.zv-btn-outline {
  background: transparent;

  color: var(--zv-primary);

  border-color: var(--zv-primary);
}

.zv-btn-outline:hover {
  background: var(--zv-primary);

  color: var(--zv-white);
}

/* ---------------------------------------------------------
   WHITE BUTTON
--------------------------------------------------------- */

.zv-btn-white {
  background: var(--zv-white);

  color: var(--zv-primary);
}

.zv-btn-white:hover {
  background: var(--zv-light);

  color: var(--zv-primary);

  box-shadow: var(--zv-shadow-md);
}

/* =========================================================
   6. GLOBAL SECTION
========================================================= */

.zv-section {
  padding: 100px 0;
}

.zv-section-sm {
  padding: 70px 0;
}

.zv-section-lg {
  padding: 130px 0;
}

/* =========================================================
   7. SECTION TITLES
========================================================= */

.zv-section-title {
  max-width: 760px;

  margin-bottom: 50px;
}

.zv-section-title.text-center {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.zv-section-eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--zv-accent);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.zv-section-heading {
  color: var(--zv-primary);

  font-size: clamp(32px, 4vw, 52px);
}

.zv-section-description {
  color: var(--zv-text-light);

  font-size: 17px;
}

/* =========================================================
   8. GLOBAL LINKS
========================================================= */

.zv-link {
  color: var(--zv-secondary);

  transition: color var(--zv-transition-fast);
}

.zv-link:hover {
  color: var(--zv-accent);
}

/* =========================================================
   9. GLOBAL ACCENT ELEMENTS
========================================================= */

.zv-accent {
  color: var(--zv-accent);
}

.zv-primary {
  color: var(--zv-primary);
}

.zv-secondary {
  color: var(--zv-secondary);
}

.zv-bg-primary {
  background: var(--zv-primary);
}

.zv-bg-secondary {
  background: var(--zv-secondary);
}

.zv-bg-accent {
  background: var(--zv-accent);
}

/* =========================================================
   10. WORDPRESS
========================================================= */

.alignleft {
  float: left;

  margin: 0 24px 24px 0;
}

.alignright {
  float: right;

  margin: 0 0 24px 24px;
}

.aligncenter {
  display: block;

  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 14px;

  color: var(--zv-text-light);
}

/* =========================================================
   11. PAGE CONTENT
========================================================= */

.zv-page-content {
  padding: 90px 0;
}

.zv-page-content .entry-content > * {
  max-width: 900px;

  margin-left: auto;
  margin-right: auto;
}

.zv-page-content .entry-content img {
  margin: 30px auto;
}

/* =========================================================
   12. NO CONTENT
========================================================= */

.zv-no-content {
  padding: 100px 0;

  text-align: center;
}

.zv-no-content h1 {
  color: var(--zv-primary);

  font-size: 42px;
}

/* =========================================================
   13. FORM ELEMENTS
========================================================= */

input,
textarea,
select {
  width: 100%;

  border: 1px solid var(--zv-border);

  border-radius: var(--zv-radius-sm);

  background: var(--zv-white);

  color: var(--zv-text);

  outline: none;

  transition:
    border-color var(--zv-transition-fast),
    box-shadow var(--zv-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--zv-secondary);

  box-shadow: 0 0 0 3px rgba(23, 105, 194, 0.12);
}

/* =========================================================
   14. SELECTION
========================================================= */

::selection {
  background: var(--zv-accent);

  color: var(--zv-white);
}

/* =========================================================
   15. RESPONSIVE BASE
========================================================= */

@media (max-width: 1199px) {
  .zv-section-lg {
    padding: 110px 0;
  }
}

@media (max-width: 991px) {
  .zv-container,
  .zv-container-wide,
  .zenventa-container {
    width: calc(100% - 40px);
  }

  .zv-section {
    padding: 80px 0;
  }

  .zv-section-lg {
    padding: 95px 0;
  }
}

@media (max-width: 767px) {
  .zv-container,
  .zv-container-wide,
  .zenventa-container {
    width: calc(100% - 32px);
  }

  .zv-section {
    padding: 65px 0;
  }

  .zv-section-sm {
    padding: 50px 0;
  }

  .zv-section-lg {
    padding: 75px 0;
  }

  .zv-section-heading {
    font-size: 32px;
  }

  .zv-section-description {
    font-size: 16px;
  }

  .zv-btn {
    width: 100%;
  }

  .alignleft,
  .alignright {
    float: none;

    margin: 20px auto;
  }
}

@media (max-width: 480px) {
  .zv-container,
  .zv-container-wide,
  .zenventa-container {
    width: calc(100% - 28px);
  }

  body {
    font-size: 15px;
  }

  .zv-section-heading {
    font-size: 29px;
  }
}