/*
 * Twenty Twenty-Five Child Theme - Custom Styles
 * PT Minh Gia Consortium
 */

/* ============================================
   1. CSS CUSTOM PROPERTIES (Brand Colors)
   ============================================ */
:root {
  /* Brand Primary Colors */
  --mg-primary: #1B3A5C;
  --mg-primary-dark: #0F2440;
  --mg-primary-light: #2B5A8C;

  /* Brand Accent */
  --mg-accent: #C8962E;
  --mg-accent-light: #E0B050;
  --mg-accent-dark: #A07A20;

  /* Neutral Colors */
  --mg-bg-light: #F5F5F0;
  --mg-bg-dark: #1A1A1A;
  --mg-text: #2D2D2D;
  --mg-text-light: #686868;

  /* Utility */
  --mg-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --mg-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --mg-radius: 12px;
  --mg-radius-sm: 8px;
  --mg-transition: 0.3s ease;
}

/* ============================================
   2. TYPOGRAPHY ENHANCEMENTS
   ============================================ */

/* Section titles with decorative underline accent */
body .wp-block-heading {
  position: relative;
}

/* Style h2 as section titles with gold accent bar */
body h2 {
  position: relative;
}

body .wp-block-group:not(:has(.mg-site)) h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--mg-accent);
  margin-top: 0.5rem;
  border-radius: 2px;
}
/* ============================================
   3. HERO SECTION
   ============================================ */

/* Hero title styling — :not(:has(.mg-site)) skips the Minh Gia landing page,
   which has its own typography system and just happens to sit inside this
   same first block-group wrapper. */
body > .wp-site-blocks > .wp-block-group:first-of-type:not(:has(.mg-site)) h1,
body > .wp-site-blocks > .wp-block-group:first-of-type:not(:has(.mg-site)) .wp-block-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Hero subtitle / tagline styling */
body > .wp-site-blocks > .wp-block-group:first-of-type:not(:has(.mg-site)) p {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--mg-text-light);
}

/* CTA-style buttons in hero */
body > .wp-site-blocks > .wp-block-group:first-of-type .wp-block-buttons .wp-block-button__link {
  background-color: var(--mg-accent) !important;
  color: #ffffff !important;
  padding: 1rem 2.5rem;
  border-radius: var(--mg-radius-sm);
  font-weight: 600;
  transition: all var(--mg-transition);
}

body > .wp-site-blocks > .wp-block-group:first-of-type .wp-block-buttons .wp-block-button__link:hover {
  background-color: var(--mg-accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--mg-shadow);
}

/* ============================================
   4. CARD STYLING (3 Business Lines + Combined)
   ============================================ */

/* Style three-column business cards */
body .wp-block-columns .wp-block-column {
  border-radius: var(--mg-radius);
  padding: 2rem;
  background: #ffffff;
  box-shadow: var(--mg-shadow);
  transition: all var(--mg-transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

body .wp-block-columns .wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-hover);
}

/* Accent bar on top of each card */
body .wp-block-columns .wp-block-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--mg-accent);
  transition: width var(--mg-transition);
}

body .wp-block-columns .wp-block-column:hover::before {
  width: 100%;
}

/* Style the Combined Engagement card as a highlight banner */
body .wp-block-columns .wp-block-column:last-child {
  background: linear-gradient(135deg, var(--mg-primary) 0%, var(--mg-primary-dark) 100%);
  color: #ffffff;
  padding: 2rem 2.5rem;
  border: none;
}

body .wp-block-columns .wp-block-column:last-child:hover {
  background: linear-gradient(135deg, var(--mg-primary-light) 0%, var(--mg-primary) 100%);
}

/* Card headings */
body .wp-block-columns .wp-block-column h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
}

/* Card paragraph text */
body .wp-block-columns .wp-block-column p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ============================================
   5. ENGAGEMENT MODEL STEPS
   ============================================ */

/* Highlight box for the engagement model description (A/B/C steps) */
body .wp-block-group:has(.wp-block-columns) + .wp-block-group {
  background: var(--mg-bg-light);
  border-radius: var(--mg-radius);
  padding: 2rem;
  border-left: 4px solid var(--mg-accent);
}

/* ============================================
   6. CONTACT / FORM SECTION
   ============================================ */

/* Contact form area background */
body .wp-block-group:has(input),
body .wp-block-group:has(textarea) {
  background: var(--mg-bg-light);
  border-radius: var(--mg-radius);
  padding: 2rem;
}

