/* ============================================================
   I GOT A GUY LLC — igotaguy.me
   Divi Theme Options > Custom CSS
   Production-ready custom CSS block
   Last updated: June 2026
   ============================================================

   BRAND COLORS
   --accent-green:    #8DC63F  (logo / CTA primary)
   --near-black:      #0E1A20  (dark section bg)
   --warm-white:      #F5F3F0  (light section bg)
   --text-dark:       #1E1E1E  (dark body text)
   --text-standard:   #3D3D3D  (standard body text)
   --text-muted:      #6B7280  (secondary / muted text)
   ============================================================ */


/* ============================================================
   § 1  GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Inter:wght@400;500&display=swap');


/* ============================================================
   § 2  TYPOGRAPHY
   ============================================================ */

/* --- 2a. Body / paragraph / form elements -------------------- */
body,
p,
li,
label,
input,
textarea,
select,
.et_pb_text,
.et_pb_text p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: #3D3D3D;
  line-height: 1.6;
}

/* --- 2b. Headings -------------------------------------------- */
h1, h2, h3,
.et_pb_slide_title,
.et_pb_module_header,
.et_pb_title_container h1,
.et_pb_title_container h2 {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1E1E1E;
  line-height: 1.2;
}

h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #1E1E1E;
}

/* --- 2c. Muted / secondary text ------------------------------ */
.et_pb_text_inner small,
figcaption,
.et_pb_blurb_description {
  color: #6B7280;
  font-size: 0.9em;
}


/* ============================================================
   § 3  GLOBAL POLISH
   ============================================================ */

/* --- 3a. Smooth scroll --------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* --- 3b. Text selection ------------------------------------- */
::selection {
  background-color: #8DC63F;
  color: #ffffff;
}
::-moz-selection {
  background-color: #8DC63F;
  color: #ffffff;
}

/* --- 3c. Focus ring (accessibility) ------------------------- */
*:focus-visible {
  outline: 2.5px solid #8DC63F;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Remove old browser default on non-keyboard focus */
*:focus:not(:focus-visible) {
  outline: none;
}

/* --- 3d. Image hover brightness ----------------------------- */
.et_pb_image img {
  transition: filter 0.3s ease, transform 0.3s ease;
  will-change: filter;
}
.et_pb_image:hover img {
  filter: brightness(1.05);
}


/* ============================================================
   § 4  PORTFOLIO CARD HOVER LIFT  (.igag-card)
   ============================================================ */

.igag-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
  border-radius: 8px;
  overflow: hidden;
}

.igag-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(14, 26, 32, 0.18),
    0  4px 12px rgba(14, 26, 32, 0.10);
}


/* ============================================================
   § 5  SECTION DIVIDER — SHARPENED DIAGONAL EDGES
   ============================================================ */

/*
   Divi built-in dividers sometimes render with anti-aliasing
   artifacts or soft edges. These rules sharpen the clip-path
   on Divi section dividers and add diagonal cuts where Divi's
   built-in system falls short. Apply .igag-section-cut to any
   Divi section's custom CSS class.
*/

/* Force crisp edges on all Divi section divider SVGs */
.et_pb_section .et_pb_top_inside_divider,
.et_pb_section .et_pb_bottom_inside_divider {
  shape-rendering: crispEdges;
  overflow: visible;
}

/* Utility: diagonal bottom cut on a section.
   Place on the ET section "CSS Class" field as "igag-section-cut-bottom" */
.igag-section-cut-bottom {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%);
  margin-bottom: -1px; /* close sub-pixel gap */
  overflow: visible;
  z-index: 1;
}

/* Utility: diagonal top cut */
.igag-section-cut-top {
  position: relative;
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%);
  margin-top: -1px;
  overflow: visible;
  z-index: 1;
}

/* Combined diagonal — next section overlaps previous cleanly */
.igag-section-slash {
  position: relative;
  clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%);
  margin: -1px 0;
  overflow: visible;
  z-index: 1;
}

