/**
 * Theme Name:     Twenty Twenty-Five Child
 * Author:         Jason Matulick
 * Template:       twentytwentyfive
 * Text Domain:	   twenty-twenty-five-child
 * Description:    Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
 */


/* styling for main header bar */

header.wp-block-template-part:has(.sticky-header) {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #F5F0E6;
}

/* reduces padding between header and content */

.wp-block-group.alignfull.has-global-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 600px) {
  .modal {
    width: 80% !important; /* or 100% if you want full width */
  }

  .modal-content {
    width: 100%; /* ensures inner content fills the modal */
    max-height: 80vh; /* optional: reduce height slightly for smaller screens */
  }
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* or whatever size you want */
  background: rgba(0,0,0,0.9);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* 👈 Prevents blocking clicks */
  transition: opacity 0.3s ease;
  padding: 20px;
  border-radius: 8px;
}


.modal.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* 👈 Enables interaction */

}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow-y: auto;
  max-height: 90vh;
}


.wp-block-button__link {
  cursor: pointer;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

#booking-date {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 300px;
}


/* Container styling */
form {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  max-width: 500px;
  margin: 0 auto;
}

/* Headline */
form h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #2c2c2c;
}

/* Labels */
form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Inputs, Selects, Textareas */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Placeholder styling */
form input::placeholder,
form textarea::placeholder {
  color: #999;
}

/* Dropdowns */
form select {
  background-color: #fff;
  cursor: pointer;
}

/* Textarea */
form textarea {
  resize: vertical;
}

/* Submit Button (optional) */
form button[type="submit"] {
  background-color: #007c91;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

form button[type="submit"]:hover {
  background-color: #005f6b;
}

.form-step {
  display: none;
}
.form-step.active {
  display: block;
}

/* to get contact form to centre on page */

#forminator-module-728 {
  margin: 0 auto;
  display: block;
  max-width: 600px;
}

/* to centre footer content on mobile */
@media (max-width: 768px) {
  .footer-centre-on-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer-centre-on-mobile ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer-centre-on-mobile li {
    justify-content: center;
  }
}


/* controls fade in of columns on tours page */
.wp-block-columns.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 2s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* controls paragraphs next to icons in why choose us block on bar staffing service page */

.why-choose-us {
  color: black;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.why-choose-us svg {
  flex-shrink: 0;
}

/* controls font size of paragraphs next to icons in why choose us block on bar staffing service page */

@media (max-width: 768px) {
    .why-choose-us {
        font-size: 19px !important;
    }
     
}