/*
 * Theme Name: Modralinka Twenty Twenty-Five Child
 * Author: Matej Pokorny
 * Author URI: https://www.matejpokorny.cz
 * Template: twentytwentyfive
 * Text Domain: twentytwentyfive-child
 * */

/* Import parent theme styles */
@import url("../twentytwentyfive/style.css");

/* custom styles for webcall scripts floating button */
.css-46df2h > .icon {
  font-size: 40px !important;
  color: var(--wp--preset--color--accent-2) !important;
}
.css-46df2h {
  background-color: rgb(255, 255, 255) !important;
  box-shadow: rgba(121, 211, 242, 0.3) 1px 1px 1px 2px !important;
  border: 2px solid rgb(121, 211, 242) !important;
}

/* Force app menu to align left */
.wp-block-navigation.items-justified-right {
  --navigation-layout-justification-setting: flex-start !important;
  --navigation-layout-justify: flex-start !important;
}

/* Hide blue line on mobile menu */
@media (max-width: 599px) {
  .main-nav-contact-services {
    border-bottom: none !important;
  }
}

/* Standardized Custom Buttons Styling */
.wp-block-custom-button-wrapper,
.call-us-button-wrapper,
.chat-button-wrapper,
.chat-help-button-wrapper,
.email-us-button-wrapper,
.emailus-button-wrapper,
.personal-help-button-wrapper,
.trustbox-button-wrapper,
.webcall-button-wrapper {
  margin: auto !important;
  display: inline-block;
  width: 100%;
  max-width: 600px; /* Standardized width for all custom buttons */
  height: 100px; /* Fixed height for all button wrappers */
}

/* Common styling for all custom buttons */
.wp-block-custom-button,
.call-us-button,
.chat-button,
.chat-help-button,
.email-us-button,
.emailus-button,
.personal-help-button,
.trustbox-button,
.webcall-button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px !important;
  border-radius: 50px !important;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 100%; /* Full width within the wrapper */
  height: 100%; /* Full height of the wrapper */
  box-sizing: border-box;
}

/* Hover effects for all custom buttons */
.wp-block-custom-button:hover,
.call-us-button:hover,
.chat-button:hover,
.chat-help-button:hover,
.email-us-button:hover,
.emailus-button:hover,
.personal-help-button:hover,
.trustbox-button:hover,
.webcall-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Active state for all custom buttons */
.wp-block-custom-button:active,
.call-us-button:active,
.chat-button:active,
.chat-help-button:active,
.email-us-button:active,
.emailus-button:active,
.personal-help-button:active,
.trustbox-button:active,
.webcall-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Styling for helpline button */
.helpline-button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #ff0066;
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.helpline-button:hover {
  background-color: #e00058;
  transform: scale(1.05);
}

/* Styling for quick exit button */
.quick-exit-button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #444444;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.quick-exit-button:hover {
  background-color: #333333;
  transform: scale(1.05);
}

/* Styling for main navigation contact services links */
.main-nav-contact-services {
  border-bottom: 3px solid #0b9bd5;
  padding-bottom: 2px;
}

/* Common icon styling for all buttons */
.chat-icon-left,
.chat-icon-right,
.email-us-icon-left,
.email-us-icon-right,
.personal-help-icon-left,
.personal-help-icon-right,
.webcall-icon-left,
.webcall-icon-right,
.call-us-icon-left,
.call-us-icon-right,
.chat-help-icon-left,
.chat-help-icon-right,
.trustbox-icon-left,
.trustbox-icon-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left icon margins */
.chat-icon-left,
.email-us-icon-left,
.personal-help-icon-left,
.webcall-icon-left,
.call-us-icon-left,
.chat-help-icon-left,
.trustbox-icon-left {
  margin-right: 0.25rem;
}

/* Right icon margins */
.chat-icon-right,
.email-us-icon-right,
.personal-help-icon-right,
.webcall-icon-right,
.call-us-icon-right,
.chat-help-icon-right,
.trustbox-icon-right {
  margin-left: 0.25rem;
}

/* Dashicons styling */
.dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Responsive styling for custom buttons */
@media (max-width: 600px) {
  .wp-block-custom-button-wrapper,
  .call-us-button-wrapper,
  .chat-button-wrapper,
  .chat-help-button-wrapper,
  .email-us-button-wrapper,
  .emailus-button-wrapper,
  .personal-help-button-wrapper,
  .webcall-button-wrapper,
  .trustbox-button-wrapper {
    max-width: 100%; /* Full width on mobile */
    height: 100px; /* Smaller fixed height on mobile */
  }

  .wp-block-custom-button,
  .call-us-button,
  .chat-button,
  .chat-help-button,
  .email-us-button,
  .emailus-button,
  .personal-help-button,
  .trustbox-button,
  .webcall-button {
    padding: 12px 20px !important;
  }
}

