/* ============================================================
   selfplayingpiano.com — site overrides (over Interno template)
   Grows as we curate. Keep additive & targeted.
   ============================================================ */

/* ============================================================
   Megamenu (white full-width dropdown) — from zs-megamenu kit,
   adapted to home4 header (.tp-header-area / .tp-header-menu),
   gold aligned to brand #b1976b.
   ============================================================ */
.tp-header-area{position:relative;}
.tp-header-tranparent{z-index:6;}
.tp-header-menu > nav > ul > li.has-dropdown-2{position:static;}
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu{
   left:0;right:0;width:100%;display:block;
   padding:16px 30px 18px;transform:none !important;
}
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu > li{display:block;}
.tp-header-menu > nav > ul > li.has-dropdown-2 > .submenu > li:not(:last-child){margin-bottom:4px;}
.tp-submenu li a,
.tp-main-menu-mobile .tp-submenu li a{text-transform:none !important;}
/* mute the per-item native submenu; the combined panel is shown instead */
.tp-header-menu > nav > ul > li.has-dropdown-2:hover > .submenu{opacity:0 !important;visibility:hidden !important;}

.zs-mega-all{
   position:absolute;top:100%;left:0;right:0;width:100%;
   background:#fff;border-top:3px solid #b1976b;
   box-shadow:rgba(149,157,165,0.2) 0px 8px 24px;
   opacity:0;visibility:hidden;transition:opacity .25s ease;
   z-index:1001;padding:34px 0 40px;
}
.zs-mega-all.open{opacity:1;visibility:visible;}
.zs-mega-row{display:flex;gap:52px;flex-wrap:wrap;justify-content:flex-start;padding-right:30px;}
.zs-mega-col{min-width:190px;}
.zs-mega-col-title{
   font-family:"Playfair Display",Georgia,serif;font-size:14px;
   letter-spacing:1.5px;text-transform:uppercase;color:#b1976b;
   padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid rgba(177,151,107,.4);
}
.zs-mega-all .submenu{
   position:static !important;opacity:1 !important;visibility:visible !important;
   width:auto !important;min-width:0 !important;display:block !important;
   box-shadow:none !important;border-top:none !important;padding:0 !important;
   transform:none !important;background:transparent !important;
   left:auto !important;right:auto !important;clip-path:none !important;
}
.zs-mega-all .submenu > li{display:block !important;margin-bottom:10px !important;}
.zs-mega-all .submenu > li:last-child{margin-bottom:0 !important;}
.zs-mega-all .submenu > li > a{color:#222;font-size:15px;position:relative;display:inline-block;}
.zs-mega-all .submenu > li > a::after{
   content:"";position:absolute;bottom:-2px;right:0;left:auto;
   height:1px;width:0;background-color:#b1976b;transition:width .5s ease;
}
.zs-mega-all .submenu > li > a:hover::after{width:100%;right:auto;left:0;}

/* ---- Logo sizing (circular badge) ---- */
.tp-header-logo a img,
.tp-header-2-logo a img{
  height:66px;
  width:66px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
/* stretch the logo column to full header-row height and center the logo in it */
.tp-header-area > .container > .row > div:first-child{
  align-self:stretch;
  display:flex;
  align-items:center;
}
.tp-header-area > .container > .row > div:first-child .tp-header-logo{line-height:0;}
/* offcanvas + search popup logos (on dark) */
.tpoffcanvas__logo a img,
.search__logo a img{
  height:52px;
  width:52px;
  object-fit:cover;
  border-radius:50%;
}
/* footer logo */
.tp-footer-widget .footer-logo img,
.tp-footer-col-4 .footer-logo img{
  height:52px;
  width:52px;
  object-fit:cover;
  border-radius:50%;
}

/* ---- Hero eyebrow (small label above H1) ---- */
.spp-eyebrow{
  display:inline-flex;
  align-items:center;
  font-family:'Jost',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#b1976b;
  margin-bottom:16px;
}
.spp-eyebrow::before{
  content:"";
  display:inline-block;
  width:30px;
  height:2px;
  background:#b1976b;
  margin-right:12px;
}

/* ---- About box images (WebGL distort removed → plain images, template sizes) ---- */
.tp-about-4-thumb-1 img,
.tp-about-4-thumb-2 img{
  width:290px;
  height:422px;
  object-fit:cover;
  display:block;
}
@media (max-width:767px){
  .tp-about-4-thumb-1 img,
  .tp-about-4-thumb-2 img{width:100%;height:auto;}
}

/* ---- Player-piano systems list (repurposed blog rows) ---- */
.spp-role-list{list-style:none;margin:0;padding:0;}
.spp-role-list li{
  position:relative;padding-left:26px;margin-bottom:9px;
  font-family:'Jost',sans-serif;font-size:16px;font-weight:500;color:#141414;
}
.spp-role-list li:last-child{margin-bottom:0;}
.spp-role-list li::before{
  content:"";position:absolute;left:0;top:10px;width:15px;height:2px;background:#b1976b;
}
.spp-role-note{margin:0;font-style:italic;color:#5f5f5f;font-size:16px;}
.zs-megjegyzes{font-style:italic;}
/* Service-detail images: uniform, tidy tiles (portrait sources cropped) */
.tp-sv-details-thumb img{
  width:100%;height:300px;object-fit:cover;border-radius:8px;display:block;
}
/* bottom (text-end) image: natural aspect, right-aligned, not cropped */
.tp-sv-details-thumb.text-end img{
  width:auto;max-width:100%;height:auto;max-height:420px;
  margin-left:auto;object-fit:initial;
}
.spp-sys-logo{
  background:#ffffff;
  border:1px solid #e7e3da;
  border-radius:10px;
  padding:16px 20px;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:340px;min-height:120px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.spp-mid{gap:40px;justify-content:flex-start;}
.spp-sys-logo img{max-width:100%;max-height:74px;width:auto;height:auto;display:block;}
/* un-bold the three system titles */
.tp-blog-2-title,
.tp-blog-2-title a{font-weight:400;}

/* ---- Mobile safety (broad pass; detailed pass later) ---- */
html,body{overflow-x:hidden;}
img{max-width:100%;height:auto;}

@media (max-width:575px){
  .tp-header-logo a img,
  .tp-header-2-logo a img{height:58px;width:58px;}
}

/* ---- Elegant headings (Playfair Display, softer than Montserrat 700) ---- */
.tp-slider-title{
  font-family:"Playfair Display",Georgia,serif !important;
  font-weight:400 !important;
  letter-spacing:0.5px;
  line-height:1.12;
}
.tp-section-title{
  font-family:"Playfair Display",Georgia,serif !important;
  font-weight:400 !important;
  letter-spacing:0.5px;
}
.tp-blog-2-title{
  font-family:"Playfair Display",Georgia,serif !important;
  font-weight:400 !important;
}

/* ---- Home menu aligned to the right (not centred) ---- */
.tp-header-style-4 .tp-header-menu{ padding-left:0 !important; }
.tp-header-style-4 .tp-header-menu > nav > ul{ text-align:right; }

/* ---- White header bar on home (menu + hamburger kept legible) ---- */
.tp-header-style-4.tp-header-tranparent{ background:#ffffff; box-shadow:0 1px 0 rgba(0,0,0,.06); }
.tp-header-style-4 .tp-header-menu > nav > ul > li > a{ color:#1a1a1a; }
.tp-header-style-4 .tp-header-menu > nav > ul > li > a:hover{ color:#b1976b; }
.tp-header-style-4 .tp-header-bar button{ color:#1a1a1a !important; border-color:#1a1a1a !important; }
.tp-header-style-4 .tp-header-bar button:hover{ color:#b1976b !important; border-color:#b1976b !important; }

/* ---- Hero stat numbers in the same elegant Playfair ---- */
.tp-hero-2-funfact h5,
.tp-hero-2-funfact h5 i{
  font-family:"Playfair Display",Georgia,serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:0.5px;
}

/* ---- Audience cards on home: uniform height ---- */
.tp-project-4-thumb img{ height:210px; width:100%; object-fit:cover; }
@media (max-width:767px){ .tp-project-4-thumb img{ height:180px; } }

/* Footer "Get in touch": inline label + value (avoid absolute-overlap on home) */
.tp-footer-contact ul li{ padding-left:0 !important; position:relative; }
.tp-footer-contact ul li span{ position:static !important; display:inline-block; margin-right:6px; }

/* Footer text one step smaller */
.tp-footer-area .tp-footer-list ul li a,
.tp-footer-area .tp-footer-contact ul li,
.tp-footer-area .tp-footer-contact ul li a,
.tp-footer-area .tp-footer-contact ul li span,
.tp-footer-area .tp-footer-text p,
.tp-copyright-area p,
.tp-copyright-area .zs-footer-legal li a{ font-size:14px !important; }

/* Hero: second line under the main title (v32) */
.spp-hero-sub{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:400;
  font-size:30px;
  line-height:1.25;
  color:#5a5a5a;
  letter-spacing:0.3px;
  margin:0 0 28px;
}
@media (max-width:991px){ .spp-hero-sub{ font-size:24px; } }
@media (max-width:575px){ .spp-hero-sub{ font-size:18px; margin:0 0 20px; } }

/* ===== Mobile homepage tweaks (v33) ===== */
/* 1) Hero title one step bigger on phones */
@media (max-width:575px){
  .tp-slider-2-content .tp-slider-title{ font-size:40px !important; }
}
@media (max-width:360px){
  .tp-slider-2-content .tp-slider-title{ font-size:34px !important; }
}
/* 3) Remove the two "My Work" (about) images on mobile so the text moves up */
@media (max-width:767px){
  .tp-about-4-left{ display:none !important; }
  .tp-about-4-area{ padding-top:40px !important; }
}
/* 2) Mobile menu: submenus open by default (no tap), hide toggles, bigger text */
.tp-main-menu-mobile .tp-submenu{ display:block !important; }
.tp-main-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn,
.tp-main-menu-mobile ul li.has-dropdown-2 > a .dropdown-toggle-btn{ display:none !important; }
.tp-main-menu-mobile ul li > a{ font-size:19px !important; padding:10px 0 !important; letter-spacing:.5px !important; }
.tp-main-menu-mobile .tp-submenu li > a{ font-size:16px !important; opacity:.92; padding-left:14px !important; }
.tp-main-menu-mobile ul li.has-dropdown-2 > a,
.tp-main-menu-mobile ul li.has-dropdown-2 > a span,
.tp-main-menu-mobile ul li.has-dropdown > a,
.tp-main-menu-mobile ul li.has-dropdown > a span{ color:#fff !important; opacity:1 !important; }

/* ===== Mobile homepage tweaks (v35) ===== */
/* Tighten the gap above the "At your service" section on mobile */
@media (max-width:767px){
  .tp-about-4-area{ padding-bottom:20px !important; }
  .tp-project-4-area{ padding-top:24px !important; }
}
/* Small gold bubble before the dropdown titles in the mobile menu */
.tp-main-menu-mobile ul li.has-dropdown-2 > a::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#b1976b; margin-right:12px; vertical-align:middle; flex:0 0 auto;
}

/* ===== Mobile homepage tweaks (v36) ===== */
/* Thin, centred light-grey divider above the "At your service" section (mobile) */
@media (max-width:767px){
  .tp-project-4-area{ position:relative; }
  .tp-project-4-area::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:60%; max-width:260px; height:1px; background:#e3e3e3;
  }
}

/* ===== Mobile homepage tweaks (v37) ===== */
/* Footer: put "Get in touch" first on mobile */
@media (max-width:767px){
  .tp-footer-area .row > div:nth-child(1){ order:2; }
  .tp-footer-area .row > div:nth-child(2){ order:3; }
  .tp-footer-area .row > div:nth-child(3){ order:1; }
}

/* uniform language-switcher ↔ hamburger gap (gap from pill margin only) */
.tp-header-right, .tp-header-2-right, .tp-header-2-right ul, .tp-header-2-right ul li, .tp-header-2-right li{ gap:0 !important; }
.spp-lang{ margin:0 18px 0 0 !important; }
[dir="rtl"] .spp-lang{ margin:0 0 0 18px !important; }

[dir="rtl"] .tp-main-menu-mobile ul li.has-dropdown-2 > a::before{ margin-right:0; margin-left:12px; }