@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Custom font ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'ubuntu-light';
  src: url(fonts/ubuntu-light.woff2) format('woff2'),
       url(fonts/ubuntu-light.woff) format('woff'),
       url(fonts/ubuntu-light.ttf) format('truetype');
}

/* ─── Base layer ───────────────────────────────────────────────────────────── */
@layer base {
  body {
    font-family: 'Ubuntu', sans-serif;
    @apply text-gray-700;
  }

  p, ul, ol {
    font-family: 'ubuntu-light', sans-serif;
    @apply text-lg leading-8;
  }

  a {
    @apply no-underline;
  }

  footer p,
  footer ul,
  footer ol {
    @apply text-base;
    line-height: 1.4rem;
  }
}

/* ─── Custom utilities ─────────────────────────────────────────────────────── */
@layer utilities {
  /* Bootstrap-compatible semantic colour utilities kept for icon colouring */
  .text-primary  { color: #2E86DE; }
  .text-success  { color: #1DD1A1; }
  .text-danger   { color: #FF6B6B; }
  .text-warning  { color: #FECA57; }
  .text-info     { color: #49dbfb; }

  .text-gradient {
    background: linear-gradient(90deg, #5f27cd, #49dbfb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .noir-et-blanc {
    filter: grayscale(100%);
  }

  .text-strokes {
    text-shadow:
      3px 0 0 #fff, -3px 0 0 #fff,
      0 3px 0 #fff, 0 -3px 0 #fff,
      1px 1px #fff, -1px -1px 0 #fff,
      1px -1px 0 #fff, -1px 1px 0 #fff;
  }
}

/* ─── Components ───────────────────────────────────────────────────────────── */
@layer components {

  /* ── Navbar ─────────────────────────────────────────────────────────────── */

  .site-header {
    @apply fixed top-0 left-0 right-0 z-50 h-20;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  /* Logo white shown by default, black hidden */
  .site-header .logo-black { display: none; }

  /* Scrolled state: white background */
  .site-header.active {
    @apply bg-white border-b border-gray-200;
  }
  .site-header.active .logo-white { display: none; }
  .site-header.active .logo-black { display: inline-flex; align-items: center; }
  .site-header.active .nav-link   { @apply text-gray-800; }
  .site-header.active .nav-underline { @apply bg-gray-800; }

  .nav-link {
    @apply inline-flex items-center h-full px-5 text-white transition-colors duration-200 hover:no-underline;
  }

  .nav-underline {
    @apply block h-0.5 bg-white w-0 transition-all duration-300 mt-auto;
    margin: 0 auto;
  }

  .nav-item:hover .nav-underline { @apply w-full; }

  /* Desktop: flex nav; Mobile: hidden dropdown */
  #navbarTogglerSub {
    display: none;
    /* Mobile open state */
    position: absolute;
    right: 0;
    top: 80px;
    background-color: #2c2c2c;
    border: 2px solid #505050;
    padding: 10px 0;
    z-index: 100;
    min-width: 220px;
  }

  #navbarTogglerSub.is-open {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 1280px) {
    #navbarTogglerSub,
    #navbarTogglerSub.is-open {
      display: flex !important;
      flex-direction: row;
      align-items: stretch;
      height: 100%;
      position: static;
      background-color: transparent;
      border: none;
      padding: 0;
      min-width: auto;
    }

    #navbarTogglerSub ul {
      height: 100%;
      align-items: stretch;
    }
  }

  /* Dropdown menu */
  .dropdown { @apply relative; }

  .dropdown-menu {
    @apply hidden absolute left-0 top-full bg-gray-900 shadow-lg z-50;
    width: 100%;
    margin-top: -1px;
    border-radius: 0;
    border: none;
    box-shadow: 0 5px 14px -5px rgba(0, 0, 0, 1);
  }

  @media (min-width: 1280px) {
    .dropdown:hover .dropdown-menu { @apply block; }
  }

  .dropdown-menu.is-open { @apply block; }

  .dropdown-item {
    @apply block px-6 py-3 text-white text-sm hover:bg-gray-700;
  }

  /* ── Hero / Jumbotron ────────────────────────────────────────────────────── */

  #myJumbotron {
    @apply relative z-10 overflow-hidden;
    background: linear-gradient(90deg, #5f27cd, #49dbfb);
    min-height: 550px;
  }

  #myJumbotron.mini { min-height: 350px; }

  #myJumbotron h1 {
    @apply text-white font-semibold mb-4;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 100%;
    letter-spacing: 0.5px;
    animation: fadeInUp 1.2s both;
  }

  #myJumbotron.mini h1 {
    font-size: 4rem;
    @apply mt-12;
  }

  #myJumbotron h2 {
    @apply text-white font-semibold;
    font-size: clamp(1.8rem, 4vw, 3.75rem);
  }

  #myJumbotron h3 {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    animation: fadeInUp 1.2s both;
  }

  #myJumbotron h4 {
    @apply text-white;
    animation: fadeInLeft 1.2s both;
  }

  #myJumbotron p {
    @apply mb-4;
    font-size: 1.125rem;
    color: #d5d5d5;
  }

  #myJumbotron img { animation: slideInRight 1.2s both; }

  .background-grid {
    @apply absolute pointer-events-none;
    width: 150%;
    height: 150%;
    margin-top: -150px;
    background: url(images/pattern-grid.png) repeat left top;
    z-index: -1;
  }

  /* ── Section spacing ─────────────────────────────────────────────────────── */

  .step-row { @apply my-20; }

  .step-image { @apply w-full object-contain; max-height: 300px; }

  /* ── Buttons ─────────────────────────────────────────────────────────────── */

  .btn {
    @apply inline-flex items-center justify-center px-6 py-2 rounded-full font-medium
           text-center cursor-pointer transition-all duration-200 whitespace-nowrap
           leading-none hover:no-underline;
  }

  .btn-sm  { @apply px-4 py-1.5 text-sm; }
  .btn-lg  { @apply px-8 py-3 text-base; }
  .btn-block { @apply w-full; }

  .btn-primary         { @apply bg-blue-600 text-white hover:bg-blue-700; }
  .btn-danger          { @apply bg-red-500 text-white hover:bg-red-600; }
  .btn-secondary       { @apply bg-gray-500 text-white hover:bg-gray-600; }
  .btn-outline-secondary {
    @apply border-2 border-gray-500 text-gray-700 hover:bg-gray-100;
  }
  .btn-outline-light {
    @apply border-2 border-white text-white hover:bg-white hover:text-gray-900;
  }

  /* ── Cards ───────────────────────────────────────────────────────────────── */

  .card           { @apply rounded-lg border border-gray-200 overflow-hidden; }
  .card-body      { @apply p-6 bg-gray-100; }
  .card-title     { @apply text-lg font-semibold mb-3; }
  .card-text      { @apply text-sm text-gray-600 mb-2; }

  .list-group-flush {
    @apply border-t border-gray-200 divide-y divide-gray-200;
  }
  .list-group-item { @apply px-4 py-3 text-sm text-gray-700; }

  /* ── Modals (native <dialog>) ────────────────────────────────────────────── */

  dialog.modal {
    @apply rounded-lg shadow-2xl p-0 bg-white border-0;
    width: min(90vw, 56rem);
    max-height: 90vh;
  }
  dialog.modal::backdrop { background: rgba(0, 0, 0, 0.6); }

  .modal-header {
    @apply flex items-center justify-between px-5 py-4 border-b border-gray-200;
  }
  .modal-title  { @apply text-xl font-semibold m-0; }
  .modal-close  {
    @apply text-gray-400 hover:text-gray-700 bg-transparent border-0 text-3xl
           leading-none cursor-pointer transition-colors;
  }
  .modal-body {
    @apply px-5 py-4 overflow-y-auto;
    max-height: calc(90vh - 9rem);
  }
  .modal-footer {
    @apply flex justify-end gap-3 px-5 py-4 border-t border-gray-200;
  }

  /* ── Contact form ────────────────────────────────────────────────────────── */

  .form-field {
    @apply relative mb-10;
  }

  .form-field input {
    @apply w-full border-0 border-b-2 border-gray-300 outline-none bg-transparent
           pb-1 text-base;
  }

  .form-field input:focus {
    border-color: #5f27cd;
  }

  .form-field label {
    @apply absolute bottom-0 left-0 w-full h-full pointer-events-none;
  }

  .form-field .label-text {
    @apply absolute bottom-0 left-2.5 text-gray-500 transition-all duration-300;
  }

  .form-field input:focus ~ label .label-text,
  .form-field input:valid ~ label .label-text,
  .form-field input:read-only ~ label .label-text {
    transform: translateY(-160%);
    @apply text-sm;
    color: #5f27cd;
  }

  .form-control {
    @apply w-full border border-gray-300 rounded px-3 py-2 text-base outline-none;
    transition: border-color 0.2s;
  }
  .form-control:focus { border-color: #5f27cd; }

  /* ── Footer ──────────────────────────────────────────────────────────────── */

  footer a {
    @apply text-gray-400 hover:text-white transition-colors;
  }

  /* ── Typeform button override ─────────────────────────────────────────────── */

  a.typeform-share.button {
    @apply inline-block no-underline text-white cursor-pointer;
    background: linear-gradient(90deg, #5f27cd, #49dbfb);
    border: 2px solid #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    padding: 0 33px;
    border-radius: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
  }

  #contact p { @apply m-0; }
}

/* ─── Keyframe animations ──────────────────────────────────────────────────── */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to   { transform: translate3d(0, 0, 0); }
}