/*
 * VMA Blog — Custom CSS Theme
 * Velasco Medical Aesthetics Brand Kit
 *
 * INSTALLATION:
 * WordPress.com Business → Appearance → Customize → Additional CSS
 * Paste this entire file into the CSS editor.
 *
 * BRAND COLORS:
 *   Forest Green (Primary):  #354D43
 *   Cream (Background):      #F5E0D3
 *   Gold (Accent):           #D4AF37
 *   White:                   #FFFFFF
 *   Dark Text:               #2C2C2C
 *
 * BRAND FONTS:
 *   TAN Aegean — Headings (installed via WordPress Font Library)
 *   Cormorant Garamond — Body text (Google Fonts)
 *   Raleway — UI elements, meta text (Google Fonts)
 */

/* ============================================
   FONT IMPORTS
   ============================================
   TAN Aegean is served by WordPress Font Library
   (Appearance > Editor > Styles > Typography > Fonts).
   Only Google Fonts are imported here.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap');

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
  --vma-green: #354D43;
  --vma-cream: #F5E0D3;
  --vma-gold: #D4AF37;
  --vma-white: #FFFFFF;
  --vma-dark: #2C2C2C;
  --vma-light-cream: #FAF3ED;
  --vma-gold-light: #E8D08C;
  --vma-green-light: #4A6B5D;
  --font-heading: 'TAN - AEGEAN', 'TAN-AEGEAN', 'TAN AEGEAN', 'TAN Aegean', 'aegean', 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui: 'Raleway', 'Helvetica Neue', sans-serif;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
  background-color: var(--vma-cream) !important;
  color: var(--vma-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* Images, iframes, videos — never overflow their container */
img, video {
  max-width: 100% !important;
  height: auto !important;
}

iframe {
  max-width: 100% !important;
}

/* Prevent iOS Safari from auto-zooming on input focus (requires 16px+) */
input, textarea, select {
  font-size: 16px !important;
}

/* ============================================
   SITE HEADER
   ============================================ */
.site-header,
.wp-site-header,
header.has-background {
  background-color: var(--vma-green) !important;
  border-bottom: 3px solid var(--vma-gold) !important;
}

.site-title,
.site-title a,
.wp-block-site-title a {
  color: var(--vma-gold) !important;
  font-family: var(--font-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  text-decoration: none !important;
}

.site-description {
  color: var(--vma-cream) !important;
  font-family: var(--font-ui) !important;
  font-weight: 300 !important;
  letter-spacing: 1px !important;
}

/* Navigation */
.main-navigation a,
.wp-block-navigation-item a,
.primary-menu a {
  color: var(--vma-cream) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.main-navigation a:hover,
.wp-block-navigation-item a:hover,
.primary-menu a:hover {
  color: var(--vma-gold) !important;
}

/* Mobile hamburger overlay — readable dark links on cream background.
   Only applies when the responsive menu is open (phone view).
   Does NOT affect the main green header nav. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--vma-cream) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a {
  color: var(--vma-green) !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  padding: 14px 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--vma-gold) !important;
}

/* Hamburger open/close icon — dark so it's visible on the cream overlay */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--vma-green) !important;
}

/* ============================================
   HEADINGS
   ============================================ */
h1, .entry-title, .wp-block-post-title {
  font-family: var(--font-heading) !important;
  color: var(--vma-green) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  line-height: 1.3 !important;
  font-size: clamp(36px, 4.5vw, 56px) !important;
}

/* Hero H1 inside cover blocks — page titles like ABOUT, CONTACT */
.wp-block-cover h1,
.wp-block-cover h1.wp-block-heading {
  color: var(--vma-gold) !important;
  font-size: clamp(44px, 5.5vw, 64px) !important;
  letter-spacing: 4px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

/* Kicker / subtitle inside cover blocks — uppercase small tracked-out line */
.wp-block-cover p,
.wp-block-cover p.wp-block-paragraph {
  color: var(--vma-cream) !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  margin-top: 1em !important;
}

h2, h3 {
  font-family: var(--font-heading) !important;
  color: var(--vma-green) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

h2 {
  font-size: 28px !important;
  margin-top: 2.5em !important;
  margin-bottom: 0.8em !important;
  padding-bottom: 0.4em !important;
  border-bottom: 1px solid var(--vma-gold-light) !important;
}

h3 {
  font-size: 22px !important;
  color: var(--vma-green-light) !important;
}

h4, h5, h6 {
  font-family: var(--font-ui) !important;
  color: var(--vma-green) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.entry-content,
.wp-block-post-content {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
  color: var(--vma-dark) !important;
}

.entry-content p {
  margin-bottom: 1.5em !important;
}

/* Links */
.entry-content a {
  color: var(--vma-green) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--vma-gold) !important;
  text-underline-offset: 3px !important;
  transition: color 0.3s ease !important;
}

.entry-content a:hover {
  color: var(--vma-gold) !important;
}

/* Phone and email links — remove underline site-wide (format is self-evident) */
a[href^="tel:"],
a[href^="mailto:"] {
  text-decoration: none !important;
  color: var(--vma-green) !important;
}

a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  text-decoration: none !important;
  color: var(--vma-gold) !important;
}

/* Blockquotes */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--vma-gold) !important;
  background-color: var(--vma-light-cream) !important;
  padding: 1.5em 2em !important;
  margin: 2em 0 !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: var(--vma-green) !important;
}

