/**
 * Buttons, forms, homepage sections, teacher sections and the single-resource
 * page scaffolding. Card grids stay in cards.css; the document viewer has
 * its own file (viewer.css), enqueued only where it is used.
 */

/* ---------- Buttons ---------- */

.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dg-space-2);
  min-height: 44px;                 /* comfortable touch target everywhere */
  padding: var(--dg-space-3) var(--dg-space-5);
  border-radius: var(--dg-radius-btn);
  font-family: var(--dg-font-body);
  font-weight: 700;
  font-size: var(--dg-text-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dg-transition), color var(--dg-transition),
              border-color var(--dg-transition), box-shadow var(--dg-transition);
}
.dg-btn svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.dg-btn:disabled, .dg-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.dg-btn--primary { background: var(--dg-maroon); color: var(--dg-surface); box-shadow: var(--dg-shadow-xs); }
.dg-btn--primary:hover { background: var(--dg-maroon-deep); color: var(--dg-surface); box-shadow: var(--dg-shadow-md); }

.dg-btn--ghost { background: var(--dg-surface); color: var(--dg-maroon); border-color: var(--dg-line-strong); }
.dg-btn--ghost:hover { background: var(--dg-maroon-tint-06); color: var(--dg-maroon-deep); border-color: var(--dg-maroon); }

.dg-btn--quiet { background: transparent; color: var(--dg-ink-muted); border-color: transparent; }
.dg-btn--quiet:hover { background: var(--dg-surface-sunken); color: var(--dg-ink); }

/* Tertiary. Reads as a link but keeps the button's height and icon
   spacing, so a row of mixed actions still aligns on one baseline. */
.dg-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--dg-maroon);
  padding-inline: var(--dg-space-2);
}
.dg-btn--text:hover { color: var(--dg-maroon-deep); text-decoration: underline; text-underline-offset: 3px; }

.dg-btn--sm { min-height: 36px; padding: var(--dg-space-2) var(--dg-space-4); font-size: var(--dg-text-xs); }
.dg-btn--lg { min-height: 50px; padding: var(--dg-space-3) var(--dg-space-6); font-size: var(--dg-text-base); }
.dg-btn--block { width: 100%; }

/* ---------- Form controls ---------- */

.dg-field { display: flex; flex-direction: column; gap: var(--dg-space-2); margin-bottom: var(--dg-space-5); }
.dg-field__label { font-size: var(--dg-text-sm); font-weight: 600; color: var(--dg-ink); }
.dg-field__hint { font-size: var(--dg-text-xs); color: var(--dg-ink-muted); }

.dg-input, .dg-textarea, .dg-select {
  width: 100%;
  padding: var(--dg-space-3) var(--dg-space-4);
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface);
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-base);
  color: var(--dg-ink);
  transition: border-color var(--dg-transition), box-shadow var(--dg-transition);
}
.dg-input::placeholder, .dg-textarea::placeholder { color: var(--dg-ink-faint); }
.dg-input:focus, .dg-textarea:focus, .dg-select:focus {
  outline: none;
  border-color: var(--dg-maroon);
  box-shadow: var(--dg-focus-ring);
}
.dg-textarea { min-height: 150px; resize: vertical; line-height: var(--dg-leading-normal); }
.dg-input:user-invalid, .dg-textarea:user-invalid { border-color: var(--dg-danger); }

/* Inline status messages — success/error states for forms. */
.dg-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--dg-space-3);
  padding: var(--dg-space-4);
  border-radius: var(--dg-radius-sm);
  border: 1px solid transparent;
  font-size: var(--dg-text-sm);
  margin-bottom: var(--dg-space-5);
}
.dg-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dg-notice--success { background: var(--dg-success-tint); border-color: rgba(62,122,78,0.3); color: var(--dg-success); }
.dg-notice--error { background: var(--dg-danger-tint); border-color: rgba(166,54,44,0.3); color: var(--dg-danger); }
.dg-notice--info { background: var(--dg-maroon-tint-06); border-color: var(--dg-maroon-tint-10); color: var(--dg-maroon-deep); }

