/*!
Theme Name: Mergulho Técnico
Description: Tema personalizado para mergulho técnico com integração WooCommerce
Version: 1.0.0
Author: Mergulho Técnico Team
Text Domain: mergulho-tecnico
*/

/* ==========================================================================
   Theme Styles
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base CSS Variables (WordPress Integration) */
:root {
  /* Colors - Mergulho Técnico Brand */
  --mtec-primary: #dc2626;
  --mtec-primary-hover: #b91c1c;
  --mtec-black: #000000;
  --mtec-white: #ffffff;
  --mtec-gray-50: #f9fafb;
  --mtec-gray-100: #f3f4f6;
  --mtec-gray-200: #e5e7eb;
  --mtec-gray-300: #d1d5db;
  --mtec-gray-400: #9ca3af;
  --mtec-gray-500: #6b7280;
  --mtec-gray-600: #4b5563;
  --mtec-gray-700: #374151;
  --mtec-gray-800: #1f2937;
  --mtec-gray-900: #111827;

  /* Typography */
  --mtec-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --mtec-font-size-xs: 0.75rem;
  --mtec-font-size-sm: 0.875rem;
  --mtec-font-size-base: 1rem;
  --mtec-font-size-lg: 1.125rem;
  --mtec-font-size-xl: 1.25rem;
  --mtec-font-size-2xl: 1.5rem;
  --mtec-font-size-3xl: 1.875rem;
  --mtec-font-size-4xl: 2.25rem;
  --mtec-font-size-5xl: 3rem;
  --mtec-font-weight-light: 300;
  --mtec-font-weight-normal: 400;
  --mtec-font-weight-medium: 500;
  --mtec-font-weight-semibold: 600;
  --mtec-font-weight-bold: 700;

  /* Spacing */
  --mtec-spacing-xs: 0.25rem;
  --mtec-spacing-sm: 0.5rem;
  --mtec-spacing-md: 1rem;
  --mtec-spacing-lg: 1.5rem;
  --mtec-spacing-xl: 2rem;
  --mtec-spacing-2xl: 3rem;
  --mtec-spacing-3xl: 4rem;

  /* Border Radius */
  --mtec-border-radius-sm: 0.25rem;
  --mtec-border-radius-md: 0.375rem;
  --mtec-border-radius-lg: 0.5rem;
  --mtec-border-radius-xl: 0.75rem;
  --mtec-border-radius-2xl: 1rem;

  /* Shadows */
  --mtec-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mtec-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --mtec-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --mtec-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --mtec-transition-fast: 150ms ease-in-out;
  --mtec-transition-normal: 300ms ease-in-out;
  --mtec-transition-slow: 500ms ease-in-out;
}

/* ==========================================================================
   WordPress Core Styles Override
   ========================================================================== */

/* Reset WordPress defaults */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* WordPress Content Wrapper */
.wp-site-blocks {
  padding: 0;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
  font-family: var(--mtec-font-family);
  font-size: var(--mtec-font-size-base);
  font-weight: var(--mtec-font-weight-normal);
  line-height: 1.6;
  color: var(--mtec-gray-900);
  background-color: var(--mtec-white);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mtec-font-family);
  font-weight: var(--mtec-font-weight-semibold);
  line-height: 1.3;
  color: var(--mtec-gray-900);
  margin: 0 0 var(--mtec-spacing-md) 0;
}

h1 {
  font-size: var(--mtec-font-size-4xl);
  font-weight: var(--mtec-font-weight-bold);
}

h2 {
  font-size: var(--mtec-font-size-3xl);
}

h3 {
  font-size: var(--mtec-font-size-2xl);
}

h4 {
  font-size: var(--mtec-font-size-xl);
}

h5 {
  font-size: var(--mtec-font-size-lg);
}

h6 {
  font-size: var(--mtec-font-size-base);
}

/* Paragraphs and Text */
p {
  margin: 0 0 var(--mtec-spacing-md) 0;
  color: var(--mtec-gray-700);
}

a {
  color: var(--mtec-primary);
  text-decoration: none;
  transition: color var(--mtec-transition-fast);
}

a:hover,
a:focus {
  color: var(--mtec-primary-hover);
}

strong,
b {
  font-weight: var(--mtec-font-weight-semibold);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* Container */
.mtec-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--mtec-spacing-md);
}

@media (min-width: 768px) {
  .mtec-container {
    padding: 0 var(--mtec-spacing-lg);
  }
}

/* Section Spacing */
.mtec-section {
  padding: var(--mtec-spacing-3xl) 0;
}

.mtec-section--sm {
  padding: var(--mtec-spacing-2xl) 0;
}

.mtec-section--lg {
  padding: 5rem 0;
}

/* ==========================================================================
   WordPress Specific Components
   ========================================================================== */

/* WordPress Navigation */
.wp-block-navigation {
  font-family: var(--mtec-font-family);
}

.wp-block-navigation a {
  color: var(--mtec-gray-700);
  font-weight: var(--mtec-font-weight-medium);
  transition: color var(--mtec-transition-fast);
}

