/*
 Theme Name:  Astra Child – The Dursley Garage
 Description: Custom Astra child theme for The Dursley Garage.
 Author:      Kyle McMillan
 Template:    astra
 Version:     1.2
*/

/* =========================================================
   1. GOOGLE FONTS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');


/* =========================================================
   2. COLOR PALETTE
========================================================= */
:root {
  --dg-gold: #bfa16a;
  --dg-brown: #5a3a1a;
  --dg-cream: #f5f3ef;
  --dg-text: #333;
  --dg-bg-dark: #27241d;
}


/* =========================================================
   3. TYPOGRAPHY (GLOBAL)
========================================================= */

/* Body / Default text → INTER */
body,
p,
a,
li,
button,
input,
select,
textarea,
.ast-button,
.wp-block-button__link {
  font-family: 'Inter', sans-serif !important;
  color: var(--dg-text);
  line-height: 1.6;
}

/* Headings → BASKERVILLE */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 50px;
  font-weight: 700;
  color: var(--dg-brown);
  margin-bottom: 0.5em;
  letter-spacing: -0.3px;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--dg-brown) !important;
}

h1 { font-size: 3rem; }
h2 { font-size: 2rem; }


/* =========================================================
   4. HEADER / LOGO / NAVIGATION
========================================================= */

/* Header container */
header.site-header,
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
  transition: box-shadow .2s ease;
}

/* Menu links */
.main-header-menu a,
.ast-header-navigation a,
.ast-builder-menu .menu-item > a,
.ast-mobile-header-content a {
  color: var(--dg-brown) !important;
  font-family: 'Inter', sans-serif !important;
}

.main-header-menu a:hover,
.ast-header-navigation a:hover,
.ast-builder-menu .menu-item:hover > a,
.ast-builder-menu .current-menu-item > a {
  color: var(--dg-brown) !important;
  opacity: .8;
}

/* Hamburger icon */
.ast-button-wrap svg,
.ast-button-wrap path {
  fill: var(--dg-brown) !important;
}

/* Sticky header menu style */
.ast-sticky-active .main-header-menu a {
  color: var(--dg-brown) !important;
  background-color: var(--dg-gold);
}

/* Logo defaults */
.dg-astra-child .custom-logo,
.dg-astra-child .site-logo-img img {
  max-width: 240px;
  height: auto;
}


/* =========================================================
   5. BUTTONS
========================================================= */
button,
.button,
.ast-button,
input[type="submit"],
a.button,
.wp-block-button__link {
  background: var(--dg-gold);
  color: #fff !important;
  border: none;
  padding: 0.7em 1.4em;
  border-radius: 4px;
  transition: .3s ease;
  font-weight: 600;
}

button:hover,
.ast-button:hover,
.wp-block-button__link:hover {
  background: var(--dg-brown);
}


/* =========================================================
   6. GENERAL LAYOUT
========================================================= */
#content.site-content {
  background-color: #FAF6F0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

section {
  padding: 60px 0;
}


/* =========================================================
   7. FULL WIDTH BLOCKS
========================================================= */
.alignfull,
.entry-content .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   8. HERO SECTION
========================================================= */
.dg-hero.wp-block-cover {
  position: relative;
  min-height: 70vh;
  padding: 96px 32px;
  text-align: left;
  background-size: cover;
  color: #f1e3c4;
}

.dg-hero h1 {
  color: #f1e3c4 !important;
  font-size: 4rem;
}

.dg-hero h2 {
  color: #f1e3c4 !important;
  font-size: 2rem;
}

.dg-hero p {
  color: #f1e3c4 !important;
  font-size: clamp(16px, 1.4vw + .4rem, 22px);
  line-height: 1.3;
}

.dg-hero .wp-block-button__link {
  background: var(--dg-brown);
}


/* =========================================================
   9. SERVICE ICON ROW
========================================================= */
.dg-icons .wp-block-column:nth-child(2),
.dg-icons .wp-block-column:nth-child(3) {
  transform: translateY(-50px);
}


/* =========================================================
   10. IMAGE CAPTIONS
========================================================= */
.wp-block-image :where(figcaption) {
  margin-bottom: 1em;
  margin-top: .5em;
  color: var(--dg-text);
}


/* =========================================================
   11. LOCATION BLOCK
========================================================= */
.dg-location h1,
.dg-location h2 {
  color: var(--dg-brown) !important;
}

.dg-location p {
  font-size: 1.2rem;
  color: var(--dg-brown) !important;
}


/* =========================================================
   12. VAN COVER BLOCK
========================================================= */
.dg-vancover {
  max-width: 900px;
  padding: 40px;
  border-radius: 6px;
  color: #f8f4ee;
}

.dg-vancover h2 {
  font-size: 48px;
  color: var(--dg-gold) !important;
}

.dg-vancover p,
.dg-vancover li {
  font-size: 15px;
  color: var(--dg-gold) !important;
}


/* =========================================================
   13. REVIEWS
========================================================= */
.entry-content .dg-reviews,
.entry-content .dg-reviews * {
  color: var(--dg-gold) !important;
  font-size: 48px;
}


/* =========================================================
   14. DPF ADDITIONS
========================================================= */

.dg-dpfnotes a {
  font-size: 2.5rem;
  padding: 12px 25px;
  color: var(--dg-brown);
  font-family: 'Libre Baskerville', serif !important;
}

.dg-dpfnotes h2 {
  font-size: 2.4rem !important;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dg-brown) !important;
}

.dg-dpfnotes p {
  font-size: 1.2rem !important;
  line-height: 1.6;
  color: var(--dg-brown);
}


