/* ============================================
   Site-Wide CSS Fixes for azsurgery.gr
   Targets the actual section IDs used in HTML
   ============================================ */

/* ===========================================
   FONTS & BASE STYLES
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');

body,
input,
textarea {
  font-family: 'Oxygen', sans-serif;
}

.btn,
.alert,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: 'Oxygen', sans-serif;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* ===========================================
   COLOR SCHEME
   =========================================== */
:root {
  --primary-teal: #00a885;
  --primary-teal-dark: #005c48;
  --info-blue: #7e9b9f;
  --info-blue-dark: #597478;
  --warning-gold: #f3c649;
  --danger-red: #f28281;
  --white: #ffffff;
  --light-gray: #efefef;
  --medium-gray: #d6d6d6;
  --dark-gray: #28324e;
  --footer-bg: #475577;
  --text-dark: #232323;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn {
  border-radius: 1.6em;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Success Button (Main Teal) */
.btn-success {
  background-color: var(--primary-teal);
  border-color: var(--primary-teal);
  color: var(--white);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--primary-teal-dark);
  border-color: var(--primary-teal-dark);
  color: var(--white);
}

/* Success Outline Button */
.btn-success-outline {
  background: none;
  border-color: var(--primary-teal-dark);
  color: var(--primary-teal-dark);
}

.btn-success-outline:hover,
.btn-success-outline:focus,
.btn-success-outline:active {
  background-color: var(--primary-teal);
  border-color: var(--primary-teal);
  color: var(--white);
}

/* Info Button (Blue-Gray) */
.btn-info {
  background-color: var(--info-blue);
  border-color: var(--info-blue);
  color: var(--white);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--info-blue-dark);
  border-color: var(--info-blue-dark);
  color: var(--white);
}

/* ===========================================
   NAVIGATION - #menu-nav
   =========================================== */
#menu-nav .navbar {
  background: var(--light-gray);
  padding: 0.5rem 1rem;
}

#menu-nav .navbar-caption {
  color: var(--text-dark);
  font-size: 12px;
  font-family: 'Oxygen', sans-serif;
  line-height: 1.3;
}

/* SEO H1 Title - styled to match navbar-caption */
.site-h1-title {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  line-height: inherit;
  display: inline;
}

/* Page H1 Title - for content pages, matches display-2 styling */
h1.page-h1-title {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: 'Oxygen', sans-serif;
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.2;
}

/* H1 on sections with background images/overlays - WHITE text for readability */
/* Hero sections */
.mbr-section-hero h1.page-h1-title,
.header2 h1.page-h1-title,
#header2-hero h1.page-h1-title,
/* Parallax background sections */
.mbr-parallax-background h1.page-h1-title,
/* Sections with background images */
.mbr-section[style*="background-image"] h1.page-h1-title,
section[style*="background-image"] h1.page-h1-title,
/* Sections that have an overlay child */
.mbr-section:has(.mbr-overlay) h1.page-h1-title,
/* Article sections with parallax */
.article.mbr-parallax-background h1.page-h1-title,
/* Teal/green background sections */
section[style*="rgb(0, 168, 133)"] h1.page-h1-title,
.mbr-section[style*="rgb(0, 168, 133)"] h1.page-h1-title,
/* Dark footer background */
section[style*="rgb(71, 85, 119)"] h1.page-h1-title {
  color: #ffffff !important;
}

