/*
Theme Name:   EpicDog Child
Theme URI:    https://ynwl3wj1aq-staging.wpdns.site/
Description:  Child theme of Kadence for Epic Dog. Brand foundation: navy header (#242833), olive/khaki accent (#676432), cream sections (#F7F4EC). Colours sourced from the exported Shopify storefront.
Author:       EpicDog build
Template:     kadence
Version:      0.5.0
Text Domain:  epicdog-child
*/

/* ---------------------------------------------------------------------------
   Brand palette — overrides Kadence global palette slots.
   NOTE: the authoritative palette should also be set in Customizer →
   Kadence global colours (theme_mod kadence_global_palette) over SSH/WP-CLI;
   this CSS is the portable fallback so colours render even before that runs.
   --------------------------------------------------------------------------- */
:root {
  --global-palette1: #7a7740; /* accent — olive light (hover)        */
  --global-palette2: #676432; /* accent — olive/khaki (buttons/links)*/
  --global-palette3: #242833; /* navy — headings / header bar        */
  --global-palette4: #434753; /* charcoal — body text                */
  --global-palette5: #6b6f7a; /* muted text                          */
  --global-palette6: #f7f4ec; /* cream — light section background     */
  --global-palette7: #ffffff; /* white background                    */
  --global-palette8: #ffffff; /* white                               */
  --global-palette9: #ffffff; /* white                               */
}

/* Dark navy header bar */
.site-header-wrap,
.site-top-header-wrap {
  background: var(--global-palette3);
}

/* Olive/khaki primary buttons */
.button, button, .wp-block-button__link,
.kb-button.kt-btn-global-palette2 {
  background-color: var(--global-palette2);
  border-color: var(--global-palette2);
}
.button:hover, .wp-block-button__link:hover {
  background-color: var(--global-palette1);
  border-color: var(--global-palette1);
}

/* ---------------------------------------------------------------------------
   Header navigation (added 2026-06-30)
   - Nav links legible on the navy (#242833) header bar -> cream #F7F4EC
   - "Apply for an Internship" rendered as an olive (#676432) CTA button
   Nav is currently Kadence auto page-list fallback (no assigned menu yet);
   the CTA is targeted by page href so it survives a future real menu.
   --------------------------------------------------------------------------- */

/* All primary + mobile nav links -> cream (readable on navy header) */
#site-navigation .menu li a,
#mobile-site-navigation .menu li a {
  color: var(--global-palette6) !important; /* cream #F7F4EC */
}
#site-navigation .menu li a:hover,
#site-navigation .menu li a:focus,
#site-navigation .menu li.current-menu-item > a,
#site-navigation .menu li.current_page_item > a,
#mobile-site-navigation .menu li a:hover {
  color: #ffffff !important;
}

/* "Apply for an Internship" -> olive CTA button with cream text */
#site-navigation .menu li a[href*="apply-for-an-internship"],
#mobile-site-navigation .menu li a[href*="apply-for-an-internship"] {
  background-color: var(--global-palette2); /* olive #676432 */
  border-radius: 4px;
  padding: 8px 18px;
  margin: 0 0 0 8px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-block;
  transition: background-color .15s ease;
}
#site-navigation .menu li a[href*="apply-for-an-internship"]:hover,
#site-navigation .menu li a[href*="apply-for-an-internship"]:focus,
#mobile-site-navigation .menu li a[href*="apply-for-an-internship"]:hover {
  background-color: var(--global-palette1) !important; /* olive light #7a7740 */
  color: #ffffff !important;
}

/* "Apply for an Internship" CTA — now lives in the FOOTER (moved out of primary nav).
   Styles the link as the olive button wherever Kadence outputs it in the footer.
   Targeted by href so it works regardless of the footer-nav wrapper markup. */
