/* 1. BRAND VARIABLES */
:root {
  --text-main: #2c3e50;
  --text-soft: #5a6c7d;
  --accent: #c97c5d;       /* Terracotta */
  --accent-2: #7a9a82;     /* Sage */
  --bg-stone: #F9F7F2;     /* Base Alabaster */
  --bg-sand: #f2eee8;      /* Warm Tag Background */
  --border-soft: #d4c4b0;
}

/* 2. GLOBAL STYLES */
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-stone);
  line-height: 1.75;
  font-size: 16.5px;
  transition: background-color 0.3s ease;
}

h1, h2, h3, .title {
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  color: #1f1f1f;
}

.title.is-2 { font-size: 2.8rem; line-height: 1.2; }
.title.is-3 { font-size: 2rem; margin-bottom: 1.25rem; }

/* 3. NAVIGATION */
.navbar { 
  border-bottom: 1px solid var(--border-soft); 
  background-color: #ffffff !important; 
}

/* 4. HERO SECTION */
.hero.is-nature {
  background: linear-gradient(rgba(249, 247, 242, 0.85), rgba(249, 247, 242, 0.85)), url('./hero-nature.png');
  background-size: cover;
  background-position: center;
  padding: 6rem 0;
}

/* 5. THE "ABOUT" TAGS - CLEAN VERSION (No Icons) */
#about-me .tags .tag.is-custom {
  background-color: #f2eee8 !important; /* Forces Sand color */
  color: #c97c5d !important;         /* Forces Terracotta text */
  border: 1px solid #d4c4b0 !important;
  font-weight: 500 !important;
  padding: 1rem 1.2rem !important;   /* Wider padding for elegance */
  height: auto !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  transition: all 0.25s ease;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em;
}

#about-me .tags .tag.is-custom:hover {
  background-color: #c97c5d !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* 6. LAYOUT COMPONENTS */
.section-soft { background-color: #faf9f6 !important; }

.card { 
  box-shadow: none; 
  border: 1px solid var(--border-soft); 
  background: #ffffff;
  height: 100%; 
  transition: border-color 0.3s ease; 
}
.card:hover { border-color: var(--accent); }

.button.is-primary { 
  background-color: var(--accent); 
  border-color: var(--accent); 
  color: #fff; 
}

.tag.is-custom {
  background-color: #f2eee8; /* Warm Sand/Stone */
  color: #c97c5d;            /* Terracotta */
  border: 1px solid #d4c4b0; /* Soft border for definition */
  margin: 0.2rem;
  font-weight: 500;
  height: auto;              /* Allows the tag to grow with padding */
  padding: 0.5rem 0.8rem;    /* Makes it look more professional */
}

/* MOBILE OPTIMIZATIONS */
@media screen and (max-width: 768px) {
  /* Stack tags neatly on mobile */
  #about-me .tags {
    justify-content: center;
    margin-top: 1.5rem;
  }
  
  #about-me .tag.is-custom {
    width: 100%; /* Makes tags full-width buttons on small phones */
    justify-content: center;
    margin: 0.25rem 0;
  }

  /* Adjust the Pull Quote for smaller screens */
  #about-me .is-size-5 {
    font-size: 1.2rem !important;
    text-align: left;
  }

  /* Ensure the "Meet Dr." image doesn't feel too giant */
  #about-me .image.is-4by5 {
    max-width: 280px;
    margin: 0 auto 2rem auto;
  }

  /* Center headings on mobile for better balance */
  .title.is-3 {
    text-align: center;
  }
}

/* 7. DARK MODE */
body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .navbar, 
body.dark-mode .card, 
body.dark-mode .box, 
body.dark-mode .section-soft, 
body.dark-mode .footer {
  background-color: #1a1c1e !important;
  border-color: #333 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode .title, body.dark-mode strong {
  color: #ffffff !important;
}
body.dark-mode .tag.is-custom {
  background-color: #25282a !important;
  color: #d4c4b0 !important;
  border-color: #444 !important;
}
body.dark-mode .hero.is-nature {
  background: linear-gradient(rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.9)), url('./hero-nature.png') !important;
  background-size: cover !important;
}

strong {
  letter-spacing: -0.01em; /* Tightens the bold text slightly for a premium feel */
  color: #1a1a1a;
}

.button.is-primary:hover { background-color: #b56b4e; transform: translateY(-1px); }

/* 8. PRINT SETTINGS */
@media print {
  nav, #theme-toggle, #backToTop, .footer, .buttons, .button { display: none !important; }
  body { background: white !important; color: black !important; font-size: 12pt; }
  .section { padding: 1rem 0 !important; }
  .card { border: 1px solid #ccc !important; break-inside: avoid; }
}
/* DARK MODE ADJUSTMENTS FOR THE ABOUT SECTION */
body.dark-mode #about-me .tag.is-custom {
  background-color: #25282a !important; /* Deep Slate/Charcoal */
  color: #d4c4b0 !important;            /* Soft Sand color for text */
  border-color: #444 !important;         /* Muted border */
}

body.dark-mode #about-me .tag.is-custom:hover {
  background-color: #c97c5d !important; /* Terracotta on hover */
  color: #ffffff !important;
}

/* Adjust the Pull Quote for Dark Mode */
body.dark-mode #about-me div[style*="border-left"] {
  border-left-color: #c97c5d !important; /* Keeps the Terracotta line visible */
}

body.dark-mode #about-me .is-size-5 {
  color: #ffffff !important; /* Brightens the quote text for legibility */
}

body.dark-mode #about-me a[style*="color: var(--accent)"] {
  color: #e09d82 !important; /* Slightly lighter terracotta for link accessibility */
  border-bottom-color: #e09d82 !important;
}