/* ==========================================================================
   Al Care Dental — house pass
   Applies the tasteskill v2 house rules to the existing Astra child theme:
   a five-step type scale, full-ink body copy, no gradients / shadows /
   hairlines / outlined boxes, sentence-case labels, a list-shaped blog
   archive, and a motion layer with a reduced-motion fallback.
   Every rule here answers a measured finding from scripts/inspect.mjs.
   ========================================================================== */

:root {
  --ac-ink: #1b2a30;
  --ac-ink-2: #41565f;
  --ac-brand: #0b7285;
  --ac-brand-dark: #08313a;
  --ac-brand-ink: #e8f3f5;
  --ac-soft: #eef7f8;
  --ac-soft-2: #dceef1;
  --ac-radius-btn: 999px;
}

/* ---------- 1. type : five steps, nothing under 13px ---------- */
html { -webkit-text-size-adjust: 100%; }

body,
.entry-content,
.entry-content p,
.entry-content li,
.ac-member-copy p,
.ac-svc-card p,
.ac-page-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ac-ink);
}

h1, .entry-title, .ac-hero-tagline, .ac-page-title, .ac-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ac-ink);
}
h2, .ac-svc-card h2, .ac-page-cta h2, .ac-section h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h3, .ac-member-copy h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ac-hero-sub, .ac-lede, p.ac-lede {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ac-ink-2);
  max-width: 62ch;
}

/* the small step — every measured sub-13px selector lands here */
small, time, figcaption, .posted-on, .posted-by, .author-name, .published, .updated,
.entry-meta, .entry-meta *, header.entry-header,
.cat-links, .tags-links, .ast-blog-single-element .entry-meta,
.ac-topbar, .ac-topbar *,
.ac-rvw-attr, .ac-rvw-g, .ac-rvw-card em, .ac-rvw-card a,
.ac-footer, .ac-footer *, .site-below-footer-wrap, .site-below-footer-wrap *,
.ast-small-footer, .ast-small-footer *,
.ast-breadcrumbs, .ast-breadcrumbs * {
  font-size: 13px !important;
  line-height: 1.45;
}

/* no tiny tracked uppercase labels; no eyebrow/kicker above a heading */
.ac-eyebrow, .ac-hero-eyebrow, .ac-kicker, .ac-page-eyebrow { display: none !important; }
.ac-topbar-item, .ac-topbar-btn, .ac-* { letter-spacing: 0; }

/* running text keeps a readable measure */
.entry-content p, .ac-member-copy p, .ac-page-cta p { max-width: 68ch; }

/* ---------- 2. surfaces : no gradients, no shadows, no hairlines ---------- */
.ac-hero, section.ac-hero {
  background-image: none !important;
  background-color: var(--ac-brand-dark) !important;
}
.ac-cta, div.ac-cta, aside.ac-page-cta, .ac-page-cta, .ac-book-band {
  background-image: none !important;
  background-color: var(--ac-brand) !important;
}
.ac-rvw-summary { background-image: none !important; background-color: var(--ac-soft) !important; border: 0 !important; }
.ac-hero-media img, .ac-hero img { box-shadow: none !important; }

* { box-shadow: none !important; }

/* hairlines out: separate with space or a tone step instead */
.ast-primary-header-bar, .ast-primary-header, .main-header-bar, .site-header,
.ast-above-header-bar, .ast-below-header-bar,
.ac-footer, .ac-member, article.ac-member, .ac-services, .ac-fees, .ac-fees li,
.entry-content hr, .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-inner {
  border: 0 !important;
}

/* outlined boxes become filled surfaces or lose the box entirely */
.ac-svc-card { border: 0 !important; background: transparent !important; padding-left: 0; padding-right: 0; }
.ac-rvw-card { border: 0 !important; background: var(--ac-soft) !important; border-radius: 0 !important; }
.ac-member { border: 0 !important; }
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-inner {
  background: transparent !important;
}

/* one button decision, applied everywhere: flat, fully round */
.ac-btn, .ac-hero-btns a, input[type="submit"], .ast-button, .wp-block-button__link,
.ac-topbar-btn, .ac-footer-btn, .ac-page-cta .ac-btn {
  border-radius: var(--ac-radius-btn) !important;
  box-shadow: none !important;
  background-image: none !important;
  font-size: 16px !important;
  padding: 14px 26px;
  font-weight: 700;
  text-decoration: none;
}
.ac-btn-ghost, .ac-hero-btns .ac-btn-ghost {
  background: transparent !important;
  border: 0 !important;
  padding-left: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 3. top bar : readable, and out of the way on a phone ---------- */
.ac-topbar { background: var(--ac-brand-dark); color: var(--ac-brand-ink); }
.ac-topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; gap: 18px; }
@media (max-width: 600px) { .ac-topbar { display: none !important; } }

