/* =========================================================
   Pixel & Wood — Global Styles
   Order:
   1) Base + Layout
   2) Header / Navigation
   3) Components (logo, buttons, forms)
   4) Page Sections (About, Prices)
   5) Footer
   6) Responsive (Small, Medium, Large)
   ========================================================= */

/* =====================
   1) Base + Layout
   ===================== */
html, body { 
  height: 100%; 
  margin: 0;
  font-family: "Quicksand", sans-serif; 
  background-color: #eeeeee; 
}

/* Ensure page fills viewport so footer can sit at bottom when content is short */
.page { 
  min-height: 100vh; 
}

/* Default cell text alignment (you centre most cells) */
.cell { text-align: center; }

/* Home/index middle stack (logo above buttons, centred) */
.main-content { 
  padding: 1rem 0; 
  display: flex;
  flex-direction: column;   /* logo above buttons */
  justify-content: center;  /* vertical centring */
}
.main-content .button-center{ margin-top: 1rem; }

/* About / Contact pages: allow natural flow and scrolling */
.main-content-about,
.main-content-contact {
  display: block;
  min-height: auto;
  overflow: visible;
}

/* Generic images within About page content */
.main-content-about img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =====================
   2) Header / Navigation
   ===================== */
.title-bar { background: transparent; }
.title-bar-title{ color: #040404; margin-left: 0.5rem; }

/* Hamburger button (Foundation) */
.menu-icon {
  width: 1.4rem;
  height: 1.3125rem;
  background-size: contain;
  background-repeat: no-repeat;
  color: #040404;           /* bar colour via currentColor */
}
.menu-icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;                 /* middle bar */
  box-shadow: 0 7px 0 currentColor,         /* top bar */
              0 14px 0 currentColor;        /* bottom bar */
}
.menu-icon:hover { color: #007BFF; }
.menu-icon:hover::after { 
  background: currentColor; 
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor; 
}

/* Small-only: spacing so burger isn’t flush to the edges and adds a gap below */
@media (max-width: 639px) {
  .title-bar { 
    padding-top: 0.75rem;
    padding-left: 0.75rem; 
    padding-right: 0.75rem; 
  }
  .title-bar .menu-icon { 
    margin: 0 0 0 0.25rem; 
    flex: 0 0 auto; 
  }
  .title-bar.show-for-small-only { margin-bottom: 1rem; }
}

/* =====================
   3) Components
   ===================== */
/* Logo */
.logo-img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  background: transparent !important;
}

/* Circle buttons */
.circle-btn {
  transition: color 0.3s ease, border-bottom 0.3s ease;
  box-sizing: border-box;             /* prevent size jump on hover */
  border-bottom: 2px solid transparent; /* reserve underline space */
  display: inline-flex;               /* stack icon over label */
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0;                /* touch-friendly target */
}
.circle-btn:hover,
.circle-btn:focus { color: #ff5900; border-bottom: 2px solid #007BFF; text-decoration: none; }
.circle-btn:active    { color: #0056b3; border-bottom: 2px solid #0056b3; }

/* Button icons */
.circle-btn img { 
  width: auto; height: auto; max-width: 48px; max-height: 48px; 
  margin: 0 auto 0.25rem auto; display: block; 
}
/* Allow per-icon custom sizing */
.circle-btn img.btn-img { height: 100px; width: auto; }

/* Button rows */
.circle-buttons-row { margin-top: 1rem; }
.circle-buttons-row .cell { margin-bottom: 1rem; }

/* Button bar spacing */
.button-center {
  margin-top: 2rem;  /* adjust as needed */
}

/* Forms */
.callout { background-color: transparent; box-shadow: none; border: none; }
input[type="text"], input[type="email"], input[type="password"], textarea { border-radius: 8px; }
input[type="submit"], .button { border-radius: 8px; font-weight: bold; }
input[type="submit"]:hover,
.button:hover,
input[type="submit"]:focus,
.button:focus { color: #040404; text-decoration: underline; }

/* =====================
   4) Page Sections
   ===================== */
/* About section */
.about-photo {
  display: block;
  width: min(320px, 45vw);
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Prices page — image */
.price-img { 
  display: block; 
  height: auto; 
  max-width: 100%; 
  margin: 0 auto;           /* centred */
}

/* =====================
   5) Footer
   ===================== */
/* Price intro (default) */
.price-intro { 
  margin-top: 0.75rem 0;   /* comfortable default spacing */
  text-align: center;  /* matches your layout */
}
.footer { background: transparent; margin-top: 1rem; }
.footer .cell-content p{
  background: #8a8a8a;
  padding: 0.75rem 0; 
  text-align: center;
  color: #fcfafa;
  border-radius: 2em;
}

/* =====================
   6) Responsive
   ===================== */
/* --- Small (≤639px) --- */
@media (max-width: 639px) {
  /* About avatar size + centred text */
  .about-photo { width: 200px; height: 200px; }
  .about-section { text-align: center; }
  .about-section .about-photo { margin-bottom: 1.5rem; }

  /* Circle buttons spacing on small */
  .circle-buttons-row { margin-top: 1rem; }
  .circle-buttons-row .cell { margin-bottom: 1rem; }

  /* Price image: smaller cap on phones */
  .price-img { max-width: 320px; height: auto; }

  /* Pull intro text a bit higher on small */
  .price-intro { 
    margin-top: 5rem; 
    margin-bottom: 0.5rem; 
  }
}

/* --- Medium (≥640px and <1200px) --- */
@media (min-width: 640px) and (max-width: 1199px) {
  /* About avatar size (single, non-conflicting value) */
  
  /* Keep About text centred on medium for symmetry */
  .main-content-about .about-section { text-align: center; }
  .main-content-about .about-heading { text-align: center; }
  .main-content-about .about-text { text-align: center; }

  /* Tighter button spacing on medium-only */
  .circle-btn { gap: 0.25rem; padding: 0.5rem 0; }
  .circle-buttons-row .cell { padding-left: 1rem !important; padding-right: 1rem !important; }
  .circle-btn span { font-size: 0.95rem; }
}

/* --- Large (≥1200px) --- */
@media (min-width: 1200px) {
  /* About section aligns left on large for readability */
  .main-content-about .about-section { text-align: left; }
  .main-content-about .about-heading { text-align: left; }
  .main-content-about .about-text { text-align: left; }
  

  /* Prices image comfortable cap on very large screens */
  .price-img { max-width: 640px; }
}

/* =====================
   Typography (kept at end so it wins defaults)
   ===================== */
h1, h2, h3, h4, h5, p { font-family: "Quicksand", sans-serif; }