/* Remove all outlines, box-shadows, and borders from custom-link buttons (Author/Yoga) for all browsers and states */
.custom-link,
.custom-link.btn,
.custom-link:focus,
.custom-link:active,
.custom-link:focus-visible,
.custom-link.btn:focus,
.custom-link.btn:active,
.custom-link.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
}
/* styles.css: Custom styles for Sarah's website */

/* =====================
   INDEX.HTML STYLES
   ===================== */
.landing-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: flex;
  pointer-events: none;
  background: 
    linear-gradient(rgba(20,20,20,0.45), rgba(20,20,20,0.45)),
    url('assets/author_landing.png') left center/40% 80% no-repeat,
    url('assets/yogi_landing.png') right center/40% 80% no-repeat;
  background-color: #fff;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 40% 80%, 40% 80%;
  background-position: center center, left center, right center;
}
.link-section {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}
.link-section a {
  font-size: 2rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
}
.footer-landing {
  background-color: #e9b3a3 !important;
  text-align: center;
  color: #333;
  padding: 1rem;
}

/* =====================
   AUTHOR.HTML STYLES
   ===================== */
.author-bg-text {
  font-size: clamp(3rem, 12vw, 9rem);
  color: #e9b3a3;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
  text-transform: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
}
.author-header-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: bold;
  color: #000;
  text-decoration: underline;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  text-underline-offset: 1.0rem;
}
@media (min-width: 769px) {
  .author-header-text {
    top: 78%;
  }
}
.navbar-brand {
  font-size: 1.75rem;
  font-weight: bold;
}
.social-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* =====================
   YOGA.HTML STYLES
   ===================== */
.yogi-bg-text {
  font-size: clamp(3rem, 12vw, 9rem);
  color: #e9b3a3;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
  text-transform: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
}
.yogi-header-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: bold;
  color: #000;
  text-decoration: underline;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  text-underline-offset: 1.0rem;
}

@media (min-width: 769px) {
  .yogi-header-text {
    top: 78%;
  }
}

/* =====================
   SHARED/BASE STYLES
   ===================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');
body {
    font-family: 'Playfair Display', serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    color: #f4f0ec;
    display: flex;
    flex-direction: column;
}
header {
  text-align: center;
  padding: 3rem 1rem 1rem;
}
header h1 {
  font-size: 14vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0;
}
footer {
  text-align: center;
  padding: 1rem;
}
.custom-link,
.custom-link.btn,
.custom-link.btn-primary,
.custom-link.btn-success {
    position: relative;
    color: #f4f0ec !important;
    background: none;
    box-shadow: none;
    font-size: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    text-decoration: none;
}
.custom-link::after,
.custom-link.btn::after,
.custom-link.btn-primary::after,
.custom-link.btn-success::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background-color: #f4f0ec;
    pointer-events: none;
}
.custom-link:hover,
.custom-link:focus {
    color: #1a1a1a !important;
    transition: color 0.2s;
}
.custom-link:hover::after,
.custom-link:focus::after {
  background-color: #fff;
  height: 2.2em;
  z-index: -1;
  border-radius: 0.0em;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: background-color 0.2s, width 0.2s;
  opacity: 0.9;
}
.bg-white-page {
  background-color: #fff !important;
  background-image: none !important;
}

/* =====================
   MOBILE STYLES (ALL PAGES)
   ===================== */