/* Ensure stacking order works when sections overlap */
.et_pb_section {
  isolation: isolate;
}


/* ============================================================
   § 6  HERO GRADIENT OVERLAY  (.hero-overlay)
   ============================================================ */

/*
   Apply .hero-overlay as a CSS Class on any Divi row, section,
   or module that sits on top of a hero/background image.
   The pseudo-element paints a bottom-heavy dark gradient
   reinforcing the #0E1A20 brand feel without obscuring text.
*/

.hero-overlay {
  position: relative;
}

.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;          /* top/right/bottom/left: 0 */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(14, 26, 32, 0.30) 0%,
    rgba(14, 26, 32, 0.55) 50%,
    rgba(14, 26, 32, 0.75) 100%
  );
  border-radius: inherit;
}

/* Keep inner content above the overlay */
.hero-overlay > * {
  position: relative;
  z-index: 2;
}


/* ============================================================
   § 7  CTA BUTTONS — DIVI  (.et_pb_button)
   ============================================================ */

/* --- 7a. Shimmer keyframe ------------------------------------ */
@keyframes igag-shimmer {
  0%   { transform: translateX(-150%) rotate(30deg); }
  100% { transform: translateX(250%)  rotate(30deg); }
}

/* --- 7b. Base button reset + primary style ------------------ */
.et_pb_button,
a.et_pb_button {
  position: relative;
  overflow: hidden;               /* contain shimmer pseudo-element */
  display: inline-block;

  /* Shape */
  border-radius: 6px !important;
  padding: 0.75em 1.75em !important;

  /* Primary color scheme */
  background-color: #8DC63F !important;
  color: #0E1A20 !important;
  border: none !important;
  border-width: 0 !important;

  /* Typography */
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;

  /* Transition */
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.25s ease !important;

  /* Subtle resting shadow */
  box-shadow: 0 2px 8px rgba(141, 198, 63, 0.25) !important;
}

/* --- 7c. Shimmer pseudo-element ----------------------------- */
.et_pb_button::before,
a.et_pb_button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%) rotate(30deg);
  pointer-events: none;
  z-index: 3;
  border-radius: 0;
}

/* --- 7d. Hover state ---------------------------------------- */
.et_pb_button:hover,
a.et_pb_button:hover {
  background-color: #7ab535 !important; /* slightly deeper green */
  color: #0E1A20 !important;
  box-shadow: 0 4px 16px rgba(141, 198, 63, 0.35) !important;
  transform: translateY(-1px);
}

/* Trigger shimmer on hover */
.et_pb_button:hover::before,
a.et_pb_button:hover::before {
  animation: igag-shimmer 0.6s ease forwards;
}

/* --- 7e. Active / click press ------------------------------- */
.et_pb_button:active,
a.et_pb_button:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 0 1px 6px rgba(141, 198, 63, 0.20) !important;
  transition-duration: 0.08s !important;
}

/* --- 7f. Outlined variant  (.btn-outline) ------------------- */
/*
   Add "btn-outline" as an additional CSS class on the Divi
   button module to activate the outlined style.
*/
.btn-outline.et_pb_button,
.btn-outline a.et_pb_button,
a.et_pb_button.btn-outline {
  background-color: transparent !important;
  color: #8DC63F !important;
  border: 2px solid #8DC63F !important;
  border-width: 2px !important;
  box-shadow: none !important;
}

.btn-outline.et_pb_button:hover,
.btn-outline a.et_pb_button:hover,
a.et_pb_button.btn-outline:hover {
  background-color: #8DC63F !important;
  color: #0E1A20 !important;
  box-shadow: 0 4px 16px rgba(141, 198, 63, 0.30) !important;
}

/* Shimmer visible on outlined hover too */
.btn-outline.et_pb_button:hover::before,
a.et_pb_button.btn-outline:hover::before {
  animation: igag-shimmer 0.6s ease forwards;
}