/* ---------- Homepage hero ----------
 *
 * Compact on purpose. Its whole job is one line of orientation plus the
 * study search; the class picker below is the real front door and a
 * student should reach it without a long scroll.
 *
 * The layout is asymmetric rather than centred. A centred column at this
 * width forced every element to be narrow and left tall gutters of empty
 * cream either side of the search — that was the "large areas presenting
 * very little" problem. Two columns on desktop give the copy a natural
 * measure, let the search sit at a usable width, and let the shortcut rail
 * share the band instead of adding another stacked row.
 */

.dg-hero {
  padding-block: var(--dg-space-6) var(--dg-space-6);
  border-bottom: 1px solid var(--dg-line);
  background: radial-gradient(90% 130% at 15% 0%, var(--dg-surface) 0%, var(--dg-maroon-tint-06) 100%);
}
@media (min-width: 900px) { .dg-hero { padding-block: var(--dg-space-7); } }

.dg-hero__inner {
  display: grid;
  gap: var(--dg-space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .dg-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(var(--dg-space-6), 5vw, var(--dg-space-10, 4rem));
    align-items: center;
  }
}

.dg-hero__title {
  max-width: 19ch;
  margin-bottom: var(--dg-space-3);
  font-size: var(--dg-text-3xl);
  line-height: 1.08;
  /* Evens the line lengths instead of leaving a one-word last line —
     the rendered hero was breaking as "Everything you / need to study,
     in one / place". Ignored gracefully where unsupported. */
  text-wrap: balance;
}
.dg-hero__eyebrow {
  max-width: 48ch;
  margin: 0;
  color: var(--dg-ink-muted);
  font-size: var(--dg-text-md);
  line-height: var(--dg-leading-relaxed);
}

.dg-hero__tool { min-width: 0; }

.dg-hero__shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dg-space-2);
  margin-top: var(--dg-space-4);
}
.dg-hero__shortcuts-label {
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dg-ink-faint);
  margin-right: 2px;
}
.dg-hero__shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--dg-text-sm);
  font-weight: 600;
  color: var(--dg-ink);
  text-decoration: none;
  padding: 6px var(--dg-space-3);
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-pill);
  background: var(--dg-surface);
  transition: border-color var(--dg-transition), color var(--dg-transition), background var(--dg-transition);
}
.dg-hero__shortcuts a:hover { border-color: var(--dg-maroon); color: var(--dg-maroon); background: var(--dg-surface); }
.dg-hero__shortcuts svg {
  width: 15px; height: 15px;
  stroke-width: 1.7;
  color: var(--dg-ink-faint);
}
.dg-hero__shortcuts a:hover svg { color: var(--dg-maroon); }
/* Phones: the shortcut row scrolls sideways in its own rail instead of
   stacking into four lines and pushing the class grid off-screen. */
@media (max-width: 600px) {
  .dg-hero__shortcuts {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--dg-container-pad));
    padding-inline: var(--dg-container-pad);
  }
  .dg-hero__shortcuts::-webkit-scrollbar { display: none; }
  .dg-hero__shortcuts a { flex-shrink: 0; }
  .dg-hero__shortcuts-label { display: none; }
}

/* ---------- Homepage image banners ----------
 * Customizer-driven image slots between homepage sections. The image is
 * never cropped or force-fit into a fixed box — it renders at its own
 * intrinsic size, capped at 100% of the content column. */

.dg-image-banner { padding-block: var(--dg-space-6); display: flex; justify-content: center; }
.dg-image-banner__frame { display: block; max-width: 100%; line-height: 0; }
.dg-image-banner__frame img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  /* Width alone isn't enough: a banner image uploaded without cropping
     (square, portrait, or just very large) still scales its height
     proportionally to fill the full container width, which is how an
     oversized upload turns into a wall taking up most of the screen.
     Capping height and letting object-fit crop keeps any image sane
     without the site owner needing to pre-crop it. */
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--dg-radius);
  box-shadow: var(--dg-shadow-rest);
  transition: box-shadow var(--dg-transition);
}
a.dg-image-banner__frame:hover img { box-shadow: var(--dg-shadow-hover); }

/* ---------- Teacher sections ---------- */

/* Bold maroon band — the one section on the homepage that gets full brand
   colour instead of another neutral tint, so "Meet Sir Hamza" reads as a
   deliberate accent moment against the otherwise white page rather than
   blending into it. The booking card stays a white "spotlight" surface on
   top of the band for contrast. */