/* Ultra-small screen styling for custom buttons */
@media (max-width: 320px) {
  .wp-block-custom-button-wrapper,
  .call-us-button-wrapper,
  .chat-button-wrapper,
  .chat-help-button-wrapper,
  .email-us-button-wrapper,
  .emailus-button-wrapper,
  .personal-help-button-wrapper,
  .trustbox-button-wrapper,
  .webcall-button-wrapper {
    height: auto;
    min-height: 70px;
  }

  .wp-block-custom-button,
  .call-us-button,
  .chat-button,
  .chat-help-button,
  .email-us-button,
  .emailus-button,
  .personal-help-button,
  .trustbox-button,
  .webcall-button {
    padding: 6px 8px !important;
  }

  /* Icon margins for ultra-small screens */
  .chat-icon-left,
  .email-us-icon-left,
  .personal-help-icon-left,
  .webcall-icon-left,
  .call-us-icon-left,
  .chat-help-icon-left,
  .trustbox-icon-left {
    margin-right: 0.15rem;
  }

  .chat-icon-right,
  .email-us-icon-right,
  .personal-help-icon-right,
  .webcall-icon-right,
  .call-us-icon-right,
  .chat-help-icon-right,
  .trustbox-icon-right {
    margin-left: 0.15rem;
  }

  .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* Special case for buttons placed in row/columns layout */
.wp-block-columns .wp-block-custom-button-wrapper,
.wp-block-columns .call-us-button-wrapper,
.wp-block-columns .chat-button-wrapper,
.wp-block-columns .chat-help-button-wrapper,
.wp-block-columns .email-us-button-wrapper,
.wp-block-columns .emailus-button-wrapper,
.wp-block-columns .personal-help-button-wrapper,
.wp-block-columns .trustbox-button-wrapper {
  height: 120px; /* Consistent fixed height even in columns */
}

/* Latest Posts Block Styling */
.wp-block-latest-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 40px;
  padding: 20px;
  border-radius: 8px;
  /* The background-color will be set by the WordPress block editor */
}

.wp-block-latest-posts li {
  background-color: white;
  border-radius: 20px;
  overflow: visible;
  box-shadow: none;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.wp-block-latest-posts li:hover {
  transform: translateY(-5px);
  box-shadow: none;
}

.wp-block-latest-posts__featured-image {
  width: 100%;
  margin-bottom: 0;
  line-height: 0;
}

.wp-block-latest-posts__featured-image img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Modern browsers - creates square ratio */
  height: 300px; /* Fallback for older browsers */
  border-radius: 20px;
  border: 1px solid #78d2f2;
  object-fit: cover;
  box-shadow: 6px 6px 0 #d7f1fb;
}

.wp-block-latest-posts a {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  padding: 16px 16px 8px;
  display: block;
  font-size: 18px;
  line-height: 1.4;
}

.wp-block-latest-posts__post-excerpt {
  padding: 0 16px 16px;
  margin-top: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.wp-block-latest-posts__post-date {
  padding: 0 16px;
  color: #777;
  font-size: 12px;
  margin-bottom: 8px;
}

/* Responsive styling for latest posts */
@media (max-width: 768px) {
  .wp-block-latest-posts {
    grid-template-columns: 1fr;
    grid-gap: 30px;
    padding: 15px;
  }
}

/* Classes stolen from tailwindcss */
.relative {
  position: relative;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.justify-items-center {
  justify-items: center;
}

.w-full {
  width: 100%;
}

.w-sm {
  width: 20rem; /* 320px */
}

@media (max-width: 320px) {
  .text-2rem-sm-down {
    font-size: 2rem !important;
  }
}

.min-w-sm {
  min-width: 20rem; /* 320px */
}

.max-w-sm {
  max-width: 20rem; /* 320px */
}

.max-w-lg {
  max-width: 32rem; /* 512px */
}

.max-w-screen {
  max-width: 100vw;
}

.h-full {
  height: 100%;
}

.bg-white-important {
  background-color: white !important;
}

.bg-size-timeline {
  background-size: contain !important;
}

@media (max-width: 599px) {
  .bg-size-timeline {
    background-size: 100% 100% !important;
  }
}

.shadow-solid-sm {
  box-shadow: 4px 4px 0 #d7f1fb;
}

.shadow-solid {
  box-shadow: 6px 6px 0 #d7f1fb;
}

.shadow-solid-important {
  box-shadow: 6px 6px 0 #d7f1fb !important;
}

.shadow-solid-lg {
  box-shadow: 8px 8px 0 #d7f1fb;
}

.shadow-solid-xl {
  box-shadow: 10px 10px 0 #d7f1fb;
}

.border-light-blue {
  border: 1px solid #78d2f2;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Hide block on frontend */
.editor-only-block {
  display: none !important;
}

/* Show block in Gutenberg editor (backend) */
body.wp-admin .editor-only-block,
.block-editor-block-list__block .editor-only-block {
  display: block;
}

/* Margin auto utilities */
.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-auto-important {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mt-auto {
  margin-top: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* Margin percentage utilities with important */
.ml-10-important {
  margin-left: 10% !important;
}

.ml-20-important {
  margin-left: 20% !important;
}

.ml-30-important {
  margin-left: 30% !important;
}

.mr-10-important {
  margin-right: 10% !important;
}

.mr-20-important {
  margin-right: 20% !important;
}

.mr-30-important {
  margin-right: 30% !important;
}

@media (max-width: 400px) {
  .mlrm-25 {
    margin-left: -25px !important;
    margin-right: -25px !important;
  }
}

/* Padding auto utilities */
.p-auto {
  padding: auto;
}

.px-auto {
  padding-left: auto;
  padding-right: auto;
}

.px-auto-important {
  padding-left: auto !important;
  padding-right: auto !important;
}

.py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.pl-auto {
  padding-left: auto;
}

.pr-auto {
  padding-right: auto;
}

.pt-auto {
  padding-top: auto;
}

.pb-auto {
  padding-bottom: auto;
}

/* Tailwind sm breakpoint */
@media (min-width: 640px) {
  .sm\:justify-center {
    justify-content: center;
  }
}

/* Tailwind md breakpoint */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:justify-center {
    justify-content: center;
  }
}

/* Tailwind lg breakpoint */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:justify-center {
    justify-content: center;
  }
}

/* Tailwind xl breakpoint */
@media (min-width: 1280px) {
  .xl\:justify-center {
    justify-content: center;
  }
}

/* Timeline item utility */
@media (max-width: 900px) {
  .ml-timeline-item {
    max-width: unset !important;
  }
}

/* End tailwindcss classes */