/*
Theme Name:   Dr Arti Sharma
Theme URI:    https://drarti.in
Description:  Child theme of Twenty Twenty-Five for Dr Arti Sharma, Obstetrician & Gynaecologist, Dubai. Self-hosted fonts, no external requests, DHA-conscious copy conventions.
Author:       Built for Dr Arti Sharma
Template:     twentytwentyfive
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  drarti
*/

/* Declare the scheme so Chrome's Auto Dark Mode does not force-invert the palette. */
:root { color-scheme: light; }

/* ---------- Type refinements ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, .da-display { letter-spacing: -0.01em; }
h1 { font-weight: 500; }

/* Small caps eyebrow label */
.da-eyebrow {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-3);
}

/* ---------- Rules & dividers ---------- */
.da-rule { border: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }

/* ---------- Cards ---------- */
.da-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
  border-radius: 4px;
  transition: border-color .18s ease, transform .18s ease;
}
.da-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 55%, transparent); }

/* Service cards get a quiet top keyline in the brand plum */
.da-service { border-top: 2px solid var(--wp--preset--color--accent-1); }
/* Card titles sit in a narrow measure, so hold them below the h3 display size */
.da-card h3 { font-size: clamp(1.3rem, 1.5vw, 1.55rem); }
/* Cards in a row should share a baseline, whatever their content length. */
.wp-block-columns .wp-block-column > .da-card { height: 100%; display: flex; flex-direction: column; }
.wp-block-columns .wp-block-column > .da-card > :last-child { margin-top: auto; }
.da-card ul { padding-left: 1.1em; }
.da-card li { margin-bottom: .3em; }

/* ---------- Buttons ---------- */
.wp-block-button__link { letter-spacing: .01em; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--accent-1); color: #fff; }

/* ---------- Portrait framing ---------- */
.da-portrait img { border-radius: 3px; }

/* ---------- Placeholder marker: anything still awaiting Dr Arti's NMC details ---------- */
.da-tbc {
  background: #FFF4D6;
  border-left: 3px solid #C9922A;
  padding: .35em .6em;
  font-size: .9em;
}

/* ---------- Article body ---------- */
.da-article p { line-height: 1.75; }
.da-article h2 { margin-top: 2.2em; }
.da-article h3 { margin-top: 1.6em; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-3);
  outline-offset: 2px;
}

/* ---------- Print ---------- */
@media print { .wp-block-navigation, .wp-block-button { display: none !important; } }


/* =====================================================================
   Cinematic hero — a large display serif layered over the portrait,
   against a deep plum field. Everything below the hero stays light.
   ===================================================================== */

.da-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 78% 40%, #5A3459 0%, #3E2140 55%, #2E182F 100%);
}

/* A faint vignette so the panel reads as lit rather than flat. */
.da-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(20,10,21,.45) 100%);
}

.da-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 0;
  max-width: 1180px;
  margin-inline: auto;
}

.da-hero__type { grid-area: 1 / 1; z-index: 3; }
.da-hero__media { grid-area: 1 / 2; z-index: 2; }

/* The name is the loudest thing on the page, and it runs over the portrait. */
.da-hero__type h1 {
  font-size: clamp(3.2rem, 8.2vw, 7rem);
  line-height: .92;
  font-weight: 300;
  letter-spacing: -0.025em;
  color: #FBF3EE;
  margin: .12em 0 .34em;
  /* let it break the column and sit across the image */
  margin-right: -18%;
  position: relative;
}