/* =========================================================
   15. MOT TEST BANNER
========================================================= */
.wp-block-cover.dg-bannercover .wp-block-cover__inner-container {
  position: static !important;
}

.wp-block-cover.dg-bannercover,
.wp-block-cover.dg-bannercover.alignfull,
.wp-block-cover.dg-bannercover .is-layout-constrained {
  padding-left: 0 !important;
}

h2.dg-banner {
  background: var(--dg-brown);
  color: var(--dg-cream) !important;
  padding: 20px 50px;
  font-size: 3.2rem;
  font-weight: 700;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  min-width: 650px;
}

.dg-booknow .wp-block-button__link {
  background-color: var(--dg-gold) !important;
  color: var(--dg-brown) !important;
  font-size: 25px !important;
  font-family: 'Libre Baskerville', serif !important;
  padding: 20px 40px !important;
  font-weight: 600;
  display: inline-block;
}

.dg-booknow .wp-block-button__link:hover {
  background-color: var(--dg-brown) !important;
  color: var(--dg-gold) !important;
}

.dg-mottest a {
  font-size: 2.5rem;
  padding: 12px 25px;
  color: var(--dg-cream);
  font-family: 'Libre Baskerville', serif !important;
}

.dg-mottest h2 {
  font-size: 2.4rem !important;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dg-cream) !important;
}

.dg-mottest p,
.dg-mottest ul,
.dg-mottest li {
  font-size: 1.2rem !important;
  line-height: 1.6;
  color: var(--dg-cream);
}


/* =========================================================
   16. BOOKING PAGE
========================================================= */
.entry-content .dg-bookings,
.entry-content .dg-bookings * {
  color: var(--dg-cream) !important;
  font-size: 48px;
}

.dg-bookings,
.appointment-form-shortcode label,
body .wp-block-cover:not(.has-text-color.has-link-color) p,
a {
  color: var(--dg-cream);
}
/* Selected (clicked) */
.mpa-time-period.mpa-time-period-selected {
    background-color: #5a3a1a !important; /* darker gold */
    color: #ffffff !important;
}


/* =========================================================
   17. FAQ STYLES
========================================================= */

.dg-faq {
  background-color: var(--dg-brown);
  padding: 40px;
  color: var(--dg-cream);
}

.dg-faq h2 {
  color: var(--dg-cream);
  font-size: 2rem;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--dg-cream);
  padding-bottom: 10px;
}

.dg-faq details {
  border-bottom: 1px solid var(--dg-cream);
  padding: 12px 0;
}

.dg-faq summary {
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--dg-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dg-faq summary::-webkit-details-marker {
  display: none;
}

.dg-faq summary::after {
  content: "∨";
  font-size: 1.2rem;
  color: var(--dg-cream);
  transition: transform 0.2s ease;
}

.dg-faq details[open] summary::after {
  transform: rotate(180deg);
}

.dg-faq details p {
  margin: 10px 0 0;
  font-size: 1rem;
  color: var(--dg-cream);
}


/* =========================================================
   18. FOOTER
========================================================= */
.dg-footer,
.dg-footer p,
.dg-footer a,
.dg-footer span,
.dg-footer div {
  color: var(--dg-cream) !important;
  background: var(--dg-brown);
  padding-top: 10px;
}

.dg-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}



/* =========================================================
   19. MEDIA QUERIES (ALL RESPONSIVE RULES)
========================================================= */

/* ========== 921px (Astra Mobile Menu) ========== */
@media (max-width: 921px) {

  /* Mobile menu text */
  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item .menu-link {
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    line-height: 1.4 !important;
  }

  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item {
    border-bottom: 1px solid rgba(0,0,0,0.15);
  }
}


/* ========== 768px (Tablet logo + icon row fixes) ========== */
@media (max-width: 768px) {

  /* Logo shrink */
  .dg-astra-child .custom-logo,
  .dg-astra-child .site-logo-img img,
  .ast-mobile-header-logo img {
    max-width: 150px !important;
    height: auto !important;
    width: auto !important;
  }

  /* Icons row alignment */
  .dg-icons .wp-block-column:nth-child(2),
  .dg-icons .wp-block-column:nth-child(3) {
    transform: translateY(0);
  }

  .dg-icons .wp-block-column:nth-child(1) img,
  .dg-icons .wp-block-column:nth-child(2) img,
  .dg-icons .wp-block-column:nth-child(3) img,
  .dg-icons .wp-block-column:nth-child(4) img {
    border: 2px solid var(--dg-text);
  }
}


/* ========== 600px (Mobile hero, banner, layout) ========== */
@media (max-width: 600px) {

  /* Logo size */
  .site-logo img,
  img.custom-logo {
    max-height: 35px !important;
  }

  /* Hero section scaling */
  .dg-hero.wp-block-cover {
    min-height: 80vh !important;
    padding: 56px 18px !important;
  }

  .dg-hero h1 { font-size: clamp(32px, 9vw, 44px) !important; }
  .dg-hero h2 { font-size: clamp(20px, 5vw, 26px) !important; }
  .dg-hero p  { font-size: clamp(14px, 4vw, 18px) !important; }

  /* Banner text */
  h2.dg-banner {
    font-size: 2.5rem;
    padding: 12px 25px;
    min-width: 225px;
    line-height: 1.2;
  }
}
/* Mobile only – change WhatsApp text to brown */
@media (max-width: 768px) {

  h2.wp-block-heading.has-text-align-center a,
  h2.wp-block-heading.has-text-align-center strong,
  h2.wp-block-heading.has-text-align-center {
    color: var(--dg-brown) !important;
  }

}