/* ==========================================================================
   Main Stylesheet
   ========================================================================== */

/* Import other stylesheets */
@import 'reset.css';
@import 'typography.css';
@import 'variables.css';
@import 'layout.css';
@import 'components.css';
@import 'utilities.css';
@import 'responsive.css';


/* Base styles */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--color-white) !important;
  width: 100%;
}

/* Main content container - ensure proper sizing */
main {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

/* Force proper containment on mobile/tablet to prevent white space issues */
@media (max-width: 1024px) {
  body {
    max-width: 100% !important; /* Override desktop max-width on mobile */
    width: 100% !important;
  }

  main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .container {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--spacing-4) !important;
    padding-right: var(--spacing-4) !important;
  }
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Focus styles */
:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus outlines from buttons and links */
button:focus,
a:focus,
.btn:focus,
.btn-cta:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-whatsapp:focus,
a.btn-secondary:focus {
  outline: none !important;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-to-content:focus {
  top: 0;
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .cta-section,
  .newsletter-section {
    display: none;
  }


  a {
    color: #000;
    text-decoration: underline;
  }



  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }


  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p, blockquote, table, figure {
    page-break-inside: avoid;
  }

  @page {
    margin: 2cm;
  }
}