/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Child theme for Hello Elementor by Super Tire Service
Author: Super Tire Service
Author URI: https://sts-sa.gr
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ===============================
   STS – Global Variables (SOURCE OF TRUTH)
   =============================== */
:root{
  --sts-blue: #003366;
  --sts-yellow: #F6E500;
  --sts-white: #ffffff;
  --sts-black: #000000;
  --sts-lightblack: #3C3C3C;
  --sts-grey: #575757;
  --sts-lightgrey: #878787;
  --sts-verylightgrey: #B2B2B2;

  --header-h: 90px; /* desktop header height (used by header + hero offset) */

  /* Brand (default = STS/Falken base) */
  --brand-primary: var(--sts-blue);
  --brand-accent: var(--sts-yellow);
  --brand-text: #222;
}

/* ===============================
   STS – Global Typography (Elementor Free “Globals”)
   =============================== */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--sts-lightblack);
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color: var(--sts-blue);
}

/* Links */
a { color: var(--sts-blue); }
a:hover { color: var(--sts-yellow); }

/* Buttons (γενικό default – όπου δεν υπάρχει ειδικό class) */
.elementor-button{
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ===============================
   Brand Theme Overrides (per page wrapper class)
   =============================== */
.sumitomo-theme { --brand-primary:#004b8d; --brand-accent:#8fd3ff; }
.dynamo-theme   { --brand-primary:#cc0000; --brand-accent:#ffcc00; }
.iris-theme     { --brand-primary:#005baa; --brand-accent:#ffd700; }
.truck-theme    { --brand-primary:#ffcc00; --brand-accent:#111; }

/* ===============================
   STS Product Features Cards
   =============================== */
.sts-features{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:30px;
  flex-wrap:wrap;
  margin:60px auto;
  max-width:1200px;
}
.sts-feature-card{
  flex:1 1 30%;
  background:#fff;
  border-radius:6px;
  box-shadow:0 4px 15px rgba(0,0,0,0.08);
  padding:40px 25px 30px;
  text-align:center;
  position:relative;
  transition:all .3s ease;
}
.sts-feature-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:6px;
  height:100%;
  background:var(--brand-primary);
  border-top-left-radius:6px;
  border-bottom-left-radius:6px;
}
.sts-feature-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.sts-feature-card img{ width:90px; height:auto; margin-bottom:15px; }
.sts-feature-card h3{
  font-size:20px;
  font-weight:800;
  color:var(--brand-primary);
  margin-bottom:20px;
  text-transform:uppercase;
}
.sts-feature-card h5{
  color:var(--brand-primary);
  font-size:14px;
  font-weight:800;
  margin-top:18px;
  margin-bottom:4px;
}
.sts-feature-card p,
.sts-feature-card li{
  color:var(--brand-text);
  font-size:15px;
  line-height:1.6;
  margin-bottom:8px;
}
@media (max-width:1024px){
  .sts-features{ gap:20px; }
  .sts-feature-card{ flex:1 1 45%; }
}
@media (max-width:768px){
  .sts-feature-card{
    flex:1 1 100%;
    padding:30px 20px;
  }
  .sts-feature-card h3{ font-size:18px; }
}

/* ===============================
   STS TablePress Styling (Responsive)
   =============================== */
.tablepress{
  width:100%;
  max-width:1100px;
  margin:40px auto;
  border-collapse:collapse;
  font-family:'Roboto', sans-serif;
  font-size:13px;
  color:var(--sts-blue);
  text-align:center;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* Header */
.tablepress thead th{
  background-color:var(--sts-blue);
  color:#fff;
  font-weight:600;
  padding:12px 10px;
  text-transform:uppercase;
  letter-spacing:.2px;
  white-space:nowrap;
  border:none;
}

/* Rows */
.tablepress tbody td{
  background-color:#fff;
  border-bottom:1px solid #e0e0e0;
  padding:9px 10px;
  transition:background-color .3s ease;
}
.tablepress tbody tr:nth-child(even) td{ background-color:#f9f9f9; }
.tablepress tbody tr:hover td{ background-color: rgba(246,229,0,0.15); } /* uses STS yellow tone */

/* Footer */
.tablepress tfoot th{
  background-color:var(--sts-blue);
  color:#fff;
  font-weight:600;
  padding:9px 10px;
  border:none;
}

/* Alignment */
.tablepress td:first-child,
.tablepress th:first-child{
  text-align:left;
  padding-left:15px;
}
.tablepress td:last-child{
  text-align:left;
  padding-right:15px;
}

/* Responsive wrapper for mobile */
@media (max-width:991px){
  .elementor-widget-shortcode .tablepress{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    border:1px solid #ddd;
    border-radius:8px;
    -webkit-overflow-scrolling:touch;
  }

  .tablepress thead th,
  .tablepress tbody td{
    white-space:nowrap;
    font-size:12px;
  }

  .tablepress::after{
    content:"\2190 scroll \2192";
    display:block;
    text-align:center;
    font-size:13px;
    color:var(--sts-blue);
    opacity:.7;
    padding:6px 0 2px;
  }
}
@media (min-width:1025px){
  .tablepress::after{ display:none !important; }
}

/* NOTE: Αφαιρέθηκε το :contains("POR") γιατί δεν υποστηρίζεται σε CSS */

/* (Optional) Row fade-in */
.tablepress tbody tr{
  animation: fadeRow .4s ease both;
}
@keyframes fadeRow{
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ===============================
   STS Product Info + Performance Combo
   =============================== */
.sts-product-section{
  max-width:1200px;
  margin:60px auto;
  padding:40px 20px;
  display:flex;
  flex-direction:column;
  gap:60px;
}
.sts-product-section .product-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.sts-product-section .product-info > div{
  flex:1 1 30%;
  text-align:center;
}
.sts-product-section .sts-performance-icons{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:30px;
  text-align:center;
}
.sts-performance-icons img{
  width:70px;
  height:auto;
  margin-bottom:8px;
}
@media (max-width:768px){
  .sts-product-section{ padding:30px 15px; gap:40px; }
  .sts-product-section .product-info{
    flex-direction:column;
    align-items:center;
  }
  .sts-product-section .product-info > div{ flex:1 1 100%; }
}

/* ===============================
   STS Product Hero – Falken (uses STS yellow = #F6E500 now)
   =============================== */
.sts-hero{
  position:relative;
  min-height:80vh;
  padding:80px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.sts-hero .hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:0 20px;
}
.sts-hero .hero-content h1{
  font-size:42px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:10px;
  color:#fff;
}
.sts-hero .hero-content h4{
  font-size:18px;
  font-weight:400;
  margin-bottom:24px;
  color:#fff;
}

/* Falken theme fallback */
.sts-hero.falken-theme{ background-color: var(--sts-blue); }

.sts-hero.falken-theme .elementor-background-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%) !important;
}

/* CTA */
.sts-hero.falken-theme .elementor-button{
  background: var(--sts-yellow) !important;
  color: var(--sts-blue) !important;
  border: 2px solid var(--sts-yellow) !important;
  font-weight:700;
  padding:10px 30px;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:all .3s ease;
}
.sts-hero.falken-theme .elementor-button:hover{
  background: var(--sts-blue) !important;
  color: #ffffff !important;
  border-color: var(--sts-blue) !important;
}

@media (max-width:768px){
  .sts-hero{ min-height:70vh; padding:60px 0; }
  .sts-hero .hero-content h1{ font-size:30px; }
  .sts-hero .hero-content h4{ font-size:16px; }
}

/* ===============================
   STS Brand Category Cards
   =============================== */
.sts-brand-cards{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:30px;
  flex-wrap:wrap;
  max-width:1200px;
  margin:80px auto;
}
.sts-brand-card{
  flex:1 1 30%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  text-align:center;
  padding:30px 20px;
  transition:all .3s ease;
}
.sts-brand-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.sts-brand-card img{
  max-width:100%;
  height:auto;
  margin-bottom:20px;
}
.sts-brand-card h3{
  color:var(--brand-primary);
  font-size:20px;
  font-weight:800;
  margin-bottom:15px;
}
.sts-brand-card .elementor-button{
  background:var(--brand-primary);
  color:#fff;
  border:2px solid var(--brand-primary);
  padding:10px 24px;
  border-radius:4px;
  transition:all .3s ease;
}
.sts-brand-card .elementor-button:hover{
  background:var(--brand-accent);
  color:var(--brand-primary);
  border-color:var(--brand-accent);
}
@media (max-width:768px){
  .sts-brand-card{ flex:1 1 100%; }
}

/* ===============================
   STS Brand About Section
   =============================== */
.sts-brand-about{
  max-width:1200px;
  margin:100px auto;
  display:flex;
  gap:50px;
  align-items:center;
  flex-wrap:wrap;
}
.sts-brand-about h2{
  color:var(--brand-primary);
  font-size:32px;
  font-weight:800;
  margin-bottom:20px;
}
.sts-brand-about p{
  font-size:16px;
  line-height:1.8;
  color:var(--brand-text);
  margin-bottom:20px;
}
.sts-brand-about .elementor-button{
  background:var(--brand-primary);
  color:#fff !important;
  border:2px solid var(--brand-primary);
  border-radius:0;
  padding:10px 28px;
  font-weight:800;
  transition:all .3s ease;
}
.sts-brand-about .elementor-button:hover{
  background:var(--brand-accent);
  color:var(--brand-primary) !important;
  border-color:var(--brand-accent);
  transform:translateY(-3px);
  box-shadow:0 5px 15px rgba(0,0,0,0.15);
}
@media (max-width:991px){
  .sts-brand-about{
    flex-direction:column;
    text-align:center;
  }
  .sts-brand-about h2{ font-size:26px; }
  .sts-brand-about p{ font-size:15px; }
}

/* ===============================
   TIRES Page – Brand boxes (single source of truth)
   =============================== */
.tires-brands .brand-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.tires-brands .brand-card{
  flex:1 1 calc((100% - 40px) / 3);
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  box-sizing:border-box;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.tires-brands .brand-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.tires-brands .brand-card img{
  max-height:54px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@media (max-width:1024px){
  .tires-brands .brand-card{ flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width:767px){
  .tires-brands .brand-card{
    flex-basis:100%;
    min-height:120px;
    padding:22px;
  }
  .tires-brands .brand-card img{ max-height:48px; }
}

/* Scroll offset for Brands anchor (sticky header fix) */
#brands{ scroll-margin-top: 110px; }