.wp-block-navigation a:hover {
  color: var(--mtec-primary);
}

/* WordPress Buttons */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  background-color: var(--mtec-primary);
  color: var(--mtec-white);
  padding: var(--mtec-spacing-sm) var(--mtec-spacing-lg);
  border: none;
  border-radius: var(--mtec-border-radius-md);
  font-weight: var(--mtec-font-weight-medium);
  font-family: var(--mtec-font-family);
  transition: background-color var(--mtec-transition-fast);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--mtec-primary-hover);
  color: var(--mtec-white);
}

/* WordPress Images */
.wp-block-image {
  margin: var(--mtec-spacing-lg) 0;
}

.wp-block-image img {
  border-radius: var(--mtec-border-radius-lg);
  box-shadow: var(--mtec-shadow-md);
}

/* ==========================================================================
   WooCommerce Integration
   ========================================================================== */

/* WooCommerce Product Cards */
.woocommerce .products .product {
  background: var(--mtec-white);
  border: 1px solid var(--mtec-gray-200);
  border-radius: var(--mtec-border-radius-lg);
  box-shadow: var(--mtec-shadow-sm);
  transition: all var(--mtec-transition-normal);
  overflow: hidden;
}

.woocommerce .products .product:hover {
  box-shadow: var(--mtec-shadow-lg);
  transform: translateY(-2px);
}

.woocommerce .products .product .woocommerce-loop-product__title {
  color: var(--mtec-gray-900);
  font-weight: var(--mtec-font-weight-semibold);
  font-size: var(--mtec-font-size-lg);
}

.woocommerce .products .product .price {
  color: var(--mtec-primary);
  font-weight: var(--mtec-font-weight-bold);
  font-size: var(--mtec-font-size-xl);
}

/* WooCommerce Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--mtec-primary);
  color: var(--mtec-white);
  border: none;
  border-radius: var(--mtec-border-radius-md);
  padding: var(--mtec-spacing-sm) var(--mtec-spacing-lg);
  font-weight: var(--mtec-font-weight-medium);
  font-family: var(--mtec-font-family);
  transition: background-color var(--mtec-transition-fast);
  text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--mtec-primary-hover);
  color: var(--mtec-white);
}

/* WooCommerce Cart */
.woocommerce .cart .button,
.woocommerce .checkout .button {
  background-color: var(--mtec-primary);
}

/* WooCommerce Forms */
.woocommerce form .form-row {
  margin-bottom: var(--mtec-spacing-md);
}

.woocommerce form .form-row label {
  font-weight: var(--mtec-font-weight-medium);
  margin-bottom: var(--mtec-spacing-xs);
  display: block;
}

.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: var(--mtec-spacing-sm);
  border: 1px solid var(--mtec-gray-300);
  border-radius: var(--mtec-border-radius-md);
  font-family: var(--mtec-font-family);
  transition: border-color var(--mtec-transition-fast);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: var(--mtec-primary);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* ==========================================================================
   Custom Components
   ========================================================================== */

/* Hero Section */
.mtec-hero {
  background: linear-gradient(135deg, var(--mtec-gray-900) 0%, var(--mtec-black) 100%);
  color: var(--mtec-white);
  padding: 5rem 0;
  text-align: center;
}

.mtec-hero h1 {
  color: var(--mtec-white);
  font-size: var(--mtec-font-size-5xl);
  margin-bottom: var(--mtec-spacing-lg);
}

.mtec-hero p {
  color: var(--mtec-gray-300);
  font-size: var(--mtec-font-size-lg);
  max-width: 600px;
  margin: 0 auto var(--mtec-spacing-xl) auto;
}

/* Cards */
.mtec-card {
  background: var(--mtec-white);
  border: 1px solid var(--mtec-gray-200);
  border-radius: var(--mtec-border-radius-lg);
  box-shadow: var(--mtec-shadow-sm);
  padding: var(--mtec-spacing-xl);
  transition: all var(--mtec-transition-normal);
}

.mtec-card:hover {
  box-shadow: var(--mtec-shadow-lg);
  transform: translateY(-4px);
}

.mtec-card h3 {
  color: var(--mtec-gray-900);
  margin-bottom: var(--mtec-spacing-md);
}

.mtec-card p {
  color: var(--mtec-gray-600);
}

/* Buttons */
.mtec-btn {
  display: inline-block;
  padding: var(--mtec-spacing-sm) var(--mtec-spacing-lg);
  background-color: var(--mtec-primary);
  color: var(--mtec-white);
  border: none;
  border-radius: var(--mtec-border-radius-md);
  font-weight: var(--mtec-font-weight-medium);
  font-family: var(--mtec-font-family);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all var(--mtec-transition-fast);
}

.mtec-btn:hover,
.mtec-btn:focus {
  background-color: var(--mtec-primary-hover);
  color: var(--mtec-white);
  transform: translateY(-1px);
  box-shadow: var(--mtec-shadow-md);
}