/* ---------- 4. the blog archive becomes a list, not a grid ---------- */
.ast-archive-post, .ast-grid-common-col, .ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-inner { width: 100% !important; max-width: 100% !important; }

.ast-article-post .entry-header { display: flex; flex-direction: column; }
.ast-article-post .entry-title { order: 1; font-size: clamp(1.5rem, 2.2vw, 2rem) !important; line-height: 1.15; }
.ast-article-post .entry-meta { order: 2; margin-top: 10px; }
.ast-article-post .cat-links { display: none !important; }
.ast-article-post .post-thumb img { display: block; }
.ast-article-post .entry-content p { font-size: 17px; }

@media (min-width: 783px) {
  .ast-article-post .ast-post-format- {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 36px;
    align-items: center;
  }
  .ast-article-post .ast-blog-featured-section { margin: 0 !important; }
  .ast-article-post .post-thumb img { width: 360px; height: 240px; object-fit: cover; }
  .ast-separate-container .ast-article-post { padding: 30px 0 !important; }
}

/* ---------- 5. pages that had no pictures get real ones ---------- */
.ac-band { margin: 40px 0 8px; }
.ac-band-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ac-band-row img, .ac-band img { width: 100%; height: auto; display: block; object-fit: cover; }
.ac-band-row figure { margin: 0; }
@media (min-width: 900px) { .ac-band-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ac-band-row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 6. service cards : picture, name, one line ---------- */
.ac-svc-card { display: block; text-decoration: none; }
.ac-svc-photo { display: block; margin: 0 0 16px; }
.ac-svc-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.ac-svc-card h2 { margin: 0 0 8px; }

/* ---------- 9. round two : legibility on the dark fields, and the hero scale ---------- */
.ac-hero, .ac-hero h1, .ac-hero h2, .ac-hero p, .ac-hero li, .ac-hero span, .ac-hero a,
.ac-cta, .ac-cta h2, .ac-cta p, .ac-cta li,
.ac-page-cta, .ac-page-cta h2, .ac-page-cta p, .ac-page-cta-meta,
.ac-book-band, .ac-book-band * { color: #f2fbfc !important; }
.ac-hero .ac-btn-primary, .ac-cta .ac-btn, .ac-page-cta .ac-btn {
  background: #ffffff !important; color: #08313a !important;
}
.ac-hero .ac-btn-ghost, .ac-cta .ac-btn-ghost, .ac-page-cta .ac-btn-ghost {
  color: #f2fbfc !important; background: transparent !important;
}

/* the first screen leads: one display line at desktop width */
.ac-hero .ac-hero-tagline, .ac-hero h1, .ac-hero .ac-hero-tagline *,
h1.entry-title, .ac-page-title, .entry-content > h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.9rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}
.ac-hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important; max-width: 48ch; }