/* General text on sections with background images/overlays - WHITE text for readability */
/* Hero sections */
.mbr-section-hero p,
.mbr-section-hero .lead,
.mbr-section-hero li,
.mbr-section-hero span,
.header2 p,
.header2 .lead,
.header2 li,
.header2 span,
#header2-hero p,
#header2-hero .lead,
#header2-hero li,
#header2-hero span,
/* Parallax background sections */
.mbr-parallax-background p,
.mbr-parallax-background .lead,
.mbr-parallax-background li,
.mbr-parallax-background span,
/* Sections with background images */
.mbr-section[style*="background-image"] p,
.mbr-section[style*="background-image"] .lead,
.mbr-section[style*="background-image"] li,
.mbr-section[style*="background-image"] span,
section[style*="background-image"] p,
section[style*="background-image"] .lead,
section[style*="background-image"] li,
section[style*="background-image"] span,
/* Sections that have an overlay child */
.mbr-section:has(.mbr-overlay) p,
.mbr-section:has(.mbr-overlay) .lead,
.mbr-section:has(.mbr-overlay) li,
.mbr-section:has(.mbr-overlay) span,
/* Article sections with parallax */
.article.mbr-parallax-background p,
.article.mbr-parallax-background .lead,
.article.mbr-parallax-background li,
.article.mbr-parallax-background span,
/* Teal/green background sections */
section[style*="rgb(0, 168, 133)"] p,
section[style*="rgb(0, 168, 133)"] .lead,
section[style*="rgb(0, 168, 133)"] li,
section[style*="rgb(0, 168, 133)"] span,
.mbr-section[style*="rgb(0, 168, 133)"] p,
.mbr-section[style*="rgb(0, 168, 133)"] .lead,
.mbr-section[style*="rgb(0, 168, 133)"] li,
.mbr-section[style*="rgb(0, 168, 133)"] span,
/* Dark footer background */
section[style*="rgb(71, 85, 119)"] p,
section[style*="rgb(71, 85, 119)"] .lead,
section[style*="rgb(71, 85, 119)"] li,
section[style*="rgb(71, 85, 119)"] span {
  color: #ffffff !important;
}

/* OVERRIDE: Explicitly light backgrounds should have dark text */
/* Specific fix for index.html hero which uses #header2-hero with white background */
#header2-hero[style*="rgb(255, 255, 255)"] p,
#header2-hero[style*="rgb(255, 255, 255)"] .lead,
#header2-hero[style*="rgb(255, 255, 255)"] li,
#header2-hero[style*="rgb(255, 255, 255)"] span,
#header2-hero[style*="rgb(255, 255, 255)"] h1,
.mbr-section[style*="rgb(255, 255, 255)"] p,
.mbr-section[style*="rgb(255, 255, 255)"] .lead,
.mbr-section[style*="rgb(255, 255, 255)"] li,
.mbr-section[style*="rgb(255, 255, 255)"] span,
.mbr-section[style*="rgb(239, 239, 239)"] p,
.mbr-section[style*="rgb(239, 239, 239)"] .lead,
.mbr-section[style*="rgb(239, 239, 239)"] li,
.mbr-section[style*="rgb(239, 239, 239)"] span,
section[style*="rgb(255, 255, 255)"]:not(:has(.mbr-overlay)) p,
section[style*="rgb(255, 255, 255)"]:not(:has(.mbr-overlay)) .lead,
section[style*="rgb(255, 255, 255)"]:not(:has(.mbr-overlay)) li,
section[style*="rgb(255, 255, 255)"]:not(:has(.mbr-overlay)) span {
  color: var(--text-dark, #232323) !important;
}

/* H1 on light backgrounds - dark text */
.mbr-section[style*="rgb(255, 255, 255)"] h1.page-h1-title,
.mbr-section[style*="rgb(239, 239, 239)"] h1.page-h1-title,
.mbr-section[style*="rgb(242, 242, 242)"] h1.page-h1-title,
section[style*="rgb(255, 255, 255)"]:not(:has(.mbr-overlay)) h1.page-h1-title,
section[style*="rgb(239, 239, 239)"]:not(:has(.mbr-overlay)) h1.page-h1-title {
  color: var(--text-dark, #232323);
}

/* Responsive H1 sizing */
@media (max-width: 991px) {
  h1.page-h1-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  h1.page-h1-title {
    font-size: 1.5rem;
    text-align: center;
  }
}

#menu-nav .navbar-toggler {
  color: var(--primary-teal);
}

#menu-nav .nav-link.link,
#menu-nav .dropdown-item {
  color: var(--primary-teal);
  font-family: 'Oxygen', sans-serif;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

#menu-nav .nav-link.link:hover,
#menu-nav .dropdown-item:hover,
#menu-nav .nav-link.link:focus,
#menu-nav .dropdown-item:focus {
  color: var(--primary-teal-dark);
}

