/* =====================================================================
   custom.css — responsive hardening + professional polish
   Loaded last so it overrides the theme. Accent: #e00a1c
   ===================================================================== */

/* ------------------------------------------------------------------ *
 *  1. RESPONSIVE HARDENING
 * ------------------------------------------------------------------ */

/* never allow sideways scrolling on phones */
html, body { max-width:100%; overflow-x:hidden; }

/* keep media inside its container (slider images are exempt) */
img, iframe, video, embed, object { max-width:100%; }
img { height:auto; }
#main-slider img, .tp-banner img, .fullscreenbanner img { max-width:none; }

/* fluid 16:9 video embeds (filmy.html etc.) */
.video-responsive, .embed-responsive {
  position:relative; width:100%; height:0;
  padding-bottom:56.25%; overflow:hidden;
}
.video-responsive iframe, .embed-responsive iframe {
  position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* tame the heavy desktop section padding on smaller screens */
@media (max-width:991px){
  .section-padding{ padding-top:80px !important; }
  .padding{ padding:60px 0; }
  .top-padding{ padding-top:60px; }
}
@media (max-width:767px){
  .section-padding{ padding-top:55px !important; }
  .padding{ padding:45px 0; }
  .top-padding{ padding-top:45px; }
  .info-section .block{ padding:55px 6%; }

  /* pricing cards: one clean centred column */
  .pricing_tenzin .pricing_item{
    -webkit-flex:1 1 100%; flex:1 1 100%;
    max-width:360px; margin:.6em auto;
  }
  #about .canvas-box{ margin-bottom:30px; }
}
@media (max-width:480px){
  .pricing_tenzin .pricing_item{ margin:.5em 8px; }
}

/* ------------------------------------------------------------------ *
 *  2. PROFESSIONAL POLISH
 * ------------------------------------------------------------------ */

/* global easing for interactive elements */
a,
.btn-common, .btn-black, .btn-white, .loadmore, button,
#about .canvas-box,
.pricing_tenzin .pricing_item,
.work-item > img,
ul.top-right li a,
footer .footer-social li a {
  transition: all .3s ease;
}

/* refined section eyebrow + heading typography */
.title, p.title{
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  color:#e00a1c;
}
.heading{
  letter-spacing:.4px;
}

/* service cards — subtle elevation that lifts on hover */
#about .canvas-box{
  padding:34px 24px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 22px rgba(20,20,22,.05);
}
#about .canvas-box:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(20,20,22,.12);
}

/* pricing — card depth + hover lift, accent on the active plan */
.pricing_tenzin .pricing_item{
  border-radius:10px;
  box-shadow:0 6px 22px rgba(20,20,22,.06);
}
.pricing_tenzin .pricing_item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(20,20,22,.13);
}

/* team — rounded, elevated portraits */
#thinkers .thinker-wrap{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(20,20,22,.08);
}
#thinkers .thinker-wrap:hover{
  box-shadow:0 14px 32px rgba(20,20,22,.16);
}

/* gallery — gentle zoom on hover (overlay fade is the theme's own) */
.work-item > img{ transition:transform .6s ease; }
.work-item:hover > img{ transform:scale(1.06); }

/* buttons — crisper shape + tactile hover */
.btn-common, .btn-black, .btn-white, .loadmore{
  border-radius:4px;
  letter-spacing:.6px;
}
.btn-common:hover, .btn-black:hover, .btn-white:hover, .loadmore:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,20,22,.18);
}

/* contact form — modern focus ring in brand colour */
#contact .form-inline .form-control:focus,
#contact .form-inline textarea:focus{
  border-color:#e00a1c;
  box-shadow:0 0 0 3px rgba(224,10,28,.12);
  outline:0;
}
#btn_submit{ transition:all .3s ease; }
#btn_submit:hover{ transform:translateY(-2px); }

/* back-to-top button — softer, branded */
.go-top{
  border-radius:6px;
  box-shadow:0 6px 18px rgba(20,20,22,.18);
}

/* crisp image rendering */
img{ image-rendering:auto; }

/* ------------------------------------------------------------------ *
 *  3. GOOGLE MAP + REVIEWS
 * ------------------------------------------------------------------ */

