/*
 * Global stylesheet for Andres Felipe Peña's portfolio.
 *
 * The landing page features a circular "pizza" wheel composed of
 * eight interactive slices overlaid on a stained‑glass image.  The
 * stained glass itself provides all of the colour for the wheel, so
 * the SVG slices are transparent and outlined with a dark stroke.  A
 * JavaScript animation handles rotation of both the image and the
 * wheel, counter‑rotating the text labels so they always remain
 * upright.  When a slice is clicked the rotation stops and the
 * selected slice and its label enlarge to draw focus.
 *
 * Internal pages use a minimal layout consisting of a full‑screen
 * content area and a slim banner at the bottom for navigation.
 */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color: var(--ink, #333);
  background-color: var(--page-bg, #F5F2E8);
  overflow-x: hidden;
}

/* Links inherit the ink colour and underline on hover */
a {
  color: var(--ink, #333);
  text-decoration: underline;
}
a:hover {
  color: #666;
}

/* Container for the rotating wheel.  Centers its contents and
   provides vertical breathing room. */
#wheelContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  margin: 2rem 0;
}

/* Stained glass background for the wheel.  Clipped to a circle and
   absolutely centred so it sits behind the SVG.  Pointer events are
   disabled so clicks reach the slices. */
#glassPizza {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

/* The SVG wheel sits above the stained glass.  It is centred
   absolutely and sized responsively.  Rotation is handled via
   JavaScript rather than CSS to keep the labels aligned. */
svg#pieSVG {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* Allow content drawn outside the viewBox to remain visible so
     curved labels can extend beyond the original 600×600 region. */
  overflow: visible;
}

/* Provide sizing for embedded PDFs and tools.  Without this rule
   iframes default to a small size, causing the viewers to appear tiny.
   The height calculation leaves space for the banner at the bottom. */
.pdf-container {
  width: 100%;
  height: calc(100vh - 56px);
  border: none;
  display: block;
}

/* Individual slices.  Transparent fill allows the stained glass
   colours to show through.  A solid stroke defines the boundaries. */
path.slice {
  stroke: var(--ink, #333);
  stroke-width: 3;
  fill: transparent;
  cursor: pointer;
  /* Set transform origin to the centre of the SVG so scaling
     operations originate from the wheel's centre. */
  transform-origin: 300px 300px;
  transition: transform 0.3s ease, fill 0.3s ease;
}

/* Highlight the active slice by filling it with a semi‑transparent red. */
path.slice.active {
  fill: rgba(255, 0, 0, 0.35);
}

/* Text labels for each slice.  These are always visible and kept
   upright via JavaScript.  White text ensures good contrast against
   the stained glass. */
text.label {
  font-size: 1rem;
  font-weight: bold;
  /* Use a deep red colour so the curved labels stand out against the stained glass. */
  fill: #c00000;
  /* Allow labels to receive pointer events so they can be clicked
     just like their corresponding slices. */
  pointer-events: auto;
  transition: transform 0.3s ease, font-size 0.3s ease;
}

/* Full‑screen page layout with bottom banner */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1;
  overflow: auto;
  padding: 0;
  max-width: none;
  margin: 0;
}

.banner {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner a {
  color: var(--ink, #333);
  font-weight: bold;
  text-decoration: none;
  margin-right: 1rem;
}

.banner a:hover {
  color: #666;
}

.banner span {
  flex: 1;
  text-align: right;
}