/* stars are shapes now: a light base row with a clipped filled row over it */
.ac-rvw-stars { position: relative; display: inline-flex; }
.ac-rvw-stars .ac-star-off, .ac-rvw-stars .ac-star-on { display: inline-flex; gap: 3px; line-height: 0; }
.ac-rvw-stars .ac-star-on { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; }
.ac-rvw-stars .ac-star-off { color: #7d9199; }
.ac-rvw-stars .ac-star-on { color: #c98a00; }


/* ---------- 7. reviews : stars as shapes, readable attribution ---------- */
.ac-rvw-stars { display: inline-flex; gap: 3px; line-height: 1; }
.ac-rvw-stars svg { width: 16px; height: 16px; display: block; }
.ac-rvw-stars .ac-star-off { color: #93a6ad; }
.ac-rvw-stars .ac-star-on { color: #e2a300; }
.ac-rvw-card { padding: 22px 22px 18px; }

/* ---------- 8. motion layer ---------- */
html.ac-js .ac-rise { opacity: 0; transform: translateY(22px); }
html.ac-js .ac-rise.is-in {
  animation: acRise 760ms cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--ac-delay, 0ms);
}
@keyframes acRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* a slow drift on the hero photograph: one moving picture */
html.ac-js .ac-hero-media img.is-in { animation: acDrift 1800ms ease-out both, acRise 900ms ease-out both; }
@keyframes acDrift { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html.ac-js .ac-rise, html.ac-js .ac-rise.is-in { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- 10. round three : the last measured findings ---------- */
/* unbox what is left on the home page */
.ac-card, .ac-doctor, .ac-office-info { border: 0 !important; background: transparent !important; }
/* a quotation is a tone field now, not a rule */
blockquote, .ac-quote {
  border: 0 !important;
  background: var(--ac-soft) !important;
  padding: 22px 26px !important;
  margin-left: 0 !important;
}
/* the footer's own rules */
.site-below-footer-wrap, .site-below-footer-wrap *,
.ast-builder-grid-row-container, .ast-small-footer, .ast-small-footer * { border: 0 !important; }

/* service cards: wider columns so a treatment name holds to two lines */
.ac-svc-cards { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important; }
.ac-svc-card h2 { font-size: 1.2rem !important; line-height: 1.28 !important; }

/* running text keeps a 16px floor on tablet and phone */
@media (max-width: 921px) {
  body, .entry-content, .entry-content p, .entry-content li, .entry-content ul li,
  .ac-member-copy p, .ac-svc-card p, .ac-page-cta p, .ac-rvw-card p, .ac-lede,
  .ast-article-post .entry-content p { font-size: 16px !important; }
}
/* the team photograph fills the card, so the two picture areas in the row are the same height:
   at the full card width the landscape shot is naturally as tall as the portrait beside it */
.ac-doctor-team .ac-doctor-photo img { width: 100%; max-width: 100% !important; height: 325px; object-fit: cover; object-position: 50% 38%; margin-bottom: 14px; }
/* stacked cards on small screens: no height to match, so let it keep its own proportions */
@media (max-width: 921px) { .ac-doctor-team .ac-doctor-photo img { height: auto; aspect-ratio: 16 / 10; } }

/* the staff biographies too, at every width — this is the text patients actually read */
.ac-member-copy, .ac-member-copy p, .ac-member-copy li, article.ac-member p { font-size: 17px !important; }
/* keep a biography to about 66 characters a line: the full column measured 72 */
.ac-member-copy { max-width: 32em !important; }
/* the contact page already ends with its own booking block, so the site-wide card only repeats it */
body.page-id-968 .ac-page-cta { display: none !important; }
@media (max-width: 921px) {
  .ac-member-copy, .ac-member-copy p, .ac-member-copy li, article.ac-member p { font-size: 16px !important; }
}
.ac-rvw-card p, .ac-rvw-card blockquote { font-size: 17px !important; }
.ac-rvw-card em, .ac-rvw-card .ac-rvw-attr { font-size: 13px !important; }
.ac-rvw-num { font-size: 40px !important; line-height: 1 !important; }
p.ac-credentials, .ac-credentials { font-size: 13px !important; }

/* one type scale: 13 / 17 / 21 / 26 / 40 */
.entry-content h3, .ac-member-copy h3, .ac-svc-card h2 { font-size: 21px !important; }
.entry-content h2, .ac-page-cta h2, .ac-band h2, .ast-article-post .entry-title { font-size: 26px !important; }
h1.entry-title, .ac-page-title, .ac-hero .ac-hero-tagline { font-size: clamp(2.2rem, 5.1vw, 5rem) !important; line-height: 1.04 !important; }
.ac-hero .ac-hero-tagline { font-size: clamp(2.4rem, 5.6vw, 5rem) !important; }

/* the blog listing: two columns, compact rows, screens that are full */
@media (min-width: 1100px) {
  article.ast-article-post.ast-grid-common-col { width: 50% !important; max-width: 50% !important; }
  .ast-archive-post .ast-post-format-, .ast-article-post .ast-post-format- { display: block !important; }
  .ast-archive-post .post-thumb img, .ast-article-post .post-thumb img {
    width: 100% !important; height: 270px !important; object-fit: cover;
  }
  .ast-separate-container .ast-article-post { padding: 0 20px 30px !important; }
}
.ast-article-post .entry-content p, .ast-article-post .entry-summary p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 11. round four : layout fixes found by looking at the screenshots ---------- */
/* The home page's full-bleed sections compute their bleed against the viewport, so the
   content column must not be narrower than its own inner grids (it was 880px, which pushed
   the hero 167px off the left edge and left a white strip on the right). */
.page-id-960 .entry-content { max-width: none !important; }
.page-id-960 .entry-content > .ac-hero,
.page-id-960 .entry-content > .ac-fees {
  width: auto !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* header buttons keep the header's own scale, so the menu holds one line */
header .ac-btn, .ast-builder-layout-element .ac-btn, .main-header-bar .ac-btn,
.ast-mobile-header-wrap .ac-btn, .ac-topbar-btn,
header .ast-button, .ast-custom-button, header .menu-item a.ast-button {
  padding: 10px 18px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}
/* the eight menu items must sit on one line: tighter item padding and a 15px face */
#ast-desktop-header .main-header-menu > li > a,
#ast-desktop-header .main-header-menu > li > .menu-link,
.ast-desktop .main-header-menu > li > a {
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 15px !important;
}
#ast-desktop-header .main-header-menu > li, .ast-desktop .main-header-menu > li { margin: 0 !important; }

/* the blog archive is one grid, so the two columns line up row for row */
@media (min-width: 1100px) {
  body.blog .ast-row, body.archive .ast-row, body.category .ast-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
  }
  body.blog article.ast-article-post.ast-grid-common-col,
  body.archive article.ast-article-post.ast-grid-common-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
  body.blog .ast-separate-container .ast-article-post,
  body.archive .ast-separate-container .ast-article-post { padding: 0 !important; }
}