.mtec-btn--secondary {
  background-color: transparent;
  color: var(--mtec-primary);
  border: 1px solid var(--mtec-primary);
}

.mtec-btn--secondary:hover {
  background-color: var(--mtec-primary);
  color: var(--mtec-white);
}

.mtec-btn--large {
  padding: var(--mtec-spacing-md) var(--mtec-spacing-xl);
  font-size: var(--mtec-font-size-lg);
}

/* Header */
.mtec-header {
  background-color: var(--mtec-gray-900);
  color: var(--mtec-white);
  padding: var(--mtec-spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--mtec-shadow-sm);
}

.mtec-header a {
  color: var(--mtec-white);
  transition: color var(--mtec-transition-fast);
}

.mtec-header a:hover {
  color: var(--mtec-primary);
}

/* Footer */
.mtec-footer {
  background-color: var(--mtec-gray-900);
  color: var(--mtec-white);
  padding: var(--mtec-spacing-3xl) 0 var(--mtec-spacing-lg) 0;
}

.mtec-footer a {
  color: var(--mtec-white);
  transition: color var(--mtec-transition-fast);
}

.mtec-footer a:hover {
  color: var(--mtec-primary);
}

/* Newsletter Section - Elegant Gray Transition */
.mtec-newsletter {
  position: relative;
  padding: var(--mtec-spacing-3xl) 0;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(to bottom, #f9fafb 0%, #374151 100%);
}

/* Subtle overlay for depth */
.mtec-newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    transparent 0%,
    rgba(220, 38, 38, 0.05) 50%,
    rgba(220, 38, 38, 0.10) 100%
  );
  z-index: 1;
}

/* Very subtle texture */
.mtec-newsletter::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 33%;
  width: 384px;
  height: 384px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.20) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.3;
  z-index: 1;
}

.mtec-newsletter > * {
  position: relative;
  z-index: 3;
}

.mtec-newsletter h2 {
  color: #ffffff;
  margin-bottom: var(--mtec-spacing-md);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mtec-newsletter p {
  color: #f3f4f6;
  margin-bottom: var(--mtec-spacing-xl);
}

.mtec-newsletter form {
  max-width: 400px;
  margin: 0 auto;
}

.mtec-newsletter input[type="email"] {
  width: 100%;
  padding: var(--mtec-spacing-sm);
  border: 1px solid #d1d5db;
  border-radius: var(--mtec-border-radius-md);
  background-color: #ffffff;
  color: #1a1a1a;
  margin-bottom: var(--mtec-spacing-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mtec-newsletter input[type="email"]:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.mtec-newsletter .trust-text {
  color: #e5e7eb;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.mtec-text-center { text-align: center; }
.mtec-text-left { text-align: left; }
.mtec-text-right { text-align: right; }

.mtec-mb-sm { margin-bottom: var(--mtec-spacing-sm); }
.mtec-mb-md { margin-bottom: var(--mtec-spacing-md); }
.mtec-mb-lg { margin-bottom: var(--mtec-spacing-lg); }
.mtec-mb-xl { margin-bottom: var(--mtec-spacing-xl); }

.mtec-mt-sm { margin-top: var(--mtec-spacing-sm); }
.mtec-mt-md { margin-top: var(--mtec-spacing-md); }
.mtec-mt-lg { margin-top: var(--mtec-spacing-lg); }
.mtec-mt-xl { margin-top: var(--mtec-spacing-xl); }

.mtec-p-sm { padding: var(--mtec-spacing-sm); }
.mtec-p-md { padding: var(--mtec-spacing-md); }
.mtec-p-lg { padding: var(--mtec-spacing-lg); }
.mtec-p-xl { padding: var(--mtec-spacing-xl); }

/* Visibility */
.mtec-hidden { display: none; }
.mtec-visible { display: block; }

/* Responsive */
@media (max-width: 767px) {
  .mtec-hidden-mobile { display: none !important; }
  .mtec-visible-mobile { display: block !important; }
}

@media (min-width: 768px) {
  .mtec-hidden-desktop { display: none !important; }
  .mtec-visible-desktop { display: block !important; }
}

/* ==========================================================================
   Animations
   ========================================================================== */

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

@keyframes mtecSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.mtec-fade-in {
  animation: mtecFadeIn 0.6s ease-out;
}

.mtec-slide-in {
  animation: mtecSlideIn 0.5s ease-out;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile First Approach */
@media (min-width: 768px) {
  .mtec-hero {
    padding: 6rem 0;
  }
  
  .mtec-hero h1 {
    font-size: 3.75rem;
  }
  
  .mtec-section {
    padding: 5rem 0;
  }
}

@media (min-width: 1024px) {
  .mtec-hero {
    padding: 8rem 0;
  }
  
  .mtec-section--lg {
    padding: 6rem 0;
  }
}

/* Print Styles */
@media print {
  .mtec-header,
  .mtec-footer,
  .mtec-newsletter {
    display: none;
  }
  
  body {
    color: var(--mtec-black);
    background: var(--mtec-white);
  }
  
  a {
    text-decoration: underline;
  }
}