/* ==========================================================================
   PaintedPic — Pro-independent header + footer styles.
   Values below were read directly from Elementor's own generated CSS for
   templates 678 (header), 28 (homepage header) and 671 (footer) so the
   breakpoints and colors match the current live site as closely as possible.
   Breakpoints used sitewide: 1368px (laptop), 1024px (tablet/tablet_extra),
   768px (tablet), 767px (mobile) — same values as the site's existing
   Elementor breakpoint configuration.
   ========================================================================== */

/* ---------- Header ---------- */

.pp-site-header {
  background: #030303;
  width: 100%;
  position: relative;
  z-index: 50;
}

.pp-header-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 85px;
  padding: 8px 0 0 0;
  max-width: 100%;
  margin: 0 auto;
}

.pp-header-logo {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}
.pp-header-logo img {
  height: 27px;
  width: auto;
  max-width: 100%;
  display: block;
}
.pp-header-logo a { display: inline-block; }

.pp-main-nav { flex: 1; }

.pp-main-nav ul.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-main-nav ul.menu li { list-style: none; margin: 0; }
.pp-main-nav ul.menu li a {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 50px;
  transition: color .3s;
  white-space: nowrap;
}
.pp-main-nav ul.menu li a:hover,
.pp-main-nav ul.menu li a:focus {
  color: #E4E54E;
}
/* Intentionally NOT styling on WordPress's own `.current-menu-item` /
   `.current_page_item` classes here: the original Elementor Pro nav-menu
   widget never keyed its color on those WP-core classes (its own generated
   CSS only ever references `.elementor-item-active` / `.elementor-item.
   highlighted`, both of which it applied itself via its own JS/PHP -- never
   present in a plain wp_nav_menu() render). Because three menu items
   (Examples, FAQ, Order Now) are anchor links back to the homepage,
   WordPress's default class logic marks ALL THREE of them "current" at once
   whenever the front page is being viewed, which is not the same thing as
   "this is the active nav item" and is not how the original ever behaved.
   Matching the original faithfully means not reacting to those classes. */

@media (max-width: 1368px) {
  .pp-header-inner { min-height: 141px; }
  .pp-header-logo { width: 18.014%; padding-right: 0; padding-left: 15px; justify-content: flex-end; }
  .pp-main-nav ul.menu li a { font-size: 18px; padding: 12px 20px; }
}

/* Hamburger toggle button (injected by header-footer.js).
   display uses !important because Hello Elementor's own reset.css has a
   `[type="button"], [type="submit"], button { display: inline-block }` rule
   that otherwise wins the cascade against our plain class selector in some
   browsers' rule-matching order for UA-styled form controls. */
