/*
Theme Name: ivo
Template: astra
Description: Child theme for Astra
Author: Your Name
Version: 1.0.0
*/

/* Add your custom styles below this line */

/* ==========================
   Satoshi Font Faces
========================== */

@font-face {
  font-family: "Satoshi";
  src: url("/wp-content/themes/ivo/fonts/Satoshi/Satoshi-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/wp-content/themes/ivo/fonts/Satoshi/Satoshi-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/wp-content/themes/ivo/fonts/Satoshi/Satoshi-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Satoshi", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
}

h3,
h4,
h5,
h6 {
  font-family: "Satoshi", sans-serif;
  font-weight: 600;
}

.main-navigation a,
button,
.wp-block-button__link {
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
}

/* ===== OPTION B: Playfair ===== */

/*
.ivo-serif-playfair h1,
.ivo-serif-playfair h2 {
  font-family: "Playfair Display", serif;
  font-weight: 300;
}
  */

/* TOP BAR */

/* =========================================================
   Fixed Top Announcement Bar (Astra Free compatible)
   ========================================================= */

/* Height variable so hero + content are pushed correctly */
:root {
  --ivo-topbar-h: 44px;
}

/* Top bar wrapper */
.ivo-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #0f2a3d;
  color: #ffffff;
}

/* Inner container */
.ivo-topbar__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: var(--ivo-topbar-h);
  padding: 10px 16px;
}

/* Visually centered text (ignores close button width) */
.ivo-topbar__text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}

/* Link styling */
.ivo-topbar__link {
  margin-left: 6px;
  color: #9fd6ff;
  text-decoration: none;
  font-weight: 600;
}

.ivo-topbar__link:hover {
  text-decoration: underline;
}

/* Close button */
.ivo-topbar__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

/* Push page content (hero) below the fixed bar */
body {
  padding-top: var(--ivo-topbar-h);
}

/* =========================================================
   Mobile adjustments
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --ivo-topbar-h: 56px;
  }

  .ivo-topbar__inner {
    padding: 10px 12px;
  }

  .ivo-topbar__text {
    white-space: normal;
    max-width: calc(100% - 48px);
    font-size: 13px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a,
.ast-container h1,
.ast-container h2,
.ast-container h3,
.ast-container h4,
.ast-container h5,
.ast-container h6 {
  text-transform: none;
}

body {
  background-color: #fff;
}

/* hero treatments*/

.hero-treatment-column {
  padding-top: 20px;
  padding-bottom: 20px;
}

div.hero-treatments {
  background-color: #f3f9fb;
}

.hero-treatments a,
.hero-treatments p {
  text-transform: uppercase;
  font-weight: 500 !important;
}

.hero-treatments img {
  opacity: 0.8;
  margin-bottom: 3px;
}

@media screen and (max-width: 782px) {
  .hero-treatment-column p {
    text-align: center;
    font-size: 24px;
  }
}