/* ============================================================
   selfplayingpiano.com — SUBPAGE overrides (over zongoraszalon
   template). Loaded after aloldal.css on our adapted subpages.
   This is the subpage TEMPLATE stylesheet.
   ============================================================ */

/* ---- Compact header ----------------------------------------
   The template adds ~50px of extra vertical padding to the
   header (tp-header-2-pt) which made it 140px tall. We strip it
   so the header height = the menu height (~90px), and center
   everything with the row's align-items:center.
   ------------------------------------------------------------ */
.tp-header-2-pt{ padding-top:0 !important; padding-bottom:0 !important; }
.tp-header-2-area .row{ align-items:center !important; }

/* our circular logo (also defeats aloldal.css max-height/auto caps) */
.tp-header-logo a img.spp-header-logo{
  height:64px !important;
  width:64px !important;
  max-height:none !important;
  object-fit:cover !important;
  border-radius:50%;
  display:block;
}

/* The header floats (absolute) over the breadcrumb; the visible white
   band is the breadcrumb's top padding. Match it to the header height
   so the logo sits perfectly centered in the visible white area. */
.breadcrumb__pt{ padding-top:90px !important; }
@media (max-width:1199px){ .breadcrumb__pt{ padding-top:72px !important; } }

/* Services overview cards: uniform-width, centered black content box
   (template default is display:inline-block, so it sizes to the text) */
.tp-project-4-content{
  left:0 !important;
  right:0 !important;
  display:block !important;
  text-align:center !important;
}

/* Service cards: keep the title on one line so all boxes are equal height */
.tp-project-4-content{ padding-left:26px !important; padding-right:26px !important; }
.tp-project-4-title{ font-size:20px !important; white-space:nowrap; }

/* Content image thumbs: limit height (the two side-by-side images) */
.tp-sv-details-thumb:not(.text-end) img{
  height:240px;
  width:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:767px){
  .tp-sv-details-thumb:not(.text-end) img{ height:200px; }
}

/* Inline links inside page content: gold + underline (not the CTA button) */
.tp-sv-details-content a:not(.tp-btn-black){
  color:#b1976b;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s;
}
.tp-sv-details-content a:not(.tp-btn-black):hover{ color:#8f7652; }

/* Video cards (See it in action) */
.spp-video-card{ position:relative; display:block; overflow:hidden; border-radius:4px; }
.spp-video-card img{ width:100%; height:240px; object-fit:cover; display:block; transition:transform .5s; }
.spp-video-card:hover img{ transform:scale(1.05); }
.spp-video-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(177,151,107,.92); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; }
.spp-video-cap{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; padding:28px 16px 12px; font-family:"Playfair Display",Georgia,serif; font-size:17px; }

/* Inline responsive video embed (16:9) */
.spp-video-embed{position:relative;padding-top:56.25%;height:0;overflow:hidden;border-radius:4px;}
.spp-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* 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; }

/* Software I've built — list on why-choose-me (v15) */
.tp-sv-details-content .spp-soft-list{list-style:none;padding:0;margin:6px 0 10px;}
.tp-sv-details-content .spp-soft-list li{padding:14px 0;line-height:1.7;color:#4a4a4a;}
.tp-sv-details-content .spp-soft-list li + li{border-top:1px solid #ececec;}
.tp-sv-details-content .spp-soft-list a strong{color:#b1976b;}
.tp-sv-details-content .spp-soft-list a:hover strong{text-decoration:underline;}

/* Systems page — brand logo row (v19): D2 — one row desktop, wraps on mobile */
.spp-sys-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 18px;margin:8px 0 46px;}
.spp-sys-logos img{width:auto;object-fit:contain;}
.spp-sys-logos img:nth-child(1){height:20px;} /* Yamaha Disklavier */
.spp-sys-logos img:nth-child(2){height:38px;} /* Steinway Spirio */
.spp-sys-logos img:nth-child(3){height:40px;} /* QRS */
.spp-sys-logos img:nth-child(4){height:33px;} /* Pianoforce */
.spp-sys-logos img:nth-child(5){height:24px;} /* PianoDisc */
[dir="rtl"] .spp-sys-logos{direction:ltr;}
@media (max-width:575px){
  .spp-sys-logos{gap:16px 24px;}
  .spp-sys-logos img:nth-child(1){height:16px;}
  .spp-sys-logos img:nth-child(2){height:30px;}
  .spp-sys-logos img:nth-child(3){height:32px;}
  .spp-sys-logos img:nth-child(4){height:26px;}
  .spp-sys-logos img:nth-child(5){height:20px;}
}

/* ===== Header + mobile menu — uniform across all pages (v20) ===== */
/* gap between language switcher and hamburger */
/* mobile menu: submenus open, no toggles, bigger text, white titles, gold bubble */
.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; }
.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;
}
[dir="rtl"] .tp-main-menu-mobile ul li.has-dropdown-2 > a::before{ margin-right:0; margin-left:12px; }

/* ===== Make subpage mobile menu match the HOME exactly (v21) ===== */
/* remove the old white divider lines under items (from aloldal.css) */
.tpoffcanvas .tp-main-menu-mobile ul li{ border-bottom:none !important; }
/* top-level titles 19px (override zongoraszalon 16px span + aloldal 18px) */
.tpoffcanvas .tp-main-menu-mobile ul li > a,
.tpoffcanvas .tp-main-menu-mobile ul li > a span{ font-size:19px !important; }
.tpoffcanvas .tp-main-menu-mobile ul li > a{ padding:10px 0 !important; }
/* submenu items 16px */
.tpoffcanvas .tp-main-menu-mobile .tp-submenu li > a,
.tpoffcanvas .tp-main-menu-mobile .tp-submenu li > a span{ font-size:16px !important; }
.tpoffcanvas .tp-main-menu-mobile .tp-submenu li > a{ padding:8px 0 8px 14px !important; }
[dir="rtl"] .tpoffcanvas .tp-main-menu-mobile .tp-submenu li > a{ padding:8px 14px 8px 0 !important; }

/* 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; }

/* Match home: subpage hamburger gets the same left margin as the home hamburger (v24) */
.tp-header-2-bar{ margin-left:20px !important; }
[dir="rtl"] .tp-header-2-bar{ margin-left:0 !important; margin-right:20px !important; }