/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Website Font */
@font-face {
  font-family: "Aspekta";
  src: url("/wp-content/themes/divi-child/fonts/aspekta/AspektaVF.woff2") format("woff2");
  font-weight: 50 1000; /* Aspekta VF weight range */
  font-style: normal;
  font-display: swap;
}

/* English comments as requested */
body {
  font-family: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
}

/* English comments as requested */
h1, h2 {
  font-family: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
}

/* English comments as requested */
.et_pb_button,
button,
input[type="button"],
input[type="submit"] {
  font-family: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
}

/*=== HEADER STYLES ===*/

/* ===== Base bar spacing ===== */
.topbar {
  padding-top: 8px;
  padding-bottom: 8px;
}

.topbar,
.topbar .et_pb_row,
.topbar .et_pb_column {
  overflow: visible !important;
}

/* ===== Desktop header layout ===== */
@media (min-width: 981px) {
  :root {
    --header-max: 1440px;
    --bar-height: 70px;

    /* This is the key: keep a stable left/right padding as viewport shrinks */
    --container-pad: 72px; /* Fixed desktop padding to prevent drift */

    /* Menu spacing */
    --menu-items-gap: 50px;
    --menu-to-button-gap: 0px;

    /* Logo sizing */
    --logo-col-width: 330px;        /* space reserved for the logo block */
    --logo-overlap: -140px;         /* negative = logo hangs below the bar */
    --logo-max-w: 270px;
    --logo-max-h: 165px;

    /* Fine tune logo horizontal alignment */
    /*--logo-nudge-x: -6px;   */        /* try -4px / -8px if needed */
  }

  /* Force the row to be a real flex container and center it like the mock */
  .topbar-row {
    width: 100% !important;
    max-width: var(--header-max) !important;
    min-height: var(--bar-height) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
  }

  /* Kill Divi floats that can mess with flex layouts */
  .topbar-row > .et_pb_column {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Column 1 = logo column (fixed width) */
  .topbar-row > .et_pb_column:nth-child(1) {
    flex: 0 0 var(--logo-col-width) !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Column 2 = menu column (flexes and pushes menu near the button) */
  .topbar-row > .et_pb_column:nth-child(2) {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  /* Column 3 = button column (shrink to content) */
  .topbar-row > .et_pb_column:nth-child(3) {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  /* ===== Logo overlap ===== */
  .site-logo {
    position: absolute !important;
    left: 0 !important;
    bottom: var(--logo-overlap) !important;
    z-index: 50 !important;
    transform: translateX(var(--logo-nudge-x)) !important;
  }

  .site-logo img {
    display: block !important;
    height: auto !important;
    max-width: var(--logo-max-w) !important;
    max-height: var(--logo-max-h) !important;
    box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.25) !important;
  }

  /* ===== Menu module (normal) alignment ===== */
  .main-menu {
    margin-right: var(--menu-to-button-gap) !important; /* space between menu and button */
  }

  .main-menu.et_pb_menu .et_pb_menu__wrap {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .main-menu.et_pb_menu .et_pb_menu__menu {
    margin-left: auto !important;
  }

  .main-menu.et_pb_menu .et_pb_menu__menu > nav > ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: var(--menu-items-gap) !important;
    flex-wrap: nowrap !important;
  }

  .main-menu.et_pb_menu .et_pb_menu__menu > nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-menu.et_pb_menu .et_pb_menu__menu > nav > ul > li > a {
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }

  /* ===== Button sizing ===== */
  .donate-btn .et_pb_button {
    white-space: nowrap !important;
    padding: 12px 20px !important;
  }
}

/* ===== Slight adjustments for mid-size desktops so logo doesn't drift visually ===== */
@media (min-width: 981px) and (max-width: 1200px) {
  :root {
    --logo-col-width: 300px;
    --logo-max-w: 250px;
    --logo-max-h: 155px;
   /* --logo-nudge-x: -4px;*/
    --menu-items-gap: 18px;
    --menu-to-button-gap: 0px;

	--container-pad: 56px; /* Slightly smaller on mid desktops */
  }
}

/* ===== Keep overflow visible on smaller screens (Divi handles mobile menu) ===== */
@media (max-width: 980px) {
  .topbar,
  .topbar .et_pb_row,
  .topbar .et_pb_column {
    overflow: visible !important;
  }
}

/*=== HERO STYLES ===*/

/* English comments as requested */
@media (min-width: 981px) {
  .hero-row {
    max-width: var(--header-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }
}

@media (min-width: 981px) {
  /* Anchor absolute logo to the header section, not the first column */
  .topbar {
    position: relative !important;
  }

  /* The logo should not be positioned relative to the column anymore */
  .site-logo {
    position: absolute !important;
    bottom: var(--logo-overlap) !important;
    z-index: 999 !important;

    /* Stop using transform for X nudge; we'll place it with left calc instead */
    transform: none !important;
  }

  /* When the viewport is wide enough that the 1440 container is centered */
  /* Threshold ≈ 1440 + (2 * 72) = 1584px (adjust if you change --container-pad) */
  @media (min-width: 1584px) {
    .site-logo {
      left: calc(50% - (var(--header-max) / 2) + var(--container-pad) + var(--logo-nudge-x)) !important;
    }
  }

  /* When the container is effectively full-width with padding */
  @media (max-width: 1583px) {
    .site-logo {
      left: calc(var(--container-pad) + var(--logo-nudge-x)) !important;
    }
  }
}

/*=== HOMEPAGE ===*/

/*--- Meet Daniel - Slider ---*/

.meet-daniel{
	height: 532px;
}

.meet-daniel .et_pb_slides, .meet-daniel .et_pb_slide{
	height: 100%;
	border-radius: 16px;
}

.meet-daniel .et-pb-controllers{
	bottom: -45px;
	text-align: left;
}
.meet-daniel .et-pb-controllers a{
	transition: all .3s ease;
	width: 20px;
	height: 20px;
	background-color: rgba(48, 66, 100, 0.40);
	border-radius: 12px;
}

.meet-daniel .et-pb-active-control{
	width: 60px !important;
	background-color: #C21E38 !important;
}

.meet-daniel{
	overflow-x: visible !important;
    overflow-y: visible !important;
}

/*--- Get Involved with the Campaign ---*/

a.btn-default {
    color: #FFFFFF !important;
    border-width: 0px !important;
    border-radius: 4px;
    font-size: 17px;
    background-color: #c21e38;
    padding: 10px 24px;
    font-family: "Aspekta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    transition: all 300ms ease 0ms;
    position: relative;
    top: 43px;
    cursor: pointer;
}

a.btn-default:hover {
    color: #FFFFFF !important;
    background-color: #1e273a;
}