.pp-nav-toggle {
  display: none !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: .25em;
  color: #FFFFFF;
  width: 31px;
  height: 31px;
  margin: 0 auto;
}
.pp-nav-toggle svg { width: 100%; height: 100%; fill: #FFFFFF; }
.pp-nav-toggle .pp-icon-close { display: none !important; }
.pp-nav-toggle.pp-active .pp-icon-open { display: none !important; }
.pp-nav-toggle.pp-active .pp-icon-close { display: block !important; }

/* Below 1024px: collapse to hamburger + dropdown, matching the current
   "tablet_extra" breakpoint behavior (max-width: 1024px). */
@media (max-width: 1024px) {
  .pp-header-inner { flex-wrap: nowrap; justify-content: space-between; padding: 0; min-height: 90px; }
  .pp-header-logo { width: 50%; justify-content: center; padding: 0; }
  .pp-main-nav { display: none !important; flex: none; }
  .pp-main-nav.pp-active {
    display: block !important;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #030303;
    z-index: 9997;
  }
  .pp-main-nav.pp-active ul.menu { flex-direction: column; align-items: stretch; }
  .pp-main-nav.pp-active ul.menu li a { padding: 14px 24px; font-size: 18px; }
  .pp-nav-toggle { display: flex !important; width: 33px; height: 33px; }
}

@media (max-width: 767px) {
  .pp-header-inner { min-height: 80px; justify-content: space-evenly; }
  .pp-header-logo { width: 78%; }
  .pp-header-logo img { height: 30px; }
  .pp-nav-toggle { width: 30px; height: 30px; }
}

/* ---------- Homepage hero (only rendered on the front page) ---------- */

.ph-hero{position:relative;width:100%;background:#1a1a1a;}
.ph-hero *{box-sizing:border-box;}
.ph-hero__media{position:relative;width:100%;line-height:0;}
.ph-hero__media picture{display:block;width:100%;}
.ph-hero__img{display:block;width:100%;height:auto;}
.ph-hero__eyebrow{
  display:inline-block;font-size:12px;letter-spacing:1px;font-weight:700;
  border:1px solid rgba(255,255,255,0.55);color:#fff;padding:7px 14px;
  border-radius:20px;background:rgba(0,0,0,0.2);
}
.ph-hero__sub{font-size:17px;font-weight:600;line-height:1.4;margin:0;}
.ph-hero__cta{
  display:inline-flex;align-items:center;gap:10px;background:#ffffff;color:#000;
  padding:15px 24px;text-decoration:none;font-weight:800;font-size:15px;
  border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
.ph-hero__cta:hover{background:#f2f2f2;color:#000;}
.ph-hero__benefits{list-style:none;padding:0;margin:0;}
.ph-hero__benefits li{
  position:relative;padding-left:26px;margin-bottom:10px;font-size:15px;color:#fff;line-height:1.4;
}
.ph-hero__benefits li::before{
  content:"\2713";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:#d5a14f;color:#fff;font-size:11px;font-weight:700;display:flex;
  align-items:center;justify-content:center;line-height:1;
}
.ph-hero__above--mobile, .ph-hero__above--tablet, .ph-hero__below--tablet,
.ph-hero__below--mobile, .ph-hero__overlay--desktop{ display:none; }

@media (max-width:767px){
  .ph-hero__above--mobile{ display:block; text-align:center; padding:28px 20px 18px 20px; background:#1a1a1a; }
  .ph-hero__above--mobile .ph-hero__h1--mobile{ margin:0; color:#fff; font-size:26px; line-height:1.25; font-weight:800; letter-spacing:-0.3px; }
  .ph-hero__below--mobile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:22px 20px 32px 20px; background:#1a1a1a; }
  .ph-hero__below--mobile .ph-hero__sub{ color:#fff; }
}
@media (min-width:768px) and (max-width:1367px){
  .ph-hero__above--tablet{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:34px 24px 22px 24px; background:#1a1a1a; }
  .ph-hero__above--tablet .ph-hero__h1--tablet{ margin:0; color:#fff; font-size:34px; line-height:1.2; font-weight:800; letter-spacing:-0.4px; max-width:640px; }
  .ph-hero__below--tablet{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:24px 24px 36px 24px; background:#1a1a1a; }
  .ph-hero__below--tablet .ph-hero__sub{ color:#fff; }
}
@media (min-width:1368px){
  .ph-hero__media{ max-width:1760px; margin:0 auto; }
  .ph-hero__overlay--desktop{
    display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:22px;
    position:absolute; left:0; top:0; height:100%; width:640px; max-width:640px; padding:48px 32px;
    background:linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
    color:#fff;
  }
  .ph-hero__overlay--desktop > .ph-hero__eyebrow{ align-self:flex-start; font-size:14px; padding:9px 18px; }
  .ph-hero__overlay--desktop .ph-hero__cta{ align-self:flex-start; background:#d5a14f; color:#fff; padding:18px 32px; font-size:17px; }
  .ph-hero__overlay--desktop .ph-hero__cta:hover{ background:#c28f3c; color:#fff; }
  .ph-hero__overlay--desktop .ph-hero__h1--desktop{ margin:0; font-size:44px; line-height:1.15; font-weight:800; letter-spacing:-0.4px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.5); }
  .ph-hero__overlay--desktop .ph-hero__sub{ font-size:20px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
  .ph-hero__overlay--desktop .ph-hero__benefits li{ font-size:17px; padding-left:30px; margin-bottom:12px; }
  .ph-hero__overlay--desktop .ph-hero__benefits li::before{ width:20px; height:20px; font-size:12px; }
}

/* ---------- Footer ---------- */

.pp-site-footer {
  background: #000000;
  width: 100%;
  min-height: 171px;
  display: flex;
  align-items: center;
}

.pp-footer-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
}

.pp-footer-col {
  width: 20%;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.pp-footer-col p { margin: 0 0 6px 0; }
.pp-footer-heading {
  color: #ffffff;
  opacity: 0.85;
  font-weight: 600 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: 0.04em;
}
.pp-footer-col a { color: #ffffff; text-decoration: none; }
.pp-footer-legal { margin: 6px 0 0 0 !important; color: #ffffff; opacity: 0.35; font-size: 11px; letter-spacing: 0.02em; }

@media (max-width: 1368px) {
  .pp-footer-inner { padding: 0 20px; }
  .pp-footer-col { width: 25%; }
}
@media (max-width: 1024px) {
  .pp-footer-inner { padding: 0; }
  .pp-footer-col { width: 23%; }
}
@media (max-width: 768px) {
  .pp-site-footer { min-height: 60px; }
  .pp-footer-inner { padding: 0 10px; }
}
@media (max-width: 767px) {
  .pp-site-footer { min-height: 0; }
  .pp-footer-inner { flex-direction: column; padding: 30px 20px 60px 20px; gap: 22px; text-align: center; }
  .pp-footer-col { width: 100%; }
}
/* The live footer hides the "Policies" column specifically in the 768-1024px
   band (Elementor's "hidden on tablet" responsive-visibility setting) — visible
   again at mobile (<=767) and at tablet_extra/laptop/desktop (>=1025). */
@media (min-width: 768px) and (max-width: 1024px) {
  .pp-footer-col--policies { display: none; }
}