/* full-width map strip */
#map{ line-height:0; }
#map iframe{ display:block; width:100%; height:430px; border:0; filter:grayscale(.15); }
@media (max-width:767px){ #map iframe{ height:300px; } }

/* "see all Google reviews" call-to-action */
.reviews-cta{ margin-top:40px; text-align:center; }
.btn-google-reviews{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 28px;
  border-radius:50px;
  background:#fff;
  color:#222 !important;
  font-weight:600;
  font-size:15px;
  line-height:1;
  border:1px solid #ececec;
  box-shadow:0 8px 24px rgba(20,20,22,.14);
  transition:all .3s ease;
}
.btn-google-reviews:hover,
.btn-google-reviews:focus{
  color:#222 !important;
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(20,20,22,.2);
  text-decoration:none;
}
.btn-google-reviews .fa-google{ color:#4285F4; font-size:18px; }
.btn-google-reviews .stars{ color:#fbbc05; letter-spacing:2px; font-size:15px; }

/* ------------------------------------------------------------------ *
 *  4. TYPOGRAPHY — unified across the whole site
 *     Body: Open Sans · Headings/UI: Raleway (now with real bold weights)
 * ------------------------------------------------------------------ */
body, p, li, span, input, textarea, select, .form-control{
  font-family:'Open Sans', "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.heading, .title,
.navbar-nav > li > a, .push_nav li a,
.btn-common, .btn-black, .btn-white, .loadmore,
.pricing_title, .pricing_price{
  font-family:'Raleway', "Helvetica Neue", Arial, sans-serif;
}
/* bold weights are now loaded, so headings can actually look bold */
h1, h2, .heading{ font-weight:700; }
h3, h4{ font-weight:600; }

/* ------------------------------------------------------------------ *
 *  5. SLIDER — bolder text + much stronger contrast so it always reads
 * ------------------------------------------------------------------ */
#main-slider .tp-banner-container{ position:relative; }
/* dark vignette behind the captions (clicks pass through) */
#main-slider .tp-banner-container::after{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,0) 28%,
    rgba(0,0,0,0) 52%,
    rgba(0,0,0,.58) 100%);
  pointer-events:none;
  z-index:2;
}
#main-slider .tp-caption,
.tp-banner h2.tp-caption,
.tp-banner p.tp-caption,
.tp-resizeme h2,
.tp-resizeme p,
#main-slider h2.tp-caption > span{
  font-family:'Raleway', sans-serif !important;
  font-weight:800 !important;
  color:#fff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,.95),
    0 0 16px rgba(0,0,0,.85),
    0 6px 26px rgba(0,0,0,.7) !important;
}
.tp-banner p.tp-caption, .tp-resizeme p{ font-weight:700 !important; }

/* ------------------------------------------------------------------ *
 *  6. REVIEW CARDS (Opinie naszych klientów) — 5★ + Google + date
 * ------------------------------------------------------------------ */
#testinomial-slider .review-card{
  text-align:center;
  padding:0 15px;
}
.review-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:16px;
}
.review-stars{
  color:#fbbc05;
  font-size:22px;
  letter-spacing:3px;
  line-height:1;
}
.review-google{
  color:#4285F4;
  font-size:20px;
}
.review-text{
  font-style:italic;
  margin:0 auto;
  max-width:760px;
}
.review-meta{
  margin-top:16px;
}
.review-author{
  display:inline-block;
  font-family:'Raleway', sans-serif;
  font-weight:700;
  letter-spacing:.4px;
}
.review-author::before{ content:"— "; opacity:.6; }
.review-date{
  display:block;
  margin-top:4px;
  font-size:13px;
  opacity:.7;
}
.review-date:empty{ display:none; }   /* hide until a date is supplied */

/* ------------------------------------------------------------------ *
 *  7. SLIDER REFACTOR — mobile caption wrapping + modern arrows
 * ------------------------------------------------------------------ */

