/**
 * Outside Ministries Base & Global Resets
 */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--om-color-bg);
  color: var(--om-on-surface);
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body-md-size);
  line-height: var(--om-type-body-md-lh);
  letter-spacing: var(--om-type-body-md-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sacred Selection */
::selection {
  background-color: var(--om-color-primary);
  color: var(--om-surface-container-lowest);
}

/* Material Symbols Integration */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--om-transition-fast);
}

a:hover {
  color: var(--om-color-primary);
}

/* Image Defaults */
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form Element Resets */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  color: inherit;
  border-radius: var(--om-radius-none);
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */
.font-serif {
  font-family: var(--om-font-serif);
}

.font-sans {
  font-family: var(--om-font-sans);
}

.text-display-hero {
  font-family: var(--om-font-serif);
  font-size: var(--om-type-display-hero-mobile-size);
  line-height: var(--om-type-display-hero-mobile-lh);
  font-weight: var(--om-type-display-hero-mobile-weight);
  letter-spacing: var(--om-type-display-hero-mobile-tracking);
}

@media (min-width: 768px) {
  .text-display-hero {
    font-size: var(--om-type-display-hero-size);
    line-height: var(--om-type-display-hero-lh);
    font-weight: var(--om-type-display-hero-weight);
    letter-spacing: var(--om-type-display-hero-tracking);
  }
}

.text-headline-lg {
  font-family: var(--om-font-serif);
  font-size: var(--om-type-headline-lg-mobile-size);
  line-height: var(--om-type-headline-lg-mobile-lh);
  font-weight: var(--om-type-headline-lg-mobile-weight);
  letter-spacing: var(--om-type-headline-lg-mobile-tracking);
}

@media (min-width: 768px) {
  .text-headline-lg {
    font-size: var(--om-type-headline-lg-size);
    line-height: var(--om-type-headline-lg-lh);
    font-weight: var(--om-type-headline-lg-weight);
    letter-spacing: var(--om-type-headline-lg-tracking);
  }
}

.text-headline-md {
  font-family: var(--om-font-serif);
  font-size: var(--om-type-headline-md-size);
  line-height: var(--om-type-headline-md-lh);
  font-weight: var(--om-type-headline-md-weight);
  letter-spacing: var(--om-type-headline-md-tracking);
}

.text-headline-sm {
  font-family: var(--om-font-serif);
  font-size: var(--om-type-headline-sm-size);
  line-height: var(--om-type-headline-sm-lh);
  font-weight: var(--om-type-headline-sm-weight);
  letter-spacing: var(--om-type-headline-sm-tracking);
}

.text-body-lg {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body-lg-size);
  line-height: var(--om-type-body-lg-lh);
  font-weight: var(--om-type-body-lg-weight);
  letter-spacing: var(--om-type-body-lg-tracking);
}

.text-body-md {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body-md-size);
  line-height: var(--om-type-body-md-lh);
  font-weight: var(--om-type-body-md-weight);
  letter-spacing: var(--om-type-body-md-tracking);
}

.text-body-sm {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body-sm-size);
  line-height: var(--om-type-body-sm-lh);
  font-weight: var(--om-type-body-sm-weight);
  letter-spacing: var(--om-type-body-sm-tracking);
}

.text-label-caps {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-label-caps-size);
  line-height: var(--om-type-label-caps-lh);
  font-weight: var(--om-type-label-caps-weight);
  letter-spacing: var(--om-type-label-caps-tracking);
  text-transform: uppercase;
}

.text-label-md {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-label-md-size);
  line-height: var(--om-type-label-md-lh);
  font-weight: var(--om-type-label-md-weight);
  letter-spacing: var(--om-type-label-md-tracking);
}

.text-price-tag {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-price-tag-size);
  line-height: var(--om-type-price-tag-lh);
  font-weight: var(--om-type-price-tag-weight);
  letter-spacing: var(--om-type-price-tag-tracking);
}


/* ==========================================================================
   Editorial Entry Content (Standard WordPress Editor Formatting)
   ========================================================================== */
.entry-content {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-body-lg-size);
  line-height: 1.8;
  color: var(--om-on-surface-variant);
}

.entry-content p {
  margin-bottom: var(--om-space-lg);
}

.entry-content h2 {
  font-family: var(--om-font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--om-on-surface);
  margin-top: var(--om-space-2xl);
  margin-bottom: var(--om-space-md);
  letter-spacing: -0.01em;
}

.entry-content h3 {
  font-family: var(--om-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--om-on-surface);
  margin-top: var(--om-space-xl);
  margin-bottom: var(--om-space-sm);
}

.entry-content h4 {
  font-family: var(--om-font-sans);
  font-size: var(--om-type-label-caps-size);
  letter-spacing: var(--om-type-label-caps-tracking);
  text-transform: uppercase;
  color: var(--om-primary);
  margin-top: var(--om-space-lg);
  margin-bottom: var(--om-space-xs);
}

.entry-content blockquote {
  position: relative;
  border-left: 2px solid var(--om-primary);
  background-color: var(--om-surface-container-low);
  padding: var(--om-space-lg) var(--om-space-xl);
  margin: var(--om-space-xl) 0;
  font-family: var(--om-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--om-on-surface);
}

.entry-content blockquote cite {
  display: block;
  font-family: var(--om-font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--om-primary);
  margin-top: var(--om-space-sm);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--om-space-xl);
  margin-bottom: var(--om-space-lg);
}

.entry-content li {
  margin-bottom: var(--om-space-xs);
}

.entry-content a {
  color: var(--om-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entry-content a:hover {
  color: var(--om-primary-fixed);
}

.entry-content figure,
.entry-content .wp-block-image {
  margin: var(--om-space-2xl) 0;
  border: 1px solid var(--om-border-subdued);
  background-color: var(--om-surface-container-low);
  overflow: hidden;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  padding: 10px 16px;
  font-size: var(--om-type-body-sm-size);
  color: var(--om-text-muted);
  text-align: center;
  border-top: 1px solid var(--om-border-subdued);
  background-color: var(--om-surface-container-lowest);
}

.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--om-border-subdued-hover), transparent);
  margin: var(--om-space-2xl) 0;
}