.da-hero__type .da-eyebrow { color: #D8A85F; }

.da-hero__type p:not(.da-eyebrow) { color: #EBDCE4; max-width: 30rem; }
.da-hero__type strong { color: #FBF3EE; }

/* Portrait in an arch — soft at the top, grounded at the base. */
.da-hero__media figure { margin: 0; }
.da-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 999px 999px 6px 6px / 46% 46% 6px 6px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}

/* Buttons on the dark field */
.da-hero .wp-block-button__link {
  background: #E7D3C6;
  color: #33192F;
}
.da-hero .wp-block-button__link:hover { background: #FBF3EE; color: #33192F; }
.da-hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #EBDCE4;
  border: 1px solid rgba(235,220,228,.45);
}
.da-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(251,243,238,.1);
  border-color: #EBDCE4;
  color: #FBF3EE;
}

@media (max-width: 860px) {
  .da-hero__inner { grid-template-columns: 1fr; }
  .da-hero__type { grid-area: 2 / 1; }
  .da-hero__media { grid-area: 1 / 1; max-width: 20rem; margin: 0 auto 1.6rem; }
  .da-hero__type h1 { margin-right: 0; font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .da-hero__type p:not(.da-eyebrow) { max-width: none; }
}

/* Section headings pick up a little of the same display confidence. */
.da-section-title { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.02em; }


/* =====================================================================
   Header — a deep plum bar that reads as one mass with the hero below it.
   ===================================================================== */
.da-header { background: #33192F; }

.da-header .wp-block-site-title,
.da-header .wp-block-site-title a { color: #FBF3EE; text-decoration: none; }
.da-header .wp-block-site-title a:hover { color: #E7D3C6; }
.da-header .da-eyebrow { color: #C79A5B; }

/* The navigation block sets its own link colour from theme.json, which outranks
   a plain descendant selector — so match its own classes. */
.da-header .wp-block-navigation,
.da-header .wp-block-navigation .wp-block-navigation-item__content,
.da-header .wp-block-navigation a:where(:not(.wp-element-button)) {
  color: #E4D6DF;
  text-decoration: none;
}
.da-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.da-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
  color: #FBF3EE;
  text-decoration: underline;
  text-underline-offset: .35em;
}

.da-header .wp-block-button__link { background: #E7D3C6; color: #33192F; }
.da-header .wp-block-button__link:hover { background: #FBF3EE; color: #33192F; }

/* Mobile overlay menu sits on the same dark ground. */
.da-header .wp-block-navigation__responsive-container.is-menu-open {
  background: #33192F;
  color: #FBF3EE;
}
.da-header .wp-block-navigation__responsive-container-open svg { fill: #E4D6DF; }

/* The hero continues the header's colour, so the two read as one field.
   <main> otherwise inherits a block gap that shows as a pale strip between them. */
main.wp-block-group { margin-top: 0; }
.da-hero { margin-top: 0; }

/* Let the name genuinely cross the portrait. */
.da-hero__type h1 { margin-right: -26%; }
@media (max-width: 860px) { .da-hero__type h1 { margin-right: 0; } }


/* Category label in the article header reads as a label, not a link. */
.wp-block-post-terms a { text-decoration: none; }
.wp-block-post-terms a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* Article listing cards */
.wp-block-post-template .wp-block-post-featured-image img { border-radius: 3px; }
.wp-block-post-template .wp-block-post-title a { text-decoration: none; }
.wp-block-post-template .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: .25em; }
.wp-block-post-template > li { margin-bottom: var(--wp--preset--spacing--40); }


/* On narrow screens the header strapline repeats the hero eyebrow verbatim
   and wraps to two lines. Keep it for wide screens only. */
@media (max-width: 780px) {
  .da-header .da-eyebrow { display: none; }
}


/* =====================================================================
   Mobile
   Structure already stacks correctly; these are the touch-ergonomics and
   density fixes — target sizes, tap spacing, and keeping the hero short
   enough that the lead paragraph and CTA are reachable without a long scroll.
   ===================================================================== */

@media (max-width: 781px) {

  /* --- Hero: shorter, so the CTA is nearer the fold --- */
  .da-hero { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
  .da-hero__media { max-width: 11rem; margin: 0 auto 1rem; }
  .da-hero__type h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); margin-bottom: .3em; }
  .da-hero__type p:not(.da-eyebrow) { font-size: 1rem; }

  /* --- Touch targets: 44px minimum on anything you tap --- */
  .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .wp-block-buttons { gap: .6rem; }

  /* The hamburger ships at 24px; give it a proper 44px target.
     Deliberately no `display` here — WordPress decides when these toggles are
     shown (overlay under 600px, inline links above it). Forcing display made
     the burger, the close icon and the inline links all appear together at
     tablet width. */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Overlay menu: readable targets, and a plum ground to match the header.
     WordPress paints this container itself, so the selector has to be at least
     as specific as its own — a bare descendant rule loses and you get cream
     text on white. */
  .wp-block-navigation__responsive-container.is-menu-open,
  .da-header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #33192F !important;
    color: #FBF3EE;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
  .da-header .wp-block-navigation__responsive-container.is-menu-open a {
    color: #FBF3EE !important;
    padding: .7em 0;
    font-size: 1.2rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .4rem; }
  .wp-block-navigation__responsive-container-close svg { fill: #FBF3EE; }

  /* Footer link stacks are <br>-separated; open them up so taps land. */
  .wp-block-group.has-accent-1-background-color p a { display: inline-block; padding: .62em 0; min-height: 44px; }
  .wp-block-group.has-accent-1-background-color p { line-height: 2.4; }

  /* Card CTA reads as a control, not a stray inline link. */
  .da-card > p:last-child a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
  }

  /* --- Credentials strip: three across, not 1300px of stacked scroll --- */
  .da-cert-strip { flex-wrap: nowrap !important; gap: .6rem; }
  .da-cert-strip > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; min-width: 0; }
  .da-cert-strip img { width: 100%; height: auto; }

  /* --- Density --- */
  .da-eyebrow { font-size: .78rem; }
  .da-card { padding: 1.35rem !important; }
  .da-section-title { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
  .da-article p { font-size: 1.0625rem; }

  /* Article listing images shouldn't dominate the card. */
  .wp-block-post-template .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; }
}



/* Phones only: buttons go full width so they are easy to hit one-handed.
   Tablets keep intrinsic button widths. */
@media (max-width: 600px) {
  .wp-block-buttons > .wp-block-button { width: 100%; }
  .wp-block-button__link { width: 100%; }
}

/* Tablet: two article cards per row rather than three narrow ones. */
@media (min-width: 601px) and (max-width: 900px) {
  .wp-block-post-template.is-layout-flex { flex-wrap: wrap !important; }
  .wp-block-post-template.is-layout-flex > li { flex-basis: calc(50% - 0.75rem) !important; }
  /* Service cards read better two-up here too. */
  .wp-block-columns.is-layout-flex { flex-wrap: wrap !important; }
}


/* Breadcrumb — small, quiet, above the article body. */
.da-breadcrumb {
  font-family: var(--wp--preset--font-family--inter);
  font-size: .8rem;
  color: var(--wp--preset--color--accent-4);
  margin-bottom: 1.6rem;
  line-height: 1.6;
}
.da-breadcrumb a { color: var(--wp--preset--color--accent-4); text-decoration: none; }
.da-breadcrumb a:hover { color: var(--wp--preset--color--accent-1); text-decoration: underline; }
.da-breadcrumb span[aria-hidden] { opacity: .45; margin: 0 .15em; }
.da-breadcrumb [aria-current] { color: var(--wp--preset--color--contrast); }


/* Phone placeholder — deliberately conspicuous so it cannot ship unnoticed.
   Remove nothing here; it disappears on its own once a number is set in
   drarti_practice(). */
.da-phone-placeholder {
  display: inline-block;
  background: #FFE9A8;
  color: #6A4A00;
  border: 1px dashed #C9922A;
  border-radius: 3px;
  padding: .3em .6em;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.da-phone-placeholder::before { content: "\26A0\FE0E  "; }

/* In the plum footer it needs to stay legible without shouting. */
.wp-block-group.has-accent-1-background-color .da-phone-placeholder {
  background: rgba(255,233,168,.16);
  color: #FFE9A8;
  border-color: rgba(255,233,168,.5);
}


/* =====================================================================
   Quick answer — the direct response, above the narrative.
   Answer engines lift this kind of block, so it is deliberately plain,
   self-contained and high in the document.
   ===================================================================== */
.da-quick-answer {
  background: var(--wp--preset--color--accent-5);
  border-left: 3px solid var(--wp--preset--color--accent-3);
  border-radius: 3px;
  margin-bottom: var(--wp--preset--spacing--50);
}
.da-quick-answer .da-eyebrow { margin-bottom: .4em; }
.da-quick-answer h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 0 0 .5em;
  line-height: 1.2;
}
.da-quick-answer p:not(.da-eyebrow) {
  margin-bottom: 0;
  line-height: 1.6;
}
@media (max-width: 781px) {
  .da-quick-answer { padding: 1.35rem !important; }
  .da-quick-answer h2 { font-size: 1.4rem; }
  .da-quick-answer p:not(.da-eyebrow) { font-size: 1rem; }
}