/* --- ACCESSIBLE CANVAS FLIPCARD SYSTEM --- */

/* 1. The main container */
.canvas-flip-container {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px; /* Creates the 3D depth */
  margin: 20px auto;
}

/* 2. The flippable inner box */
.canvas-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  outline: none; /* We will define a custom focus state below */
}

/* 3. The Flip Triggers (Hover AND Keyboard Focus) */
.canvas-flip-container:hover .canvas-flip-inner,
.canvas-flip-container:focus-within .canvas-flip-inner {
  transform: rotateY(180deg);
}

/* 4. Ensuring keyboard users know they are on the card */
.canvas-flip-container:focus-within {
  outline: 3px solid #008EE2; /* High-contrast blue focus ring */
  outline-offset: 5px;
  border-radius: 15px;
}

/* 5. Shared properties for Front and Back */
.canvas-flip-front, .canvas-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* For Safari */
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 6. Front Side Styling */
.canvas-flip-front {
  background-color: #ffffff;
  color: #2D3B45;
  border: 2px solid #2D3B45;
  z-index: 2;
}

/* 7. Back Side Styling */
.canvas-flip-back {
  background-color: #2D3B45; /* Dark blue background */
  color: #ffffff;
  transform: rotateY(180deg);
  z-index: 1;
}

/* 8. Fix for Screen Readers (prevents reading "back" text while on "front") */
.canvas-flip-container:not(:hover):not(:focus-within) .canvas-flip-back {
  aria-hidden: true;
  display: none; /* Completely hide back content until flipped */
}

.canvas-flip-container:hover .canvas-flip-back,
.canvas-flip-container:focus-within .canvas-flip-back {
  display: flex;
}