.dg-teacher,
.dg-teacher-availability {
  background: var(--dg-maroon-deep);
}
.dg-teacher__inner {
  display: grid;
  gap: var(--dg-space-6);
  align-items: start;
}
@media (min-width: 860px) {
  .dg-teacher__inner { grid-template-columns: 1.3fr 1fr; gap: var(--dg-space-8); }
}
.dg-teacher__bio { max-width: 60ch; color: rgba(255, 255, 255, 0.9); font-size: var(--dg-text-md); line-height: var(--dg-leading-relaxed); }
/* Light gold on the dark band (~10:1). The base --dg-gold is only ~4:1 here. */
.dg-teacher__eyebrow { margin: 0 0 var(--dg-space-2); font-size: var(--dg-text-sm); font-weight: 600; color: #D8C7A3; }
.dg-teacher #dg-teacher-heading { color: var(--dg-surface); }

/* Sir Hamza's photo, set from Appearance → Customize → Teacher Photo.
   Cropped to a circle like an ordinary profile picture ("dp"), with a
   translucent white ring so it reads as a deliberate frame against the
   dark maroon band rather than a stray square photo. */
.dg-teacher__photo {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 0 var(--dg-space-4);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--dg-shadow-lg);
}

/* Booking card — the one CTA on the teacher block, so it gets a surface
   of its own rather than a lone centred button. */
.dg-teacher-book {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-3);
  padding: var(--dg-space-5);
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius-lg);
  box-shadow: var(--dg-shadow-lg);
}
.dg-teacher-book h3 { margin-bottom: 0; }
.dg-teacher-book p { margin: 0; color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }
.dg-teacher-book .dg-btn { margin-top: var(--dg-space-2); }

/* teacher-appointment.php renders standalone on other templates, on the
   ordinary white page background — keeps its own (unchanged) dark-on-light
   text color regardless of the homepage band above. */
.dg-teacher-appointment__inner p { color: var(--dg-ink-muted); }

/* ---------- Routine image ---------- */

.dg-routine-image__frame {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: var(--dg-radius);
  overflow: hidden;
  box-shadow: var(--dg-shadow-rest);
}
.dg-routine-image__frame img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; }

/* ---------- Single resource layout ---------- */

/* Single column by default. The second column is opt-in via .has-sidebar,
   which single-resource.php only adds once it has confirmed the ad slot
   actually returned markup — otherwise a document page reserved 300px of
   permanently empty space on every desktop view. */
.dg-resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dg-space-8);
  align-items: start;
}
@media (min-width: 1081px) {
  .dg-resource-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}
.dg-resource-layout__sidebar { position: sticky; top: calc(var(--dg-header-height) + var(--dg-space-4)); }

@media (max-width: 1080px) {
  .dg-resource-layout { grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-6); }
  .dg-resource-layout__sidebar { display: none; } /* desktop-only sidebar ad */
}

.dg-resource-intro { min-width: 0; }
.dg-resource-intro p { color: var(--dg-ink-muted); }

/* Download / action bar under the viewer. */
.dg-resource-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dg-space-4);
  padding: var(--dg-space-5);
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius-lg);
  margin-block: var(--dg-space-6);
}
.dg-resource-download__text { min-width: 0; }
.dg-resource-download strong { display: block; font-size: var(--dg-text-base); color: var(--dg-maroon-deep); }
.dg-resource-download p { margin: 4px 0 0; font-size: var(--dg-text-sm); }
.dg-resource-download__actions { display: flex; flex-wrap: wrap; gap: var(--dg-space-3); }
@media (max-width: 600px) {
  .dg-resource-download { padding: var(--dg-space-4); }
  .dg-resource-download__actions { width: 100%; }
  .dg-resource-download__actions .dg-btn { flex: 1 1 100%; }
}

/* Paired-solution block. */
.dg-solution-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dg-space-4);
  padding: var(--dg-space-5);
  background: var(--dg-surface-alt);
  border: 1px solid var(--dg-line);
  border-left: 3px solid var(--dg-gold);
  border-radius: var(--dg-radius);
  margin-block: var(--dg-space-6);
}
.dg-solution-block strong { display: block; color: var(--dg-maroon-deep); }
.dg-solution-block p { margin: 4px 0 0; font-size: var(--dg-text-sm); color: var(--dg-ink-muted); }

