/*
 Theme Name:   DXP GeneratePress Child
 Theme URI:    https://www.dynaexperts.com
 Description:  DynaExperts child theme for GeneratePress — DXP brand colours, typography and sticky header.
 Author:       DynaExperts Consulting LLP
 Author URI:   https://www.dynaexperts.com
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  dxp-child
*/

/* ============================================================
   DXP DESIGN TOKENS
   ============================================================ */
:root {
  --dxp-charcoal:      #413f3b;
  --dxp-charcoal-80:   #6b6965;
  --dxp-charcoal-60:   #96948f;
  --dxp-charcoal-20:   #e4e3e1;
  --dxp-charcoal-10:   #f1f0ee;
  --dxp-amber:         #edb64a;
  --dxp-amber-dark:    #c9952a;
  --dxp-cobalt:        #22219b;
  --dxp-cobalt-light:  #eeeeff;
  --dxp-white:         #ffffff;

  --dxp-font-body:     'Source Sans 3', sans-serif;
  --dxp-font-display:  'Audiowide', sans-serif;

  --dxp-header-height: 70px;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
body {
  font-family: var(--dxp-font-body);
  color: var(--dxp-charcoal);
  background-color: var(--dxp-white);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--dxp-cobalt);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--dxp-amber-dark);
}

/* ============================================================
   STICKY HEADER
   GeneratePress Free doesn't have built-in sticky nav —
   we implement it here with position: sticky + JS class hook.
   ============================================================ */

/* The outer wrapper GP wraps around everything */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Make the header sticky */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: var(--dxp-white);
  border-bottom: 1px solid var(--dxp-charcoal-20);
  transition: box-shadow 0.2s ease;
}

/* Shadow added via JS when user scrolls down */
.site-header.dxp-scrolled {
  box-shadow: 0 2px 12px rgba(65, 63, 59, 0.10);
}

/* ============================================================
   HEADER INNER LAYOUT
   ============================================================ */
.inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: var(--dxp-header-height);
  width: 100%;
}

/* Logo */
.site-logo img,
.custom-logo {
  height: 40px;
  width: auto;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-primary,
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation ul li a {
  display: block;
  padding: 8px 14px;
  font-family: var(--dxp-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--dxp-charcoal-80);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.main-navigation ul li a:hover {
  color: var(--dxp-charcoal);
  border-bottom-color: var(--dxp-charcoal-20);
}

/* Active / current page */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_item > a {
  color: var(--dxp-charcoal);
  border-bottom-color: var(--dxp-amber);
}

/* Divider before CTA button */
.main-navigation ul li.menu-cta {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--dxp-charcoal-20);
}

/* CTA "Book a Call" button in menu */
.main-navigation ul li.menu-cta > a,
.main-navigation ul li.menu-button > a {
  background-color: var(--dxp-amber);
  color: var(--dxp-charcoal) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.main-navigation ul li.menu-cta > a:hover,
.main-navigation ul li.menu-button > a:hover {
  background-color: var(--dxp-amber-dark);
  color: var(--dxp-charcoal) !important;
}

/* ── Dropdown menus ── */
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dxp-white);
  border: 1px solid var(--dxp-charcoal-20);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(65, 63, 59, 0.12);
  padding: 6px 0;
  /* grow to fit the longest item — never clip text */
  min-width: 240px;
  width: max-content;
  max-width: 360px;
  flex-direction: column;
  gap: 0;
  z-index: 100;
}

.main-navigation ul ul li {
  width: 100%;
}

.main-navigation ul ul li a {
  border-bottom: none;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--dxp-charcoal);
  /* allow text to sit on one line; container expands instead */
  white-space: nowrap;
  display: block;
  width: 100%;
}

.main-navigation ul ul li a:hover {
  background-color: var(--dxp-charcoal-10);
  color: var(--dxp-charcoal);
}

/* ============================================================
   MOBILE MENU TOGGLE
   ============================================================ */
.menu-toggle {
  background: none;
  border: 1.5px solid var(--dxp-charcoal-20);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--dxp-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--dxp-charcoal);
  cursor: pointer;
  transition: border-color 0.15s;
}

.menu-toggle:hover {
  border-color: var(--dxp-amber);
  color: var(--dxp-charcoal);
}

/* ============================================================
   BODY / CONTENT AREA
   ============================================================ */
.site-content {
  flex: 1;
}

.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Remove GP's default max-width on full-width pages */
.page-template-page_canvas .site-content,
.page-template-page_canvas .content-area {
  max-width: 100%;
  padding: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dxp-font-body);
  color: var(--dxp-charcoal);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 44px; letter-spacing: -0.02em; }
h2 { font-size: 32px; letter-spacing: -0.01em; }
h3 { font-size: 22px; }
h4 { font-size: 17px; }

p {
  line-height: 1.7;
  color: var(--dxp-charcoal-80);
}

/* ============================================================
   BUTTONS (Gutenberg core/button block)
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--dxp-font-body) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Primary (amber) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--dxp-amber);
  color: var(--dxp-charcoal);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--dxp-amber-dark);
  color: var(--dxp-charcoal);
}

/* Outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--dxp-charcoal);
  color: var(--dxp-charcoal);
  background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--dxp-charcoal);
  color: var(--dxp-white);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--dxp-charcoal);
  color: rgba(255, 255, 255, 0.45);
  padding: 48px 40px 28px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: var(--dxp-amber);
}

.site-footer .inside-footer {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
}

/* ============================================================
   BLOCK EDITOR GLOBAL ALIGNMENT
   Keep full-width blocks (groups with align:full) edge-to-edge
   ============================================================ */
.wp-block-group.alignfull {
  max-width: 100% !important;
  width: 100% !important;
}

.entry-content .alignfull,
.entry-content > .wp-block-group.alignfull {
  margin-left: calc(-40px) !important;
  margin-right: calc(-40px) !important;
  max-width: calc(100% + 80px) !important;
  width: calc(100% + 80px) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --dxp-header-height: 60px;
  }

  .inside-header {
    padding: 0 20px;
  }

  h1 { font-size: 32px; }
  h2 { font-size: 24px; }

  .content-area {
    padding: 0 20px;
  }

  .entry-content .alignfull,
  .entry-content > .wp-block-group.alignfull {
    margin-left: -20px !important;
    margin-right: -20px !important;
    max-width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
}