@media (max-width: 768px) {
    .author-btn-col {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 40vw;
    }
    .author-btn-mobile {
        position: absolute;
        left: 90%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 80vw !important;
        max-width: 90vw;
        min-width: 120px;
    }
    .yoga-btn-col {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 40vw;
    }
    .yoga-btn-mobile {
        position: absolute;
        right: 90%;
        top: 50%;
        transform: translate(50%, -50%);
        margin: 0;
        width: 80vw !important;
        max-width: 90vw;
        min-width: 120px;
    }
    .navbar-brand {
      font-size: 1.2rem;
    }
    .footer-landing {
      font-size: 0.95rem;
      padding: 1.2rem 0.5rem;
    }
    .container, .container.my-5 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    h1, h2, h3 {
      font-size: 2rem !important;
      margin-top: 1.2rem !important;
    }
    .row.align-items-center {
      flex-direction: column !important;
    }
    .col-md-7, .col-md-5 {
      max-width: 100%;
      flex: 0 0 100%;
      margin-bottom: 1.5rem;
    }
    .card {
      max-width: 100% !important;
    }
    .position-absolute.top-50.start-50.translate-middle.fw-bold {
      font-size: 2.5rem !important;
      margin-top: 0 !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .position-relative.d-flex.flex-column.align-items-center[style] {
      margin-left: 0 !important;
    }
    .d-flex.flex-wrap.justify-content-center.align-items-center.my-4.gap-3 {
      flex-direction: column !important;
      gap: 1rem !important;
    }
    .d-flex.flex-wrap.justify-content-center.align-items-center.my-4.gap-3 img {
      width: 90vw !important;
      height: auto !important;
      max-width: 320px !important;
    }
    .link-section {
      padding: 0 0.5rem;
      gap: 0;
    }
    .custom-link {
      font-size: 1.3rem !important;
      padding: 0.8rem 1rem;
      width: 100%;
      justify-content: center;
      margin: 0;
    }
    .link-section .col-6 {
      display: flex;
      align-items: center;
      padding: 0;
    }
    .link-section .col-6:first-child {
      justify-content: flex-end;
      padding-right: 0.5rem;
    }
    .link-section .col-6:last-child {
      justify-content: flex-start;
      padding-left: 0.5rem;
    }
    .custom-link {
      width: 75% !important;
      min-width: 120px;
      max-width: 220px;
    }
}
@media (max-width: 768px) {
    .author-btn-col {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 40vw;
    }
    .author-btn-mobile {
        position: absolute;
        left: 90%; /* move further right on mobile */
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 80vw !important;
        max-width: 90vw;
        min-width: 120px;
    }

    .yoga-btn-col {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 40vw;
    }
    .yoga-btn-mobile {
        position: absolute;
        right: 90%; /* move further left on mobile */
        top: 50%;
        transform: translate(50%, -50%);
        margin: 0;
        width: 80vw !important;
        max-width: 90vw;
        min-width: 120px;
    }

    .navbar-brand {
      font-size: 1.2rem;
    }
    .footer-landing {
      font-size: 0.95rem;
      padding: 1.2rem 0.5rem;
    }
    .container, .container.my-5 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    h1, h2, h3 {
      font-size: 2rem !important;
      margin-top: 1.2rem !important;
    }
    .row.align-items-center {
      flex-direction: column !important;
    }
    .col-md-7, .col-md-5 {
      max-width: 100%;
      flex: 0 0 100%;
      margin-bottom: 1.5rem;
    }
    .card {
      max-width: 100% !important;
    }
    .position-absolute.top-50.start-50.translate-middle.fw-bold {
      font-size: 2.5rem !important;
      margin-top: 0 !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    .position-relative.d-flex.flex-column.align-items-center[style] {
      margin-left: 0 !important;
    }
    .d-flex.flex-wrap.justify-content-center.align-items-center.my-4.gap-3 {
      flex-direction: column !important;
      gap: 1rem !important;
    }
    .d-flex.flex-wrap.justify-content-center.align-items-center.my-4.gap-3 img {
      width: 90vw !important;
      height: auto !important;
      max-width: 320px !important;
    }
    .link-section {
      padding: 0 0.5rem;
      gap: 0;
    }
    .custom-link {
      font-size: 1.3rem !important;
      padding: 0.8rem 1rem;
      width: 100%;
      justify-content: center;
      margin: 0;
    }
    .link-section .col-6 {
      display: flex;
      align-items: center;
      padding: 0;
    }
    .link-section .col-6:first-child {
      justify-content: flex-end;
      padding-right: 0.5rem;
    }
    .link-section .col-6:last-child {
      justify-content: flex-start;
      padding-left: 0.5rem;
    }
    .custom-link {
      width: 75% !important;
      min-width: 120px;
      max-width: 220px;
    }
}


/* Fake underline */
.custom-link::after,
.custom-link.btn::after,
.custom-link.btn-primary::after,
.custom-link.btn-success::after {
    content: "";
    position: absolute;
    bottom: 0;                           /* sits under the text */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;                         /* make line longer than text */
    height: 2px;                         /* thickness */
    background-color: #f4f0ec;           /* same color as text */
    pointer-events: none;
}

.custom-link:hover,
.custom-link:focus {
    color: #1a1a1a !important;
    transition: color 0.2s;
}

.custom-link:hover::after,
.custom-link:focus::after {
  background-color: #fff;
  height: 2.2em; /* visually creates a highlight "background" under the text */
  z-index: -1;
  border-radius: 0.0em;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 100%; /* wider underline on hover */
  transition: background-color 0.2s, width 0.2s;
  opacity: 0.9; /* more visible white highlight */
}

/* Background images for index.html only */
.landing-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: flex;
    pointer-events: none;
    background: 
        linear-gradient(rgba(20,20,20,0.45), rgba(20,20,20,0.45)),
        url('assets/author_landing.png') left center/50% 100% no-repeat,
        url('assets/yogi_landing.png') right center/50% 100% no-repeat;
    background-color: #fff;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 50% 100%, 50% 100%;
    background-position: center center, left center, right center;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a;
  color: #f4f0ec;
  font-family: sans-serif;
}

header {
  text-align: center;
  padding: 3rem 1rem 1rem;
}

header h1 {
  font-size: 14vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0;
}


.link-section {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
}

@media (max-width: 768px) {
  header {
    padding: 2rem 0.5rem 1rem;
  }
  header h1 {
    font-size: 2.5rem;
  }
  .link-section {
    padding: 0 0.5rem;
    gap: 0;
  }
  .custom-link {
    font-size: 1.3rem !important;
    padding: 0.8rem 1rem;
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  .link-section .col-6 {
    display: flex;
    align-items: center;
    padding: 0;
  }
  .link-section .col-6:first-child {
    justify-content: flex-end;
    padding-right: 0.5rem;
  }
  .link-section .col-6:last-child {
    justify-content: flex-start;
    padding-left: 0.5rem;
  }
  .custom-link {
    width: 75% !important;
    min-width: 120px;
    max-width: 220px;
  }
}


.link-section a {
  font-size: 2rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
}


footer {
  text-align: center;
  padding: 1rem;
}

footer.footer-landing {
  background-color: #e9b3a3 !important;
  color: #333 !important;
}
/* styles.css: Custom styles for Sarah's website */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');

body {
    font-family: 'Playfair Display', serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}