/* Chapter prev / all / next. */
.dg-chapter-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--dg-space-2);
  margin-block: var(--dg-space-7);
}
.dg-chapter-nav .dg-btn {
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
}
.dg-chapter-nav a[href=""] { visibility: hidden; }
@media (max-width: 600px) {
  .dg-chapter-nav .dg-btn { padding-inline: var(--dg-space-3); font-size: var(--dg-text-xs); }
}

.dg-related-heading { margin-top: var(--dg-space-8); }

/* Subject-level shelf — separated from the chapter grid above it by space
   and a hairline, so "papers for the whole subject" reads as a different
   thing from "chapters", which is the distinction students miss most. */
.dg-subject-shelf { margin-top: var(--dg-space-8); }
.dg-card-grid + .dg-subject-shelf,
section + .dg-subject-shelf {
  padding-top: var(--dg-space-8);
  border-top: 1px solid var(--dg-line);
}

/* ---------- Search page ---------- */

.dg-search-summary { margin: 0 0 var(--dg-space-6); color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }
.dg-search-group + .dg-search-group { margin-top: var(--dg-space-8); }
.dg-search-group__head {
  display: flex;
  align-items: center;
  gap: var(--dg-space-3);
  margin-bottom: var(--dg-space-4);
}
.dg-search-group__head h2 { margin-bottom: 0; font-size: var(--dg-text-lg); }
.dg-search-page__form { max-width: 620px; margin-bottom: var(--dg-space-6); }

/* ---------- System states (404, unavailable) ----------
 *
 * A dead link is part of the product. This block is the one place the
 * theme is allowed to be a little quiet and a little large, because the
 * only useful thing on the page is the recovery path: search, then the
 * class list, then home. It reuses .dg-study-search rather than inventing
 * a second search treatment.
 */

.dg-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--dg-space-6);
}
.dg-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--dg-maroon-tint-06);
  color: var(--dg-maroon);
  margin-bottom: var(--dg-space-4);
}
.dg-state__icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.dg-state__code {
  margin: 0 0 var(--dg-space-2);
  font-family: var(--dg-font-display);
  font-size: var(--dg-text-sm);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--dg-gold-deep);
}
.dg-state__title {
  margin: 0 0 var(--dg-space-3);
  font-size: var(--dg-text-2xl);
  max-width: 20ch;
}
.dg-state__text {
  margin: 0 0 var(--dg-space-6);
  max-width: 48ch;
  color: var(--dg-ink-muted);
  line-height: var(--dg-leading-relaxed);
}
.dg-state__search { text-align: left; }
.dg-state__links { margin-top: var(--dg-space-6); }
.dg-state__links-label {
  margin: 0 0 var(--dg-space-3);
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dg-ink-faint);
}
.dg-state__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dg-space-2);
}
.dg-state__chips a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--dg-space-4);
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-pill);
  background: var(--dg-surface);
  color: var(--dg-ink);
  font-size: var(--dg-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dg-transition), color var(--dg-transition);
}
.dg-state__chips a:hover { border-color: var(--dg-maroon); color: var(--dg-maroon); }
.dg-state__home { margin-top: var(--dg-space-6); }


/* ---------- Blog post furniture ----------
 * Previously written as inline style attributes on single.php. Moved here
 * so the radius and rhythm come from the same tokens as everything else
 * and can't drift when those tokens change.
 */

.dg-post-figure {
  margin: 0 0 var(--dg-space-6);
  border-radius: var(--dg-radius);
  overflow: hidden;
  background: var(--dg-surface-sunken);
}
.dg-post-figure img { width: 100%; height: auto; display: block; }

.dg-related {
  margin-top: var(--dg-space-10);
  padding-top: var(--dg-space-6);
  border-top: 1px solid var(--dg-line);
}

/* An intro block that's followed by more page furniture (a form, a
   notice) rather than being the last thing on the page — the base
   .dg-post-content rule zeroes the last child's margin, which is right
   for a blog post but wrong here since content isn't the last element. */
.dg-post-content--intro { margin-bottom: var(--dg-space-6); }