@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');

/* Global wrapper to add horizontal padding */
/* Adds horizontal padding and optional centering */
.site-container {
  max-width: 1400px;         /* Optional: limit overall width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;      /* ← Adds bottom space */
  padding-top: 10px;         /* ← Optional: adds top space too */
}

body {
  padding-left: 40px;
  padding-right: 40px;
}

/* Optional: prevent padding from affecting full-width headers/footers */
.header-container,
.footer-container {
  margin-left: -40px;
  margin-right: -40px;
}

/* Styles for the logo */
.navbar-logo img {
  width: 80px;
  height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Main title in Oswald, navy blue */
.navbar-title {
  display: flex;
  font-size: 4em;
  line-height: 1.2;
  font-weight: 600;
  font-family: 'Oswald', sans-serif !important;
  color: #002855 !important;
}

/* Subtitle below the title */
.navbar-subtitle {
  font-size: 1rem;
  margin-top: 0.25rem;
  color: #555;
  font-weight: 300;
}

/* --- Base Card Styles (applies to .card.flip-card) --- */
.card { /* This class will be on the main div: <div class="card flip-card ..."> */
  position: relative;
  background: #002855; /* NPI Blue background */
  border-radius: 8px;
  color: white;
  overflow: hidden; /* Important for max-height transition to look clean */
  
  /* Height Management for Expansion */
  min-height: 420px; /* Initial minimum height for the front face - adjust as needed */
  max-height: 420px; /* Initial max-height, same as min-height for a fixed start */

  /* Transitions: include max-height, and keep your existing transform/box-shadow */
  transition:
    max-height 0.7s cubic-bezier(0.23, 1, 0.32, 1), /* Smoother easing for expansion */
    transform 0.3s ease,
    box-shadow 0.3s ease;

  /* Keep your existing L-bracket styles if they target .card */
  cursor: pointer; /* Or default if no click action */
  will-change: transform, box-shadow, max-height; /* Hint for browser optimization */
}

/* Top‑left “L” bracket (from your existing CSS) */
.card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #C2D9ED;
  border-left: 2px solid #C2D9ED;
  z-index: 3; /* Ensure brackets are above faces */
}

/* Bottom‑right “L” bracket (from your existing CSS) */
.card::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #C2D9ED;
  border-right: 2px solid #C2D9ED;
  z-index: 3; /* Ensure brackets are above faces */
}

/* Hover on main card: expand max-height and apply existing lift/glow */
.card:hover {
  max-height: 800px; /* Expand to a large enough value to fit any back content */
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Click/active: subtle press (from your existing CSS) */
.card:active {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10) !important;
}


/* --- Flip Card Specific Structure (Inner, Front, Back Faces) --- */
.flip-card-inner {
  position: relative; /* Establishes a containing block for absolute children */
  width: 100%;
  height: 100%; /* Takes the height of the parent .card */
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Will try to fill the .flip-card-inner */
  
  padding: 25px; /* Generous padding for content within faces */
  box-sizing: border-box; /* Includes padding in width/height */
  
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; /* Good for front face with title and prompt */
  /* For back face, you might want flex-start if it's just a block of text */

  transition: opacity 0.5s ease-in-out 0.1s; /* Delay opacity transition slightly */
  color: white; /* Ensure text is white */
}

/* FRONT — vertically & horizontally centered */
.flip-card-front {
  opacity: 1;
  z-index: 2;
  justify-content: center;   /* vertically center */
  align-items: center;       /* horizontally center */
  text-align: center;        /* center inline text */
}

.flip-card-back {
  opacity: 0;
  z-index: 1; /* Back face is behind initially */
  justify-content: flex-start; /* Align content to the top */
  overflow-y: auto; /* Add scroll if content somehow exceeds max-height (fallback) */
}

/* Hover effect on the main .card to swap face opacity */
.card:hover .flip-card-front {
  opacity: 0;
  z-index: 1;
}

.card:hover .flip-card-back {
  opacity: 1;
  z-index: 2;
}

/* Styling for content within faces */
.flip-card-front h3, 
.flip-card-back h3 {
  display: flex;
  align-items: center;
  margin-top: 0; /* Remove default top margin from h3 */
  margin-bottom: 15px;
  color: white; /* Explicitly set color */
}

.flip-card-front h3 .fas, /* Font Awesome Solid icons */
.flip-card-back h3 .fas {
  margin-right: 12px;
  font-size: 1.3em;
  color: #C2D9ED; /* Matches L-brackets */
}

.flip-card-front .card-text-prompt {
  font-size: 1em;
  font-style: italic;
  text-align: center;
  align-self: center;
  /* REMOVE this line ↓ */
  /* margin-top: auto; */
  padding-bottom: 10px;
}


.flip-card-back .card-text-answer { /* Specific class for the answer text */
  font-size: 17px; /* From your original .card .card-text */
  line-height: 1.6;
  color: white; /* Ensure text is white */
}

.flip-card-back .card-text-answer a {
  color: #C2D9ED;
  text-decoration: underline;
}
.flip-card-back .card-text-answer a:hover {
  color: white;
}

/* --- Row Equal Height (if you still need it elsewhere, otherwise can be removed if cards expand) --- */
/* If cards expand, true equal height is less relevant for this specific row */
.row-equal {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px; /* Counter Bootstrap column padding */
  margin-right: -15px; /* Counter Bootstrap column padding */
}

.row-equal > [class*="col-"] {
  display: flex; 
  padding-left: 15px; /* Standard Bootstrap column padding */
  padding-right: 15px; /* Standard Bootstrap column padding */
  margin-bottom: 30px; /* Space between rows of cards */
}

.row-equal > [class*="col-"] > .card { /* Target .card directly if it's the immediate child */
  width: 100%; /* Make card take full width of column */
  /* flex-grow: 1; /* Only if you want columns to force cards to same (max) height */
}