/*
 * base.css — Mantle Realty Child Theme
 *
 * Purpose: global low-level styles applied sitewide.
 * Contains: box-sizing, img/iframe resets, CLS seatbelts, :focus-visible,
 *           body/p/a base typography, dark-skin scoped utility, global
 *           layout wrappers, button baseline, debug utility.
 * Loaded globally via functions.php.
 * Depends on: tokens.css.
 * Does NOT contain: blog-specific, page-specific, or CPT-specific styles.
 */

/* ==============================
   Global Safety / Resets
   ============================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

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

/* ==============================
   CLS Seatbelts (Embedded Videos / Thumbnails)
   ============================== */

/* 1) Reserve space for YouTube thumbnail images (prevents layout shift) */
img[src*="ytimg.com"],
img[src*="youtube.com"]{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  display:block;
}

/* 2) Reserve space for common embed wrappers (Elementor + WP embeds) */
.elementor-widget-video .elementor-wrapper,
.wp-block-embed__wrapper,
.wp-block-embed iframe,
.elementor-video,
.elementor-video iframe{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  display:block;
}

/* 3) Safety: any iframe that is clearly a video embed */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"]{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  display:block;
}

/* ==============================
   Global Focus
   ============================== */

:focus-visible{
  outline:var(--mantle-focus-ring);
  outline-offset:2px;
}

/* ==============================
   Base Typography (neutral / safe)
   Keep body neutral so blog + plugins don't get forced dark.
   ============================== */

body{
  font-family:'Montserrat', Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  margin:0;
  padding:0;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

p{
  margin:0 0 1rem;
}

a{
  color:var(--mantle-light-blue);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease;
}

a:hover{
  color:var(--mantle-blue);
}

/* ==============================
   Mantle Dark Skin (scoped utility)
   Add class "mantle-skin-dark" to the top-level Elementor
   container/section for templates that use the dark theme.
   ============================== */

.mantle-skin-dark{
  color:var(--mantle-text);
  background-color:var(--mantle-bg);
}

.mantle-skin-dark h1,
.mantle-skin-dark h2,
.mantle-skin-dark h3,
.mantle-skin-dark h4,
.mantle-skin-dark h5,
.mantle-skin-dark h6{
  font-family:'Gotham Black','Gotham','Montserrat', Arial, sans-serif;
  font-weight:900;
  color:var(--mantle-orange);
  line-height:1.2;
  margin:0 0 1rem;
}

/* ==============================
   Form Field Safety (Dark Theme Friendly)
   Only darken fields inside the dark skin so light pages
   don't inherit weird input styles.
   ============================== */

.mantle-skin-dark input,
.mantle-skin-dark select,
.mantle-skin-dark textarea{
  color:var(--mantle-text);
  background-color:var(--mantle-surface);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--mantle-radius-sm);
  padding:.65rem .75rem;

  /* Prevent occasional vertical alignment quirks (Safari/iOS) */
  line-height:1.3;
}

.mantle-skin-dark input::placeholder,
.mantle-skin-dark textarea::placeholder{
  color:rgba(245,245,245,.65);
}

.mantle-skin-dark input:focus-visible,
.mantle-skin-dark select:focus-visible,
.mantle-skin-dark textarea:focus-visible{
  outline:none;
  border-color:rgba(64,174,227,.85);
  box-shadow:var(--mantle-focus-glow);
}

/* ==============================
   Optional Mantle Layout Wrappers
   ============================== */

.mantle-site{
  max-width:1200px;
  margin:0 auto;
  padding:var(--mantle-space-3) var(--mantle-space-2);
}

.mantle-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--mantle-space-2);

  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:var(--mantle-space-2);
}

/* ==============================
   Buttons
   ============================== */

.mantle-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  min-height:var(--mantle-tap-min);
  padding:.65rem 1.1rem;

  background:var(--mantle-orange);
  color:#fff;

  font-size:1rem;
  line-height:1.1;
  text-align:center;
  text-decoration:none;

  border-radius:var(--mantle-radius-sm);
  border:none;
  cursor:pointer;

  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.mantle-button:hover,
.mantle-button:focus-visible{
  background:var(--mantle-light-blue);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(64,174,227,.25);
}

@media (prefers-reduced-motion:reduce){
  .mantle-button{
    transition:none;
  }
  .mantle-button:hover,
  .mantle-button:focus-visible{
    transform:none;
  }
}

/* ==============================
   Global Elementor Button Guard
   Prevents any Elementor button from stretching full-width
   inside a column unless explicitly overridden per-component.
   ============================== */

.elementor-widget-button .elementor-button-wrapper{
  text-align:center;
}

/* ==============================
   Debug Utility
   ============================== */

.debug{
  border:1px solid red;
  background-color:rgba(255,0,0,.1);
}

/* ==============================
   Responsive — Base-only selectors
   ============================== */

@media (max-width:1024px){
  .mantle-site{
    padding:20px 14px;
  }

  .mantle-container{
    padding:15px;
    gap:15px;
  }
}

@media (max-width:767px){
  .mantle-site{
    padding:16px 12px;
  }

  .mantle-container{
    gap:10px;
    padding:10px;
  }
}