/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Global font family and smoothing
   Updated to use the sample's font (Poppins) and base sizes.
   Font file is still loaded from the layout head (Google Fonts link). */
html, body {
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base font-size to better match the sample */
body {
  font-weight: 400;
  /* Base font size chosen to match sample feel */
  font-size: 15px;
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

/* Header / navbar adjustments moved from layout inline styles */
.navbar .nav-link {
  font-size: 14px;
  letter-spacing: .4px;
}

.navbar-brand img {
  height: 60px;
  max-height: 60px;
  width: auto;
}

/* Contact + social placed beside CTA */
.contact-social {
  display: none; /* hidden on small screens; layout already uses responsive classes */
  align-items: center;
  gap: .75rem;
}

@media (min-width: 992px) {
  .contact-social {
    display: flex;
  }
}

.contact-info {
  font-size: 14px;
  color: #222;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.social-icons a {
  color: #222;
  font-size: 18px;
  margin-left: .35rem;
}

/* Slight spacing to match sample feel */
.contact-social .social-icons { display: flex; align-items: center; gap: .25rem; }

/* Navigation: Semi-bold (600) */
.navbar,
.navbar .navbar-brand,
.navbar .navbar-toggler,
.nav-pills .nav-link,
.dropdown-item {
  font-weight: 600;
}

/* Headings: Bold (700) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

.custom-radius-card {
    border-radius: 1.5rem;
    border-color: #1b6ec2;
}

/*.custom-radius-card .card-header,
.custom-radius-card .card-img-top {
        border-radius: 1.5rem 1.5rem 0 0;*/ /* Apply to top corners only */
/*}*/

.card-body h5 {
    color: #f09537;
}

.card .card-accent-left {
    width: 30px;
    min-width: 30px;
    background-color: var(--bs-primary); /* change to any --bs-* token or use a custom color */
}

/* Ensure the accent spans the full card height when using d-flex layout above */
.card > .d-flex.h-100 {
    height: 100%;
}

.card .flex-grow-1 {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevent overflow on long text */
}

.card .card-body {
    flex: 0 0 auto;
}

.card .card-footer {
    flex: 0 0 auto;
}

/* Optional: color variants */
.card .card-accent-left.accent-success {
    background-color: var(--bs-success);
}

.card .card-accent-left.accent-warning {
    background-color: var(--bs-warning);
}

.card .card-accent-left.accent-danger {
    background-color: var(--bs-danger);
}

.fbsharelink {
    cursor: pointer;
    display: inline-block; /* ensures cursor applies reliably */
}

.fbsharelink img {
    pointer-events: auto; /* in case a rule disabled pointer events on images */
}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

#quicklinks > li a {
    font-size: 13px;
}

/* Ensure page fills viewport and uses column flex layout */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Make the main content area grow to push footer down */
.page-content {
    flex: 1 0 auto; /* allow growing, don't force shrinking */
}

/* Ensure footer doesn't shrink */
footer {
    flex-shrink: 0;
}

/* --- appended for full-bleed carousel --- */

/* Make an element break out of the centered .container and span the full viewport width */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
 /* max-width: 100%;*/
  overflow: hidden;
  box-sizing: border-box;
}

/* Ensure carousel images cover the available area without distortion */
.full-bleed .carousel-item img {
  width: 100%;
  height: 480px; /* adjust height as needed */
  object-fit: cover;
}

/* Make controls vertically centered on larger heights */
.full-bleed .carousel-control-prev,
.full-bleed .carousel-control-next {
  top: 50%;
  transform: translateY(-50%);
}

.books-icon i {
    margin-right:0px;
}

/* QA card visual + flip animation
   Replaces previous accent-based treatment; cards show only question on front,
   reveal the answer image/text on the back using a 3D flip animation. */

.flip-card {
    perspective: 1200px; /* enables 3D space for child transforms */
    display: block;
    width: 100%;
    margin: 0 auto;
    /* no fixed/min height so content drives the size */
}

/* Large screens: make flip-card narrower (85% width) to match layout */
@media (min-width: 992px) {
  .flip-card {
    width: 80%;
  }
}

.flip-card-inner {
    position: relative;
    display: grid; /* stack faces in same grid cell so they overlap */
    grid-template-areas: "card";
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

/* When flipped, rotate the inner container */
.flip-card-inner.is-flipped {
    transform: rotateY(-180deg);
}

/* Both faces occupy the same grid cell and therefore overlap,
   but since they are not absolutely positioned they contribute to layout height. */
.flip-card-front,
.flip-card-back {
    grid-area: card;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    border-radius: 0.75rem;
    overflow: hidden;
    box-sizing: border-box;

    /* Provide the same base visuals as qa-card so either face looks correct */
    border: 1px solid rgba(3, 6, 13, 0.06);
    box-shadow: 0 6px 18px rgba(3, 6, 13, 0.06);
    background-color: #fff;
    transition: box-shadow .15s ease;
}

/* Rear face rotated so it appears after flipping */
.flip-card-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* Slight lift on hover for unflipped cards */
.flip-card:not(.flipped):hover .qa-card,
.flip-card:not(.flipped):hover .flip-card-front {
    box-shadow: 0 10px 30px rgba(3, 6, 13, 0.09);
}

/* Ensure images on the back fit nicely without cropping */
.back-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Small screens: reduce image max height */
@media (max-width: 576px) {
    .back-image {
        max-height: 180px;
    }
}

/* Make back-image keyboard-focusable and clickable for hiding */
.back-image {
    cursor: pointer;
    outline: none;
}

/* Ensure back-image is focusable by keyboard */
.back-image:focus {
    box-shadow: 0 0 0 3px rgba(24, 63, 255, 0.18);
}

/* Question responsive sizing - ensure descendants inherit the size */
.qa-question {
    font-size: 1rem;
    margin: 0;
    line-height: 1.25;
}

/* Force children to inherit the computed size (covers cases where item.Question contains its own tags) */
.qa-question, 
.qa-question * {
    font-size: inherit;
}

/* Smaller question font on extra-small / small screens.
   Use stronger rule so it overrides other stylesheet rules when necessary. */
@media (max-width: 576px) {
    .qa-question, 
    .qa-question * {
        font-size: 0.875rem !important; /* ~13px with base 15px */
    }
}