/* ==========================================================================
   Auburn Dental — shared stylesheet
   Plain CSS, no build step. Mobile-first; breakpoints at 768px and 1024px.
   The former table-based layout is reproduced with CSS grid, keeping the
   original column order (left services / main content / right column).
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #333;
  background-color: #fff;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* --------------------------------------------------------------------------
   English home page (index.html) — centered single column on light grey
   -------------------------------------------------------------------------- */

.page-home {
  padding: 20px 10px;
  background-color: #f9f9f9;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
}

.page-home .container {
  max-width: 800px;
  margin: 0 auto;
}

.page-home img {
  margin: 1rem auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-home h1 {
  margin: 2rem 0;
  color: #333;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

.poem,
.final-verse {
  margin: 2rem 0;
  color: #444;
  line-height: 1.8;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
}

.poem p,
.final-verse p {
  margin: 0.6rem 0;
}

/* --------------------------------------------------------------------------
   Chinese pages (cweb / ctweb / a1 / a1t) — serif feel, sidebar + main grid
   -------------------------------------------------------------------------- */

.page-cjk {
  font-family: "Times New Roman", Times, "SimSun", "PMingLiU", "Songti TC", serif;
}

.page-cjk .site {
  display: grid;
  /* v2d: mobile stacks MAIN first, sidebars below it.
     v2e: the header block above/including the photo (.main-top) is its own
     grid row; sidebars start in the row BELOW the photo (see media queries) */
  grid-template-areas:
    "top"
    "main"
    "left"
    "right";
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
}

.main-top  { grid-area: top;   min-width: 0; }
.col-left  { grid-area: left;  min-width: 0; }
.col-main  { grid-area: main;  min-width: 0; }
.col-right { grid-area: right; min-width: 0; }

@media (min-width: 768px) {
  .page-cjk .site {
    grid-template-areas:
      ".    top"
      "left main"
      ".    right";
    grid-template-columns: 185px minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-cjk .site {
    grid-template-areas:
      ".    top  ."
      "left main right";
    grid-template-columns: 185px minmax(0, 1fr) 178px;
  }
}

/* Sidebar (services) */

.sidebar-title {
  margin: 1.2em 0 0.4em;
  font-weight: bold;
}

.col-left p,
.col-right p {
  margin: 0.5em 0;
}

.logo {
  display: block;
  width: 100%;
  max-width: 600px;
}

/* Main column */

.main-top h1,
.col-main h1 {
  margin: 1em 0;
  font-size: 1.6rem;
}

.col-main h2 {
  margin: 1.4em 0 0.6em;
  font-size: 1.25rem;
}

/* Keyword subtitle under the h1 (v2) */

.subtitle {
  margin: -0.6em 0 1em;
  font-size: 1.15rem;
  color: #444;
}

.main-top p,
.col-main p {
  margin: 0.8em 0;
}

.tagline {
  margin: 1.2em 0;
  font-size: 1.5rem;
}

.page-foot {
  margin-top: 1.5rem;
}

.page-foot p {
  margin: 0.5em 0;
}

/* Indented plain lists — replaces the non-breaking-space indents of the
   original article pages (those could not wrap and forced horizontal scroll) */

.list-plain {
  list-style: none;
  margin: 0.5em 0;
  padding-left: 1.6em;
}

.list-plain li {
  margin: 0.35em 0;
}

/* Google Maps embed (replaces the map12.png screenshot) */

.map-embed {
  display: block;
  width: 100%;
  max-width: 509px;
  aspect-ratio: 509 / 457;
  border: 0;
}

/* Small helpers matching the original inline font styles */

.font-small   { font-size: 0.85rem; }
.font-verdana { font-family: Verdana, Arial, Helvetica, sans-serif; }
.small-note   { font-size: 14px; }
.plain-link   { text-decoration: none; }

/* --------------------------------------------------------------------------
   v2b (cweb / ctweb): sidebar content moved into a sticky page footer.
   Body becomes a flex column (min-height 100vh, footer pushed to the
   bottom on short pages — content flow, not a fixed overlay); the main
   column becomes the only column.
   -------------------------------------------------------------------------- */

.page-cjk.has-site-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.has-site-footer .site {
  flex: 1 0 auto;
  width: 100%;
}

.page-cjk .site.site-noside {
  grid-template-areas: "main";
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}

.site-footer {
  width: 100%;
  margin-top: auto;
  padding: 1.2rem 10px 1.5rem;
  border-top: 1px solid #ddd;
  background: #fafafa;
  color: #666;
}

.site-footer p {
  margin: 0.4em 0;
}

.footer-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* keyword line: visible + crawlable, but visually quiet */

.footer-keyword {
  margin: 0.8em 0 0;
  font-size: 0.85rem;
  font-weight: normal;
  color: #999;
}

/* --------------------------------------------------------------------------
   v2c (cweb / ctweb): ADA/language + article links flank the smile quote
   as a three-part row (left block | center quote | right block); on narrow
   viewports the blocks wrap to sit above/below the quote in DOM order.
   -------------------------------------------------------------------------- */

.quote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4em 0;
}

.quote-side {
  flex: 0 1 11rem;
  min-width: 8.5rem;
  font-size: 0.85rem;
  color: #555;
}

.quote-side p {
  margin: 0.35em 0;
}

.quote-right {
  text-align: right;
}

.quote-center {
  flex: 1 1 15rem;
  text-align: center;
  line-height: 1.8;
}