/* Form input styling */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body textarea,
body select {
  border: 1px solid #ddd;
  border-radius: var(--mg-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color var(--mg-transition), box-shadow var(--mg-transition);
  width: 100%;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body textarea:focus,
body select:focus {
  border-color: var(--mg-accent);
  box-shadow: 0 0 0 3px rgba(200, 150, 46, 0.15);
  outline: none;
}

/* Submit button styling */
body .wp-block-button__link,
body input[type="submit"],
body button[type="submit"] {
  background-color: var(--mg-accent) !important;
  color: #ffffff !important;
  border-radius: var(--mg-radius-sm) !important;
  padding: 0.875rem 2rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--mg-transition);
}

body .wp-block-button__link:hover,
body input[type="submit"]:hover,
body button[type="submit"]:hover {
  background-color: var(--mg-accent-dark) !important;
  transform: translateY(-2px);
/* ============================================
   7. NAVIGATION ENHANCEMENTS
   ============================================ */

/* Navigation links underline animation */
body .wp-block-navigation-item__content {
  font-weight: 500;
  transition: color var(--mg-transition);
  position: relative;
}

body .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--mg-accent);
  transition: width var(--mg-transition);
}

body .wp-block-navigation-item__content:hover::after {
  width: 100%;
}

/* Current/active nav item accent color */
body .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--mg-accent) !important;
}

/* "Enquire" button in nav */
body .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
  background: var(--mg-accent);
  color: #ffffff !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--mg-radius-sm);
  transition: all var(--mg-transition);
}

body .wp-block-navigation-item:last-child .wp-block-navigation-item__content:hover {
  background: var(--mg-accent-dark) !important;
  transform: translateY(-1px);
}

body .wp-block-navigation-item:last-child .wp-block-navigation-item__content::after {
  display: none;
}

/* ============================================
   8. FOOTER IMPROVEMENTS
   ============================================ */

body footer.wp-block-template-part {
  background: var(--mg-primary-dark);
  color: rgba(255, 255, 255, 0.9);
  padding-top: 2rem;
}

body footer.wp-block-template-part a {
  color: var(--mg-accent-light) !important;
  transition: color var(--mg-transition);
}

body footer.wp-block-template-part a:hover {
  color: #ffffff !important;
}

/* ============================================
   9. ANIMATIONS
   ============================================ */

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

/* Fade-up animation for sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate the first section (hero) */
body .wp-site-blocks > .wp-block-group:first-of-type {
  animation: fadeInUp 0.6s ease forwards;
}

/* Staggered delay for cards */
body .wp-block-columns .wp-block-column:nth-child(1) { animation-delay: 0.1s; }
body .wp-block-columns .wp-block-column:nth-child(2) { animation-delay: 0.2s; }
body .wp-block-columns .wp-block-column:nth-child(3) { animation-delay: 0.3s; }

/* Image hover effect */
body img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

body img:hover {
  transform: scale(1.02);
  box-shadow: var(--mg-shadow);
}

/* ============================================
   10. SECTION BACKGROUND ALTERNATION
   ============================================ */

body .wp-site-blocks > .wp-block-group:nth-child(odd) {
  background-color: #ffffff;
}

body .wp-site-blocks > .wp-block-group:nth-child(even) {
  background-color: var(--mg-bg-light);
}

/* ============================================
   11. RESPONSIVE TWEAKS
   ============================================ */

@media (max-width: 781px) {
  body .wp-block-columns .wp-block-column {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  body h2 {
    font-size: 1.75rem !important;
  }

  body .wp-block-navigation {
    font-size: 0.875rem;
  }
}

@media (max-width: 600px) {
  body .wp-block-columns .wp-block-column {
    padding: 1.25rem;
  }

  body .wp-site-blocks > .wp-block-group {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body h2 {
    font-size: 1.5rem !important;
  }
}

/* ============================================
   12. UTILITY - LIST STYLING
   ============================================ */

/* Better list styling in service cards */
body .wp-block-columns .wp-block-column ul {
  list-style: none;
  padding-left: 0;
}

body .wp-block-columns .wp-block-column ul li {
  padding: 0.375rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
}

body .wp-block-columns .wp-block-column ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--mg-accent);
  font-weight: 600;
}

/* Combined engagement card list (light arrow) */
body .wp-block-columns .wp-block-column:last-child ul li::before {
  color: var(--mg-accent-light);
}
  box-shadow: var(--mg-shadow);
}