#menu-nav .nav-btn .btn {
  font-size: 10px;
}

#menu-nav .navbar-brand {
  display: flex;
  align-items: center;
}

#menu-nav .navbar-logo img {
  max-height: 60px;
  margin-right: 10px;
}

/* Close icon colors */
#menu-nav .close-icon::before,
#menu-nav .close-icon::after {
  background-color: var(--primary-teal);
}

/* ===========================================
   MOBILE NAVIGATION FIX
   Solid background for mobile dropdown menu
   =========================================== */
@media (max-width: 767px) {
  /* Mobile nav dropdown solid background */
  #menu-nav .nav-dropdown.navbar-toggleable-sm {
    background-color: var(--light-gray) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Mobile nav links styling */
  #menu-nav .nav-dropdown-sm .link,
  #menu-nav .nav-dropdown-sm .nav-link {
    color: var(--text-dark) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background-color: transparent;
    transition: background-color 0.2s ease;
  }
  
  /* Mobile nav links hover/focus */
  #menu-nav .nav-dropdown-sm .link:hover,
  #menu-nav .nav-dropdown-sm .link:focus,
  #menu-nav .nav-dropdown-sm .nav-link:hover,
  #menu-nav .nav-dropdown-sm .nav-link:focus {
    background-color: rgba(0, 168, 133, 0.1) !important;
    color: var(--primary-teal-dark) !important;
  }
  
  /* Mobile nav button styling */
  #menu-nav .nav-dropdown-sm .nav-btn .btn {
    margin: 1rem 1.5rem;
    display: block;
  }

  /* Hamburger icon color for visibility */
  #menu-nav .hamburger-icon {
    box-shadow: 0 -6px 0 1px var(--primary-teal),
                0 0 0 1px var(--primary-teal),
                0 6px 0 1px var(--primary-teal) !important;
    background-color: transparent !important;
  }
}

/* ===========================================
   HERO SECTION - #header2-hero
   =========================================== */
#header2-hero {
  background-color: var(--white);
}

#header2-hero h3,
#header2-hero .mbr-section-title {
  font-size: 46px;
  color: var(--text-dark);
  font-family: 'Open Sans', sans-serif;
}

#header2-hero .mbr-section-text {
  color: var(--text-dark);
  text-align: left;
  font-family: 'Oxygen', sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

#header2-hero .mbr-section-text b,
#header2-hero .mbr-section-text strong {
  font-size: 15px;
}

#header2-hero .mbr-figure img {
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   INTRO SECTION - #header3-intro
   =========================================== */
#header3-intro {
  background-color: var(--light-gray);
}

#header3-intro .mbr-section-title {
  font-size: 32px;
  text-align: center;
  color: var(--text-dark);
}

#header3-intro .mbr-section-subtitle {
  color: var(--dark-gray);
  font-size: 16px;
  text-align: center;
}

/* ===========================================
   FEATURES/CARDS SECTION - #features1-main
   =========================================== */
#features1-main {
  background-color: var(--white);
}

#features1-main .striped .mbr-cards-col:nth-child(2n+1) {
  background-color: var(--light-gray);
}

#features1-main .card.cart-block {
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

#features1-main .card.cart-block:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

#features1-main .card-img img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

#features1-main .card.cart-block:hover .card-img img {
  transform: scale(1.05);
}

#features1-main .card-block {
  padding: 1.5rem;
}

#features1-main .card-title {
  color: var(--text-dark);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

#features1-main .card-subtitle {
  color: var(--info-blue);
  font-size: 0.9rem;
}

#features1-main .card-text {
  color: var(--text-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}

#features1-main .card-btn {
  margin-top: 1rem;
}

/* Striped card styling */
#features1-main .mbr-cards-col:nth-child(odd) .card-title {
  color: var(--text-dark);
}

#features1-main .mbr-cards-col:nth-child(odd) .card-text {
  color: var(--text-dark);
}

/* ===========================================
   CTA BUTTONS SECTION - #buttons1-cta
   =========================================== */