/* ============================================
   BLOG POST CARDS / ARCHIVE
   ============================================ */
.post-card,
article.post,
.wp-block-post {
  background-color: var(--vma-white) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 15px rgba(53, 77, 67, 0.08) !important;
  padding: 2em !important;
  margin-bottom: 2em !important;
  transition: box-shadow 0.3s ease !important;
}

article.post:hover,
.wp-block-post:hover {
  box-shadow: 0 4px 25px rgba(53, 77, 67, 0.15) !important;
}

/* Post meta (date, author) */
.entry-meta,
.post-meta,
.wp-block-post-date,
.wp-block-post-author-name {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--vma-green-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 500 !important;
}

/* Categories & Tags */
.cat-links a,
.tag-links a,
.wp-block-post-terms a {
  background-color: var(--vma-green) !important;
  color: var(--vma-cream) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
}

.cat-links a:hover,
.tag-links a:hover {
  background-color: var(--vma-gold) !important;
  color: var(--vma-green) !important;
}

/* ============================================
   FAQ SECTION (for Rank Math FAQ blocks)
   ============================================ */
.rank-math-faq-list {
  background-color: var(--vma-light-cream) !important;
  border: 1px solid var(--vma-gold-light) !important;
  border-radius: 8px !important;
  padding: 2em !important;
  margin-top: 3em !important;
}

.rank-math-question {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  color: var(--vma-green) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5em !important;
  cursor: pointer !important;
}

.rank-math-answer {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--vma-dark) !important;
  padding-bottom: 1.5em !important;
  border-bottom: 1px solid var(--vma-gold-light) !important;
  margin-bottom: 1.5em !important;
}

/* ============================================
   TABLES (for comparison posts)
   ============================================ */
table,
.wp-block-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2em 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
}

table thead th {
  background-color: var(--vma-green) !important;
  color: var(--vma-cream) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}

table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--vma-gold-light) !important;
}

table tbody tr:nth-child(even) {
  background-color: var(--vma-light-cream) !important;
}

table tbody tr:hover {
  background-color: rgba(212, 175, 55, 0.1) !important;
}

/* ============================================
   BUTTONS & CTA
   ============================================ */
.wp-block-button__link,
button,
input[type="submit"] {
  background-color: var(--vma-gold) !important;
  color: var(--vma-green) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 13px !important;
  padding: 14px 32px !important;
  border: none !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--vma-green) !important;
  color: var(--vma-gold) !important;
}

/* Secondary / outline button */
.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid var(--vma-gold) !important;
  color: var(--vma-gold) !important;
}

.is-style-outline .wp-block-button__link:hover {
  background-color: var(--vma-gold) !important;
  color: var(--vma-green) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer,
footer {
  background-color: var(--vma-green) !important;
  color: var(--vma-cream) !important;
  border-top: 3px solid var(--vma-gold) !important;
  padding: 3em 0 !important;
}

.site-footer a,
footer a {
  color: var(--vma-gold) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
footer a:hover {
  color: var(--vma-cream) !important;
}

/* ============================================
   SIDEBAR / WIDGETS
   ============================================ */
.widget-title,
.wp-block-heading {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--vma-green) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--vma-gold) !important;
  padding-bottom: 0.5em !important;
  margin-bottom: 1em !important;
}

/* ============================================
   RESPONSIVE — TABLET & MOBILE (<= 768px)
   Most VMA clients browse on phones. Optimize for
   thumb taps, readable type, and stacked layouts.
   ============================================ */
