@import url("https://use.typekit.net/olf6yuk.css");



  /*
Theme Name: Fena
Author: GN
Description: Custom developed theme to fit all kind of needs
Version: 10
Tested up to: 8.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
*/

  /* Resets */

  /*
1. Use a more-intuitive box-sizing model.
*/
  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  /*
2. Remove default margin
*/
  * {
      margin: 0;
  }

  /*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
  body,
  html {
      overflow-x: hidden;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
  }

  /*
5. Improve media defaults
*/
  img,
  picture,
  video,
  canvas,
  svg {
      display: block;
      max-width: 100%;
  }

  /*
6. Remove built-in form typography styles
*/
  input,
  button,
  textarea,
  select {
      font: inherit;
  }

  /*
7. Avoid text overflows
*/
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      overflow-wrap: break-word;
      margin-bottom: 0px !important;
  }

  /*
8. Create a root stacking context
*/
  #root,
  #__next {
      isolation: isolate;
  }

  body {
      overflow-x: hidden;
  }

  /* Fonts */

  @font-face {
      font-family: "AmericanCaptain";
      src: url("./fonts/AmericanCaptain.otf") format("opentype");
      font-style: normal;
      font-weight: normal;
      font-display: swap;
  }


  /* font-family: "sculpin", sans-serif; */

  /* Vars */
  :root {
      --general-blue: #196AB4;
      --link-blue: #3A78F9;
      --text-dark: #102433;
      --bg-dark-blue: #12264F;
  }

  /*  Walker Menu styles */

  .menu-item>a {
      color: #fff !important;
      text-transform: uppercase;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
      text-underline-offset: 2px;
  }

  .menu-item:hover>a {
      text-decoration: underline;
  }

  .dropdown-menu {
      background-color: unset !important;
      border: unset !important;
  }

  .dropdown-menu[data-bs-popper] {
      top: 100%;
      left: 0;
      margin-top: -0.875rem !important;
  }

  .dropdown-item:hover {
      color: unset;
      background-color: #e9ecef;
  }

  .dropdown-item {
      background-color: #fff !important;
      margin-bottom: 5px !important;
  }

  .dropdown-item>span {
      color: var(--text-dark) !important;
  }

  .logo {
      max-width: 205px;
  }

  #nav-wrapper {
      padding: 50px 0px;
      background-color: var(--bg-dark-blue);
  }

  .inner-header {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
  }

  .navbar-toggler {
      top: 0;
      right: 0;
      position: absolute;
  }

  .current-menu-item>a {
      font-weight: 700;
  }

  .dropdown-item {
      color: var(--text-dark) !important;
      font-weight: 400;
      text-transform: uppercase;
      font-family: "Poppins", sans-serif;
  }

  .dropdown-item:hover {
      background-color: #f2f2f2;
      color: var(--general-blue) !important;
  }

  .navbar-toggler {
      border: none;
  }

  .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Landing styles */

  .flex-right {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
  }

  .absoluteWheel {
      position: absolute;
      top: 80%;
      max-width: 800px;
      width: 80%;
      left: -450px;
      animation: spin 70s linear infinite;
  }

  @keyframes spin {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }


  .onlyText {
      font-family: "sculpin", sans-serif;
      padding: 150px 150px 0px 150px !important;
      max-width: 1200px !important;
      font-size: 25px;
      color: #26429A !important;
  }

  .star {
      position: absolute;
      right: -35vw;
      filter: invert(100%);
      bottom: 2vh;
      width: 70vw;
      animation: pulse 10s ease-in-out infinite;
      z-index: -2;
  }

  @keyframes pulse {
      0% {
          transform: scale(1);
          opacity: 0.1;
      }

      50% {
          transform: scale(1.2);
          opacity: 0.1;
      }

      100% {
          transform: scale(1);
          opacity: 0.1;
      }
  }

  .arcGroup {
      max-width: 40% !important;
  }

  .parteDinPoveste {
      margin-top: 250px !important;
      max-width: 30% !important;
  }

  .drums {
      margin-top: 450px !important;
      max-width: 30% !important;
      padding-right: 150px !important;
  }

  .heroGroup {
      max-width: 88% !important;
      margin-top: 100px !important;
  }

  .intro {
      margin-left: 100px;
      position: relative;
      padding: 100px 0px;
  }

  .cta-btn {
      font-family: "sculpin", sans-serif;
      background-color: #e74022;
      color: #fff;
      padding: 20px 44px;
      font-size: clamp(1rem, 3vw, 4rem);
      border: none;
      cursor: pointer;
      text-transform: uppercase;
      border-radius: 0 0 0 80px;

      position: absolute;
      right: 0;

  }

  .calendar-inner {
      margin-top: 100px;
      margin-left: 250px;
  }

  .cube {
      width: 50px;
      height: 50px;
      background-color: #FBD24D;
      border-radius: 0px 0px 100px 0px;
  }

  .inline {
      display: flex;
      align-items: flex-end;
      gap: 30px;
      margin-top: 50px;
  }

  .calendar-header {
      padding-bottom: 20px;
      font-family: "AmericanCaptain";
      text-transform: uppercase;
      color: #26429A;
      letter-spacing: 2px;
      font-size: 48px;
      font-weight: 700;
  }

  .calendar-days {
      font-family: "AmericanCaptain";
      font-size: 48px;
      font-weight: 400;
      color: #fff;
      padding: 20px 70px 20px 20px;
      background-color: #C170AC;
      cursor: pointer;
      border-radius: 0px 100px 0px 0px;
      transition: all 0.3s ease;
      /* 🔑 aici pui tranziția */
  }

  .calendar-days.active {
      background-color: #CECECE;
      transform: translateY(-5px);
  }


  .events-container {
      min-height: 500px;
      background-image: url('assets//bgCalendar.svg');
      background-size: cover;
      background-repeat: no-repeat;
  }

  .events-inner {
      padding-top: 50px;
      padding-bottom: 50px;
      padding-left: 100px;
      margin-left: 250px;

  }

  .organizator-event {
      font-family: "sculpin", sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #C170AC;
      text-transform: uppercase;
  }

  .descriere-event {
      font-family: "sculpin", sans-serif;
      font-size: 25px;
      font-weight: 700;
      color: #26429A;
      padding: 20px 0px;
  }

  .text-event {
      font-family: "sculpin", sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: #26429A;
      padding-bottom: 12px;

  }

  .pill-event {
      border-radius: 12px;
      color: #26429A;
      padding: 4px 10px;
      font-size: 11px;
      font-family: "sculpin", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      margin-right: 10px;
  }

  .blue-pill {
      background-color: #94FCF0;
  }

  .pink-pill {
      background-color: #D9B6E6;
  }

  .green-pill {
      background-color: #B9E3A9;
  }

  .link-locatie {
      text-decoration: none !important;
      text-transform: uppercase;
  }

  .fit-text {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
  }

  .pagina-event {
      text-decoration: none !important;
      background-color: #EF502B;
      padding: 13px 30px 13px 13px;
      border-radius: 0px 0px 50px 0px;
      display: inline-block;
      margin-top: 5px;
      color: #fff !important;
  }

  .three-piece {
      width: 100%;
  }

  .parte-din-poveste {
      position: relative;
      margin: 150px 0px;
      background-color: #FBD24D;
      padding: 100px;
      border-radius: 0px 0px 0px 110px;
  }

  .star-blue {
      position: absolute;
      right: 5%;
      top: -50px;
  }

  .trompet {
      position: absolute;
      left: 0;
      bottom: 6px;

      max-width: 220px;
      width: 100%;
  }

  .epdp-container {
      margin: 50px 0px 0px 200px;
  }

  .epdp-text {
      font-size: 25px;
      font-family: "sculpin", sans-serif;
      color: #26429A !important;
  }

  .two-piece {
      display: none;
  }



  /* mobil */

  @media (max-width: 991px) {

      .calendar-header {
          padding-bottom: unset !important;
      }

      .menu-item>a {
          color: var(--text-dark) !important;
          padding: 0.75rem 1rem;
          display: block;
          background-color: #fff;
      }

      .dropdown-menu {
          background-color: transparent !important;
          box-shadow: none;
      }

      .dropdown-item {
          padding-left: 1.5rem;
      }

      #mainNavbar {
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
      }

      .navbar {
          position: unset !important;
      }

      .navbar-toggler-icon {
          width: 1.7em !important;
      }

      .navbar-toggler {
          top: 20px;
          right: 5px;
          position: absolute;
      }

      #nav-wrapper {
          padding-top: 30px;
      }

      .logo {
          max-width: 135px;
      }

      .navbar-nav {
          background-color: #fff;
          padding: 20px !important;
      }

      .container {
          padding: 0 20px !important;
      }

      .navbar-toggler:focus {
          text-decoration: none;
          outline: 0;
          box-shadow: unset !important;
      }

      #mainNavbar {
          z-index: 100;
      }

      .tehnologia-header {
          font-size: 26px;
      }

      .momente-text {
          font-size: 1.1rem;
      }

      .text-fff {
          font-size: 16px;
      }

      #hero {
          background-image: url('assets/hero-sm.png');
          background-position: left center;
          background-size: cover;
      }

      .intro {
          margin-left: 30px;
          padding-bottom: 50px;
          padding-top: 50px;
      }

      .cta-btn {
          padding: 15px 34px;
          position: relative;
      }

      .parteDinPoveste {
          margin-top: 150px !important;
          max-width: 30% !important;
      }

      .drums {
          margin-top: 240px !important;
          max-width: 30% !important;
          padding-right: 30px !important;
      }

      .onlyText {
          padding: 50px 30px 0px 0px !important;
          max-width: 1200px !important;
          font-size: 25px;
          color: #26429A !important;
      }

      .calendar-inner {
          margin-top: 50px;
          margin-left: 30px;
      }

      .calendar-days {
          font-family: "AmericanCaptain";
          font-size: 30px;
          font-weight: 400;
          color: #fff;
          padding: 20px 50px 20px 20px;
          background-color: #C170AC;
          cursor: pointer;
          border-radius: 0px 100px 0px 0px;
          transition: all 0.3s ease;
      }

      .events-inner {
          padding-top: 50px;
          padding-bottom: 50px;
          padding-left: 10px;
          margin-left: 90px;
      }

      .inline {
          display: flex;
          align-items: flex-end;
          gap: 30px;
          margin-top: 50px;
      }

      .calendar-header {
          max-width: 250px;
          font-size: 30px;
      }

      .parte-din-poveste {
          position: relative;
          margin: 90px 0px;
          background-color: #FBD24D;
          padding: 50px;
          border-radius: 0px 0px 0px 110px;
      }

      .trompet {
          display: none;
      }

      .epdp-container {
          margin: 30px 0px 0px 0px;
      }

      .parte-din-poveste-2 {
          max-width: 240px;
      }

      .star-blue {
          position: absolute;
          right: 5%;
          top: -50px;
          max-width: 200px;
      }

      .three-piece {
          display: block;
      }

      .two-piece {
          display: none;
      }

  }

  @media (max-width: 600px) {
      .three-piece {
          display: none;
      }

      .two-piece {
          display: block;
      }

      .star-blue {
          max-width: 90px;
      }

      .parte-din-poveste {
          padding: 30px;
          border-radius: 0px 0px 0px 60px;
      }

      .epdp-text {
          font-size: 21px;
          color: #26429A !important;
      }

      .event-card {
          width: 340px !important;

      }

      .nav-btn {
          top: 102% !important;
      }

      .nav-btn.left {
          left: 0px !important;
      }

      .nav-btn.right {
          right: 25px !important;
      }

      .events-inner {
          padding-top: 50px;
          padding-bottom: 50px;
          padding-left: 10px;
          margin-left: 10px;
      }

      .descriere-event {
          font-family: "sculpin", sans-serif;
          font-size: 21px;
          font-weight: 700;
          color: #26429A;
          padding: 20px 0px;
      }

      .organizator-event {
          font-family: "sculpin", sans-serif;
          font-size: 14px;
          font-weight: 700;
          color: #C170AC;
          text-transform: uppercase;
      }

      .inline {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          margin-top: 50px;
          flex-direction: column;
      }

      .calendar-header {
          max-width: 100%;
          font-size: 30px;
      }

      .calendar-days {
          font-family: "AmericanCaptain";
          font-size: 30px;
          font-weight: 400;
          color: #fff;
          padding: 20px 50px 20px 20px;
          background-color: #C170AC;
          cursor: pointer;
          border-radius: 0px 0px 0px 0px;
          transition: all 0.3s ease;
          width: 100%;
      }

      .onlyText {
          padding: 50px 30px 0px 0px !important;
          max-width: 1200px !important;
          font-size: 21px;
          color: #26429A !important;
      }


      .heroGroup {
          max-width: 95% !important;
          margin-top: 50px !important;
      }

      .parteDinPoveste {
          margin-top: 70px !important;
          max-width: 30% !important;
      }

      .drums {
          margin-top: 120px !important;
          max-width: 30% !important;
          padding-right: 20px !important;
      }

      .events-container {
          min-height: 500px;
          /* background-image: url(assets//bgCalendar.svg); */

          background:
              linear-gradient(to right, #1db8e2 50%, #26429a 50%) top/100% 50% no-repeat,
              linear-gradient(to right, #fbd24d 50%, #c170ac 50%) bottom/100% 50% no-repeat;

          background-color: #fff;
          /* fallback */
      }

      section {
          overflow-y: hidden !important;
          overflow-x: hidden !important;
      }


  }




  /* Map styles */

  #map {
      height: 70vh;
      width: 100%;
  }

  #searchBox {
      position: absolute;
      top: 10px;
      left: 20%;
      transform: translateX(-50%);
      z-index: 1000;
      width: 300px;
      padding: 6px 10px;
      border: 1px solid #aaa;
      border-radius: 6px;
  }

  #searchResults {
      position: absolute;
      top: 42px;
      left: 20%;
      transform: translateX(-50%);
      z-index: 1000;
      background: #fff;
      border: 1px solid #ccc;
      width: 300px;
      max-height: 200px;
      overflow-y: auto;
      display: none;
  }

  #searchResults div {
      padding: 7px 5px;
      cursor: pointer;
      font-size: 12px;
  }

  #searchResults div:hover {
      background: #eee;
  }

  .map-wrap {
      position: relative;
  }

  .leaflet-popup-content {
      color: #000 !important;
  }


  /* css debug */

  /* Debug overflow scroll */
  *[style*="overflow"],
  *[style*="overflow-y"],
  *[style*="overflow-x"] {
      outline: 3px dashed red !important;
      outline-offset: -3px;
  }

  /* dacă au scroll vertical explicit */
  *[style*="overflow-y: auto"],
  *[style*="overflow-y: scroll"] {
      background-color: rgba(255, 0, 0, 0.1) !important;
  }

  /* dacă au scroll orizontal explicit */
  *[style*="overflow-x: auto"],
  *[style*="overflow-x: scroll"] {
      background-color: rgba(0, 0, 255, 0.1) !important;
  }