.site-footer a[href*="apply-for-an-internship"] {
  display: inline-block;
  background-color: var(--global-palette2); /* olive #676432 */
  color: var(--global-palette6) !important; /* cream #F7F4EC */
  border-radius: 4px;
  padding: 8px 18px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .15s ease;
}
.site-footer a[href*="apply-for-an-internship"]:hover,
.site-footer a[href*="apply-for-an-internship"]:focus {
  background-color: var(--global-palette1) !important; /* olive light #7a7740 */
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Newsletter popup (added 2026-06-30) — vanilla JS controlled (popup.js).
   Navy modal, cream text, olive CTA. Mobile responsive.
   --------------------------------------------------------------------------- */
.epicdog-np-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 22, 28, 0.72);
}
.epicdog-np-overlay.is-open { display: flex; }
body.epicdog-np-lock { overflow: hidden; }
.epicdog-np-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--global-palette3, #242833);
  color: var(--global-palette6, #f7f4ec);
  border-radius: 10px;
  padding: 38px 28px 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  text-align: center;
  animation: epicdog-np-in .25s ease;
}
@keyframes epicdog-np-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.epicdog-np-close {
  position: absolute;
  top: 8px; right: 12px;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  color: var(--global-palette6, #f7f4ec);
  font-size: 28px; line-height: 1;
  cursor: pointer; opacity: .8;
}
.epicdog-np-close:hover { opacity: 1; }
.epicdog-np-title {
  color: var(--global-palette6, #f7f4ec) !important;
  margin: 0 0 10px;
  font-size: 26px; line-height: 1.2;
}
.epicdog-np-sub {
  color: var(--global-palette6, #f7f4ec);
  margin: 0 0 20px;
  font-size: 15px; opacity: .9;
}
.epicdog-np-form label { color: var(--global-palette6, #f7f4ec) !important; }
.epicdog-np-form input[type=text],
.epicdog-np-form input[type=email] {
  width: 100%;
  background: #fff;
  color: #242833;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  padding: 10px 12px;
}
.epicdog-np-form .ff-btn-submit,
.epicdog-np-form button[type=submit] {
  background: var(--global-palette2, #676432) !important;
  color: var(--global-palette6, #f7f4ec) !important;
  border: 0; border-radius: 5px;
  padding: 11px 20px; width: 100%;
  font-weight: 600; cursor: pointer;
}
.epicdog-np-form .ff-btn-submit:hover,
.epicdog-np-form button[type=submit]:hover { background: var(--global-palette1, #7a7740) !important; }
.epicdog-np-form .ff-message-success,
.epicdog-np-form .ff-el-is-error .text-danger { color: var(--global-palette6, #f7f4ec); }
@media (max-width: 480px) {
  .epicdog-np-modal { padding: 32px 18px 22px; }
  .epicdog-np-title { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   Hero slideshow (added 2026-06-30) — driven by slideshow.js.
   --------------------------------------------------------------------------- */
.epicdog-hero { position: relative; width: 100%; min-height: 540px; overflow: hidden; background: var(--global-palette3, #242833); }
.epicdog-hero__slides { position: absolute; inset: 0; }
.epicdog-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.epicdog-hero__slide.is-active { opacity: 1; }
.epicdog-hero__overlay { position: absolute; inset: 0; background: rgba(36, 40, 51, 0.5); }
.epicdog-hero__content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 96px 22px; text-align: center; color: var(--global-palette6, #f7f4ec); }
.epicdog-hero__content h1 { color: var(--global-palette6, #f7f4ec) !important; font-size: 46px; line-height: 1.12; margin: 0 0 16px; }
.epicdog-hero__content p { color: var(--global-palette6, #f7f4ec); font-size: 19px; line-height: 1.5; margin: 0 0 26px; }
.epicdog-hero__cta { display: inline-block; background: var(--global-palette6, #f7f4ec); color: #242833; padding: 13px 32px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.epicdog-hero__cta:hover { background: #fff; color: #242833; }
.epicdog-hero__dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3; text-align: center; line-height: 0; }
.epicdog-hero__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(247, 244, 236, 0.45); margin: 0 5px; border: 0; padding: 0; cursor: pointer; transition: background .15s ease; }
.epicdog-hero__dot.is-active { background: var(--global-palette6, #f7f4ec); }
@media (max-width: 600px) {
  .epicdog-hero { min-height: 440px; }
  .epicdog-hero__content { padding: 64px 18px; }
  .epicdog-hero__content h1 { font-size: 30px; }
  .epicdog-hero__content p { font-size: 16px; }
}

/* ===========================================================================
   Phase-0 layout components (added 2026-06-30) — Navy #242833 / Olive #676432 / Cream #F7F4EC
   =========================================================================== */

/* --- Service page 50/50 split (Task 2) --- */
.epicdog-split { display:flex; flex-wrap:wrap; align-items:stretch; margin:0 0 40px; box-shadow:0 8px 28px rgba(0,0,0,.08); border-radius:10px; overflow:hidden; }
.epicdog-split__media { flex:1 1 60%; min-width:300px; min-height:400px; background-size:cover; background-position:center; } /* Change 9: 60/40 split */
.epicdog-split__body { flex:1 1 40%; min-width:300px; padding:40px 34px; background:#fff; display:flex; flex-direction:column; justify-content:center; } /* Change 9: 60/40 split */
.epicdog-split__body h2 { color:#242833; margin:0 0 14px; }
.epicdog-split__details { list-style:none; margin:14px 0 26px; padding:0; }
.epicdog-split__details li { padding:5px 0 5px 26px; position:relative; color:#434753; }
.epicdog-split__details li::before { content:"\1F43E"; position:absolute; left:0; }
.epicdog-split__cta, a.epicdog-split__cta { display:inline-block; align-self:flex-start; background:#676432; color:#f7f4ec; padding:14px 28px; border-radius:8px; font-weight:600; text-decoration:none; transition:background .15s ease; }
.epicdog-split__cta:hover { background:#565333; color:#f7f4ec; }
@media (max-width:782px){ .epicdog-split__media{ flex-basis:100%; min-height:280px; } .epicdog-split__body{ flex-basis:100%; padding:30px 22px; } }

/* --- Generic About two-column --- */
.epicdog-2col { display:flex; flex-wrap:wrap; gap:34px; align-items:center; }
.epicdog-2col > div { flex:1 1 340px; }
.epicdog-2col__media { min-height:360px; background-size:cover; background-position:center; border-radius:10px; }
.epicdog-2col h3 { color:#242833; margin-top:0; }

/* --- Polaroid collage --- */
.epicdog-collage { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.epicdog-collage img { width:30%; min-width:120px; aspect-ratio:1/1; object-fit:cover; border:7px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.16); border-radius:2px; }
.epicdog-collage img:nth-child(odd){ transform:rotate(-3deg); }
.epicdog-collage img:nth-child(even){ transform:rotate(3deg); }
@media (max-width:600px){ .epicdog-collage img{ width:44%; } }

/* --- Meet the Team --- */
.epicdog-team__title { color:#242833; text-transform:uppercase; letter-spacing:3px; text-align:center; }
.epicdog-team__row { display:flex; flex-wrap:wrap; gap:32px; justify-content:center; margin-top:28px; }
.epicdog-team__member { flex:0 1 280px; text-align:center; }
.epicdog-team__member img { width:180px; height:180px; border-radius:50%; object-fit:cover; border:3px solid #242833; }
.epicdog-team__name { font-weight:700; color:#242833; margin:14px 0 2px; }
.epicdog-team__role { font-style:italic; color:#676432; font-size:14px; margin:0 0 8px; }
.epicdog-team__bio { color:#434753; font-size:14px; line-height:1.55; }

/* --- Navy CTA band --- */
.epicdog-cta-band { background:#242833; color:#f7f4ec; text-align:center; padding:58px 22px; border-radius:10px; }
.epicdog-cta-band p { color:#f7f4ec; font-size:20px; max-width:640px; margin:0 auto 24px; }
.epicdog-cta-band a { display:inline-block; background:#676432; color:#f7f4ec; padding:14px 30px; border-radius:8px; font-weight:600; text-decoration:none; }
.epicdog-cta-band a:hover { background:#565333; color:#f7f4ec; }

/* --- Testimonials (Task 4) --- */
.epicdog-tcards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.epicdog-tcard { background:#fff; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.08); padding:24px; text-align:center; }
.epicdog-tcard__photo { width:118px; height:118px; border-radius:10px; border:2px solid #676432; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:#676432; color:#f7f4ec; font-size:42px; background-size:cover; background-position:center; }
.epicdog-tcard__stars { color:#F0B429; font-size:18px; letter-spacing:2px; }
.epicdog-tcard__quote { font-style:italic; color:#434753; font-size:15px; line-height:1.55; margin:10px 0 12px; }
.epicdog-tcard__name { font-weight:700; color:#242833; font-size:14px; }
@media (max-width:900px){ .epicdog-tcards{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .epicdog-tcards{ grid-template-columns:1fr;} }

/* --- Services split hero (Task 5) --- */
.epicdog-shero { display:flex; flex-wrap:wrap; min-height:420px; border-radius:10px; overflow:hidden; margin-bottom:36px; }
.epicdog-shero__text { flex:1 1 50%; min-width:300px; background:#676432; color:#f7f4ec; display:flex; flex-direction:column; justify-content:center; padding:56px 42px; }
.epicdog-shero__text h1 { color:#f7f4ec !important; font-size:42px; line-height:1.12; margin:0 0 10px; }
.epicdog-shero__text p { color:#f7f4ec; font-style:italic; font-size:19px; margin:0 0 26px; }
.epicdog-shero__btn { display:inline-block; align-self:flex-start; background:#f7f4ec; color:#242833; padding:13px 28px; border-radius:8px; font-weight:600; text-decoration:none; }
.epicdog-shero__btn:hover { background:#fff; color:#242833; }
.epicdog-shero__media { flex:1 1 50%; min-width:300px; min-height:420px; background-size:cover; background-position:center; }
@media (max-width:782px){ .epicdog-shero__text,.epicdog-shero__media{ flex-basis:100%; } .epicdog-shero__media{ min-height:300px; } }

/* ===========================================================================
   Website Appearance Update — 2026-07-01
   Changes 1 (nav centre), 3/5 (masonry), 4 (About title), 7 (drawer), 8 (form width)
   Navy #242833 / Olive #676432 / Cream #F7F4EC
   =========================================================================== */

/* --- Change 1: centre the header navigation menu --- */
.main-navigation .menu,
.site-header .header-navigation ul.menu,
.header-navigation .header-menu-container > ul.menu {
  justify-content: center;
}
.site-header-item.site-header-focus-item,
.header-navigation.header-navigation-layout-standard {
  justify-content: center;
}

/* --- Change 4: About Us (page 13) — hide the auto WP page title (keep in-content heading) --- */
.page-id-13 .entry-title,
.page-id-13 .entry-hero-container .entry-title { display: none; }

/* --- Change 8: constrain Fluent Forms to 680px, centred --- */
.frm-fluent-form,
.fluentform,
.epicdog-drawer .frm-fluent-form {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Change 3 & 5: service masonry / mosaic grid --- */
.epicdog-masonry { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 34px; }
.epicdog-mcard {
  position: relative; display: flex; align-items: flex-end;
  min-height: 260px; border-radius: 10px; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.10); text-decoration: none;
}
.epicdog-mcard::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); transition: background .2s ease; }
.epicdog-mcard:hover::before { background: rgba(0,0,0,.22); }
.epicdog-mcard__inner { position: relative; z-index: 2; padding: 22px; width: 100%; }
.epicdog-mcard__title { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 6px; line-height: 1.15; }
.epicdog-mcard__desc { color: #f2f2f0; font-size: 13.5px; font-style: italic; line-height: 1.5; margin: 0 0 14px; }
.epicdog-mcard__btn { display: inline-block; background: #676432; color: #fff !important; padding: 9px 18px; border-radius: 6px; font-size: 13.5px; font-weight: 600; transition: background .2s ease; }
.epicdog-mcard:hover .epicdog-mcard__btn { background: #565333; }
/* Row 1: large left + 2 stacked right · Row 2: full-width wide · Row 3: 3 equal */
.epicdog-mcard--lg   { grid-column: span 3; grid-row: span 2; min-height: 380px; }
.epicdog-mcard--sm   { grid-column: span 3; min-height: 181px; }
.epicdog-mcard--wide { grid-column: span 6; min-height: 240px; }
.epicdog-mcard--eq   { grid-column: span 2; }
@media (max-width: 782px) {
  .epicdog-masonry { grid-template-columns: 1fr; }
  .epicdog-mcard, .epicdog-mcard--lg, .epicdog-mcard--sm, .epicdog-mcard--wide, .epicdog-mcard--eq {
    grid-column: 1 / -1; grid-row: auto; min-height: 240px;
  }
}

/* --- Change 7: booking drawer (slide-down, replaces anchor scroll) --- */
.epicdog-drawer {
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
  background: #fff; border-top: 3px solid #676432;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 0 0 10px 10px; margin: 0 0 40px;
}
.epicdog-drawer.is-open { max-height: 2600px; }
.epicdog-drawer__inner { position: relative; padding: 32px; }
.epicdog-drawer__close {
  position: absolute; top: 10px; right: 14px; width: 38px; height: 38px;
  border: 0; background: transparent; color: #676432; font-size: 30px; line-height: 1; cursor: pointer; opacity: .85;
}
.epicdog-drawer__close:hover { opacity: 1; }
@media (max-width: 600px) {
  .epicdog-drawer__inner { padding: 24px 16px; }
  .epicdog-drawer.is-open { max-height: 3400px; }
}