#buttons1-cta {
  background-color: var(--white);
}

/* ===========================================
   INFO BOX - #msg-box1-info
   =========================================== */
#msg-box1-info {
  background-color: var(--light-gray);
}

#msg-box1-info h3,
#msg-box1-info .display-2 {
  font-size: 36px;
  text-align: left;
  color: var(--dark-gray);
}

#msg-box1-info h2,
#msg-box1-info .mbr-info-subtitle {
  color: var(--dark-gray);
  font-size: 18px;
}

/* ===========================================
   FOOTER - #contacts4-footer
   =========================================== */
#contacts4-footer {
  background-color: var(--footer-bg);
}

#contacts4-footer p {
  color: var(--white);
}

#contacts4-footer span {
  color: #cccccc;
}

#contacts4-footer strong {
  color: #cccccc;
}

#contacts4-footer ul {
  color: var(--white);
}

#contacts4-footer .mbr-contacts p {
  color: var(--white);
}

#contacts4-footer a {
  color: var(--white);
  transition: opacity 0.2s ease;
}

#contacts4-footer a:hover {
  opacity: 0.8;
  color: var(--white);
}

/* Form inputs in footer */
#contacts4-footer .form-control {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

#contacts4-footer .form-control:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-teal);
}

#contacts4-footer .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* ===========================================
   SOCIAL BUTTONS - #social-buttons4-footer
   =========================================== */
#social-buttons4-footer {
  background-color: var(--footer-bg);
}

#social-buttons4-footer .mbr-section-title,
#social-buttons4-footer .btn-social {
  color: var(--white);
}

#social-buttons4-footer .btn-social {
  border-color: var(--white);
  transition: all 0.3s ease;
}

#social-buttons4-footer .btn-social:hover {
  background: var(--white);
  color: var(--footer-bg);
  transform: scale(1.1);
}

/* ===========================================
   SMALL FOOTER - #footer1-main
   =========================================== */
#footer1-main {
  background-color: var(--footer-bg);
}

#footer1-main p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

#footer1-main a {
  color: var(--white);
}

/* ===========================================
   SCROLL TO TOP
   =========================================== */
#scrollToTop {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#scrollToTop:hover {
  transform: translateY(-3px);
}

/* ===========================================
   GLOBAL ENHANCEMENTS
   =========================================== */

/* Links in lead text */
.lead a,
.lead a:hover {
  color: var(--primary-teal);
  text-decoration: none;
}

/* Blockquote styling */
.lead blockquote {
  border-color: var(--primary-teal);
}

/* Social buttons */
.btn-social {
  border-color: var(--primary-teal);
  color: var(--text-dark);
}

.btn-social:hover {
  background: var(--primary-teal);
  color: var(--white);
}

/* Background classes */
.bg-primary {
  background-color: var(--white) !important;
}

.bg-success {
  background-color: var(--primary-teal) !important;
}

.bg-info {
  background-color: var(--info-blue) !important;
}

/* Text color classes */
.text-primary {
  color: var(--white) !important;
}

.text-success {
  color: var(--primary-teal) !important;
}

.text-info {
  color: var(--info-blue) !important;
}

/* ===========================================
   ACCESSIBILITY & PRINT
   =========================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {

  .btn,
  .navbar,
  #scrollToTop,
  .btn-social {
    display: none !important;
  }
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 991px) {

  #header2-hero h3,
  #header2-hero .mbr-section-title {
    font-size: 32px;
  }

  #features1-main .card-title {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {

  #header2-hero h3,
  #header2-hero .mbr-section-title {
    font-size: 28px;
    text-align: center;
  }

  #header2-hero .mbr-section-text {
    text-align: center;
  }

  #header2-hero .mbr-section-btn {
    text-align: center;
  }

  #header3-intro .mbr-section-title {
    font-size: 26px;
  }

  #msg-box1-info h3,
  #msg-box1-info .display-2 {
    font-size: 28px;
    text-align: center;
  }

  #msg-box1-info h2,
  #msg-box1-info .mbr-info-subtitle {
    font-size: 16px;
    text-align: center;
  }
}