@media (max-width: 768px) {
  /* Body & typography scale-down */
  body {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  h1, .entry-title, .wp-block-post-title {
    font-size: 32px !important;
    letter-spacing: 0.5px !important;
  }

  h2 {
    font-size: 22px !important;
    margin-top: 1.8em !important;
  }

  h3 {
    font-size: 19px !important;
  }

  .entry-content,
  .wp-block-post-content {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* Cover blocks — reduce hero padding and title size on phones */
  .wp-block-cover,
  .wp-block-cover.has-background-dim {
    min-height: 280px !important;
    padding: 2.5em 1em !important;
  }

  .wp-block-cover h1,
  .wp-block-cover h1.wp-block-heading {
    font-size: 36px !important;
    letter-spacing: 2px !important;
  }

  .wp-block-cover p,
  .wp-block-cover p.wp-block-paragraph {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  /* Buttons — compact but tappable (Apple HIG min 44px).
     Secondary to the site title, not dominant. */
  .wp-block-button__link,
  button,
  input[type="submit"] {
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    padding: 12px 22px !important;
    min-height: 44px !important;
    width: auto !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    box-sizing: border-box !important;
  }

  /* Button groups — center natural-width buttons, stack vertically with gap */
  .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .wp-block-buttons > .wp-block-button,
  .wp-block-button {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Columns — force stacking on mobile (some themes keep them side-by-side) */
  .wp-block-columns {
    flex-direction: column !important;
    gap: 1.5em !important;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Google Maps / video iframes — cap height so they don't dominate the screen */
  iframe {
    height: 280px !important;
    min-height: 0 !important;
  }

  /* Blog post cards — tighter padding on phones */
  article.post,
  .wp-block-post,
  .post-card {
    padding: 1.25em !important;
    margin-bottom: 1.5em !important;
  }

  /* Blockquotes / pull quotes — reduce padding and font size */
  blockquote,
  .wp-block-quote,
  .wp-block-pullquote {
    padding: 1em 1.25em !important;
    font-size: 17px !important;
    margin: 1.5em 0 !important;
  }

  /* FAQ section — tighter padding */
  .rank-math-faq-list {
    padding: 1.25em !important;
  }

  .rank-math-question {
    font-size: 18px !important;
  }

  .rank-math-answer {
    font-size: 16px !important;
  }

  /* Tables — shrink but keep readable */
  table {
    font-size: 13px !important;
  }

  table thead th,
  table tbody td {
    padding: 8px 10px !important;
  }

  /* Site header — keep the VMA title bold and dominant on phone.
     Must read larger than any CTA button on the page. */
  .site-title,
  .site-title a,
  .wp-block-site-title a {
    font-size: 26px !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    display: block !important;
    text-align: center !important;
  }

  /* Navigation — larger tap targets */
  .main-navigation a,
  .wp-block-navigation-item a {
    padding: 12px 8px !important;
    font-size: 13px !important;
  }

  /* Footer — reduce padding */
  .site-footer,
  footer {
    padding: 2em 1em !important;
  }
}

/* ============================================
   RESPONSIVE — SMALL PHONES (<= 480px)
   iPhone SE, Android small. Further reductions.
   ============================================ */
@media (max-width: 480px) {
  body {
    font-size: 15px !important;
  }

  h1, .entry-title, .wp-block-post-title {
    font-size: 26px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  .wp-block-cover,
  .wp-block-cover.has-background-dim {
    min-height: 240px !important;
    padding: 2em 0.75em !important;
  }

  .wp-block-cover h1,
  .wp-block-cover h1.wp-block-heading {
    font-size: 30px !important;
    letter-spacing: 1.5px !important;
  }

  .wp-block-cover p,
  .wp-block-cover p.wp-block-paragraph {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  .wp-block-button__link,
  button,
  input[type="submit"] {
    font-size: 12px !important;
    padding: 11px 18px !important;
    letter-spacing: 1.2px !important;
    min-height: 42px !important;
  }

  /* Keep site title larger than buttons even on small phones */
  .site-title,
  .site-title a,
  .wp-block-site-title a {
    font-size: 22px !important;
    letter-spacing: 1.5px !important;
  }

  iframe {
    height: 240px !important;
  }

  blockquote,
  .wp-block-quote,
  .wp-block-pullquote {
    font-size: 16px !important;
  }

  article.post,
  .wp-block-post,
  .post-card {
    padding: 1em !important;
  }
}

/* ============================================
   UTILITY: Gold Accent Divider
   Use: add the class vma-divider to any hr element
   ============================================ */
hr,
.wp-block-separator {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent,
    var(--vma-gold),
    transparent
  ) !important;
  margin: 3em auto !important;
  max-width: 200px !important;
}

/* ============================================
   AUTHOR BIO BOX (for E-E-A-T)
   ============================================ */
.author-bio,
.entry-author {
  background-color: var(--vma-white) !important;
  border: 1px solid var(--vma-gold-light) !important;
  border-radius: 8px !important;
  padding: 2em !important;
  margin-top: 3em !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.5em !important;
}

.author-bio .author-name {
  font-family: var(--font-heading) !important;
  color: var(--vma-green) !important;
  font-size: 20px !important;
}

.author-bio .author-description {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}