.btn-outline.et_pb_button:active,
a.et_pb_button.btn-outline:active {
  transform: scale(0.97) !important;
}

/* Divi sometimes renders an arrow icon inside buttons */
.et_pb_button::after {
  display: none !important; /* hide default arrow; add back with custom icon if needed */
}


/* ============================================================
   § 8  SCROLL ANIMATION CLASSES
   ============================================================ */

/*
   Usage:
   1. Add .fade-up / .fade-left / .fade-right to any element
      (Divi row, module, or section via "CSS Class").
   2. On scroll into view, add .is-visible via Divi's built-in
      animation trigger OR a lightweight IntersectionObserver
      snippet in a Divi Code module if needed.
   3. Custom cubic-bezier provides a springy, confident reveal.
*/

/* Shared base */
.fade-up,
.fade-left,
.fade-right {
  opacity: 0;
  will-change: opacity, transform;
}

/* Per-direction starting states */
.fade-up    { transform: translateY(28px); }
.fade-left  { transform: translateX(-28px); }
.fade-right { transform: translateX(28px); }

/* Transition definition — applied at rest so it fires on .is-visible add */
.fade-up {
  transition:
    opacity  0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-left {
  transition:
    opacity  0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s;
}
.fade-right {
  transition:
    opacity  0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s;
}

/* Visible / triggered state */
.fade-up.is-visible,
.fade-left.is-visible,
.fade-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered children — add .stagger-children to a parent */
.stagger-children > *:nth-child(1) { transition-delay: 0.00s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.10s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.20s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.30s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.40s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.50s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-left,
  .fade-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .et_pb_button,
  a.et_pb_button {
    transition: background-color 0.15s ease !important;
  }

  .igag-card {
    transition: box-shadow 0.15s ease !important;
  }

  .igag-card:hover {
    transform: none !important;
  }
}


/* ============================================================
   § 9  DARK / LIGHT SECTION BACKGROUND HELPERS
   ============================================================ */

/*
   Quick utility classes for Divi section "CSS Class" field
   to apply brand background colors with matching text.
*/

.igag-bg-dark {
  background-color: #0E1A20 !important;
}
.igag-bg-dark h1,
.igag-bg-dark h2,
.igag-bg-dark h3,
.igag-bg-dark h4,
.igag-bg-dark h5,
.igag-bg-dark h6,
.igag-bg-dark p,
.igag-bg-dark li,
.igag-bg-dark .et_pb_text {
  color: #F5F3F0 !important;
}
.igag-bg-dark .et_pb_text_inner small {
  color: rgba(245, 243, 240, 0.65) !important;
}

.igag-bg-light {
  background-color: #F5F3F0 !important;
}
.igag-bg-light h1,
.igag-bg-light h2,
.igag-bg-light h3 {
  color: #1E1E1E !important;
}


/* ============================================================
   § 10  DIVI NAVBAR / HEADER POLISH
   ============================================================ */

/* Smooth header transition (sticky) */
#main-header,
#main-header.et-fixed-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Accent underline on active nav link */
#top-menu li.current_page_item > a,
#top-menu li.current-menu-item > a {
  color: #8DC63F !important;
  position: relative;
}

#top-menu li.current_page_item > a::after,
#top-menu li.current-menu-item > a::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background: #8DC63F;
  position: absolute;
  bottom: -3px;
  left: 0;
  border-radius: 1px;
}

/* Nav link hover */
#top-menu li a:hover {
  color: #8DC63F !important;
  transition: color 0.2s ease;
}


/* ============================================================
   § 11  FORM FIELD POLISH
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 0.65em 0.9em !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  color: #3D3D3D !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus {
  border-color: #8DC63F !important;
  box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.18) !important;
  outline: none !important;
}

/* Form submit button — inherits § 7 but just in case Divi overrides */
.et_pb_contact_submit,
input[type="submit"] {
  cursor: pointer;
}