/* --- 7a. Captions: clean, centred, never broken mid-word on phones --- *
 * The old rules used `word-wrap:break-word`, which split long Polish
 * words (e.g. "Profesjo-nalny") and let lines collide. Here we wrap
 * only between whole words, scale the text down so it fits, and centre
 * every caption so right/left-anchored layers stop overlapping.       */
@media (max-width:767px){
  #main-slider .tp-caption,
  .tp-banner h2.tp-caption,
  .tp-banner p.tp-caption,
  .tp-resizeme h2,
  .tp-resizeme p{
    /* wrap between words only — no mid-word splits, no hyphenation */
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    word-wrap:normal !important;
    -webkit-hyphens:none !important;
    hyphens:none !important;
    /* centre every layer so left/right-anchored captions don't collide */
    left:50% !important;
    right:auto !important;
    -webkit-transform:translateX(-50%) !important;
    transform:translateX(-50%) !important;
    max-width:90vw !important;
    width:90vw !important;
    text-align:center !important;
  }

  /* title size that fits two short Polish words on one line */
  #main-slider .tp-banner h2.tp-caption,
  #main-slider h2.tp-caption > span,
  .tp-resizeme h2{
    font-size:26px !important;
    line-height:1.15em !important;
  }
  /* subtitle, comfortably smaller and clear of the title */
  .tp-banner p.tp-caption,
  .tp-resizeme p{
    font-size:15px !important;
    line-height:1.35em !important;
  }
}

/* even tighter on very small phones */
@media (max-width:380px){
  #main-slider .tp-banner h2.tp-caption,
  #main-slider h2.tp-caption > span,
  .tp-resizeme h2{ font-size:22px !important; }
}

/* --- 7b. Navigation arrows: modern circular accent buttons --- *
 * Replaces the dated prev.png / next.png sprites with FontAwesome
 * chevrons in a translucent circle that turns accent-red on hover.   */
.tp-leftarrow.default,
.tp-rightarrow.default{
  width:54px !important;
  height:54px !important;
  background-image:none !important;
  background-color:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tp-leftarrow.default:hover,
.tp-rightarrow.default:hover{
  background-image:none !important;
  background-color:#e00a1c !important;   /* accent */
  background-position:0 0 !important;     /* cancel the old sprite shift */
  border-color:#e00a1c;
  transform:scale(1.06);
}
.tp-leftarrow.default::before,
.tp-rightarrow.default::before{
  font-family:'FontAwesome';
  font-size:24px;
  color:#fff;
  display:block;
  width:54px;
  height:54px;
  line-height:54px;
  text-align:center;
}
.tp-leftarrow.default::before{ content:'\f104'; }   /* fa-angle-left  */
.tp-rightarrow.default::before{ content:'\f105'; }   /* fa-angle-right */

/* --- 7c. First slide hero is an <h1> for SEO --- *
 * The theme's caption sizing is element-qualified to h2, so mirror it
 * for the h1 ("Studio Tatuażu Jelenia Góra") to keep it identical.    */
.tp-resizeme h1{ font-size:44px !important; font-weight:800 !important; }
#main-slider h1.tp-caption,
#main-slider h1.tp-caption > span{ display:block; font-size:44px !important; }
@media (max-width:767px){
  #main-slider .tp-banner h1.tp-caption,
  #main-slider h1.tp-caption > span,
  .tp-resizeme h1{ font-size:26px !important; line-height:1.15em !important; }
}
@media (max-width:380px){
  #main-slider .tp-banner h1.tp-caption,
  #main-slider h1.tp-caption > span,
  .tp-resizeme h1{ font-size:22px !important; }
}

/* --- 7d. SZPILA logo on the first slide --- *
 * White logo with a soft halo so it reads on light or dark photos.
 * The width override (placed after §7a) keeps the mobile caption rule
 * from stretching it to 90vw.                                         */
#main-slider .slide-logo{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  text-align:center !important;
}
#main-slider .slide-logo img{
  display:block;
  width:360px !important;
  max-width:80vw !important;
  height:auto !important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.85))
         drop-shadow(0 0 18px rgba(0,0,0,.55));
}
@media (max-width:767px){
  #main-slider .slide-logo{ width:auto !important; }
  #main-slider .slide-logo img{ width:240px !important; }
}