/*
Theme Name: Turkish Developers Conference
Description: A WordPress theme for the First Exclusive Exhibition & Conference of Leading Turkish Construction Developers. Features a modern landing page design with event registration, countdown timer, and gallery sections.
Version: 1.0
Author: Turkish Conference Team
Text Domain: turkish-conference
*/

/* ---------- Reset & Utilities ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.4;color:#111;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px;width:100%}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;background:#0b5ed7;color:#fff;font-weight:600;border:none;cursor:pointer;transition:all 0.2s ease}
.btn:hover{background:#0a58ca;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#0b5ed7;border:2px solid #0b5ed7}
.btn.ghost:hover{background:#0b5ed7;color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;background:#000;color:#fff;overflow:hidden}
.hero .hero-bg{background-size:cover;background-position:center;height:72vh;min-height:520px;filter:brightness(0.55)}
.hero .overlay{position:absolute;inset:0;display:flex;align-items:center}
.hero .hero-content{position:relative;z-index:5;padding:60px 0}
.hero-layout{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero-content-main{max-width:720px;flex:1}
.hero-info-card{min-width:240px;text-align:right}
.hero .title{font-size:28px;font-weight:800;margin-bottom:8px}
.hero .lead{font-size:18px;margin-bottom:16px;opacity:0.95}
.hero .meta{margin-bottom:18px;display:flex;gap:18px;align-items:center}
.hero .meta .pill{background:rgba(255,255,255,0.08);padding:8px 12px;border-radius:999px;font-weight:600}
.hero .ctas{display:flex;gap:12px;margin-top:12px}

/* Event info card styles */
.event-info-card{width:320px;background:rgba(255,255,255,0.95);color:#1f2937}
.event-info-title{font-weight:800;margin-bottom:6px;color:#1f2937}
.event-info-desc{color:#374151;font-size:14px}
.event-info-spacing{height:14px}
.event-info-prices{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.price-tag{padding:8px;border-radius:8px;font-weight:700;color:#1f2937}
.price-tag.vip{background:#f8f9ff;border:1px solid #e0e7ff}
.price-tag.standard{background:#f3f3f3;border:1px solid #d1d5db}

/* Countdown */
.countdown{display:flex;gap:12px;align-items:center;margin-top:18px}
.countdown .unit{background:rgba(255,255,255,0.06);padding:10px 14px;border-radius:8px;text-align:center;min-width:74px}
.countdown .num{font-size:20px;font-weight:800}
.countdown .label{font-size:12px;opacity:0.85}

/* Two-column layout */
.split{display:grid;grid-template-columns:1fr 420px;gap:36px;padding:48px 0}
@media(max-width:980px){.split{grid-template-columns:1fr;}.hero .hero-bg{height:56vh}}

/* About / Details / Tickets */
.card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 24px rgba(15,23,42,0.06);border:1px solid #e5e7eb}
h2.section-title{font-size:20px;margin-bottom:12px;color:#1f2937}
ul.bullet{list-style:disc;margin-left:18px;color:#374151}
table.event-table{width:100%;border-collapse:collapse}
table.event-table td{padding:8px 6px;border-bottom:1px solid #eee;color:#374151}

/* Tickets */
.ticket{border-radius:10px;padding:18px;margin-bottom:12px;border:1px solid #e6eef9;background:#fff;color:#374151}
.ticket.gold{background:linear-gradient(180deg,#fff8f0,#fff);border-color:#f59e0b}
.ticket .price{font-weight:800;font-size:20px;color:#1f2937}

/* Registration form */
form{display:block}
.form-group{margin-bottom:12px}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.form-toggle-buttons{display:flex;gap:10px;margin-bottom:12px}
input[type=text],input[type=email],input[type=tel],select{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;background:#fff;color:#374151}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select:focus{outline:none;border-color:#0b5ed7;box-shadow:0 0 0 3px rgba(11,94,215,0.1)}
label{display:block;margin-bottom:6px;font-weight:600;color:#1f2937}

/* Sponsor & Partners */
.carousel-wrap{position:relative;overflow:hidden;width:100%}
.carousel{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;padding:12px 0;cursor:grab;user-select:none;width:100%;scroll-behavior:smooth}
.carousel.active{cursor:grabbing}
.carousel .item{flex:0 0 auto;width:160px;height:80px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid #eee;transition:transform 0.2s ease}
.carousel .item:hover{transform:scale(1.05)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:980px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Footer */
footer{padding:28px 0;border-top:1px solid #eee;margin-top:28px}

/* Small utilities */
.muted{color:#6b7280;font-size:14px}
.center{text-align:center}
.space{height:30px}

/* Simple slider controls for carousel */
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border-radius:999px;padding:6px;border:none;cursor:pointer;z-index:10}
.slider-btn.left{left:8px}
.slider-btn.right{right:8px}

/* ---------- Responsive Design ---------- */

/* Tablet styles (768px - 1024px) */
@media (max-width: 1024px) {
  .container {
    padding: 0 16px;
  }
  
  .hero .hero-bg {
    height: 60vh;
    min-height: 480px;
  }
  
  .hero .hero-content {
    padding: 40px 0;
  }
  
  .hero .title {
    font-size: 24px;
  }
  
  .hero .lead {
    font-size: 16px;
  }
  
  .split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
  
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .carousel .item {
    width: 140px;
    height: 70px;
  }
  
  /* Form toggle buttons tablet */
  .form-toggle-buttons {
    flex-direction: row;
    gap: 10px;
  }
  
  .form-toggle-buttons .btn {
    flex: 1;
  }
}

/* Mobile styles (320px - 767px) */
@media (max-width: 767px) {
  /* Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .container {
    padding: 0 12px;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Ensure all elements stay within viewport */
  * {
    max-width: 100%;
  }
  
  /* Hero section mobile */
  .hero .hero-bg {
    height: 50vh;
    min-height: 400px;
  }
  
  .hero .hero-content {
    padding: 24px 0;
  }
  
  .hero-layout {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .hero-content-main {
    max-width: none;
    order: 1;
  }
  
  .hero-info-card {
    min-width: auto;
    text-align: left;
    order: 2;
  }
  
  .hero .title {
    font-size: 20px;
    line-height: 1.3;
  }
  
  .hero .lead {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .hero .meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
  }
  
  .hero .meta .pill {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .hero .ctas {
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }
  
  .hero .ctas .btn {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }
  
  /* Event info card mobile */
  .event-info-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  
  .event-info-prices {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .price-tag {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  
  /* Countdown mobile */
  .countdown {
    gap: 8px;
    margin-top: 16px;
  }
  
  .countdown .unit {
    padding: 8px 10px;
    min-width: 60px;
  }
  
  .countdown .num {
    font-size: 16px;
  }
  
  .countdown .label {
    font-size: 10px;
  }
  
  /* Layout mobile */
  .split {
    gap: 16px;
    padding: 20px 0;
  }
  
  /* Cards mobile */
  .card {
    padding: 16px;
    border-radius: 8px;
  }
  
  h2.section-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  /* Forms mobile */
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  .form-toggle-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-toggle-buttons .btn {
    width: 100%;
    padding: 14px 20px;
  }
  
  input[type=text], 
  input[type=email], 
  input[type=tel], 
  select, 
  textarea {
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Registration form buttons mobile */
  .form-group button {
    width: 100%;
    padding: 14px 20px;
  }
  
  /* Tickets mobile */
  .ticket {
    padding: 16px;
    margin-bottom: 10px;
  }
  
  .ticket .price {
    font-size: 18px;
  }
  
  /* Gallery mobile */
  .gallery {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  /* Carousel mobile */
  .carousel-wrap {
    margin: 0 -12px; /* Extend to container edges */
    padding: 0 12px;
  }
  
  .carousel {
    gap: 12px;
    padding: 12px 0;
  }
  
  .carousel .item {
    width: 120px;
    height: 60px;
    flex-shrink: 0;
  }
  
  .slider-btn {
    padding: 4px;
    min-width: 32px;
    min-height: 32px;
  }
  
  .slider-btn.left {
    left: 4px;
  }
  
  .slider-btn.right {
    right: 4px;
  }
  
  /* Table mobile */
  table.event-table {
    font-size: 14px;
  }
  
  table.event-table td {
    padding: 6px 4px;
  }
  
  /* Footer mobile */
  footer {
    padding: 20px 0;
    margin-top: 20px;
  }
  
  /* Touch-friendly improvements */
  .btn {
    min-height: 44px; /* iOS recommended minimum touch target */
    padding: 14px 20px;
  }
  
  .slider-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
  }
  
  /* Improve carousel touch scrolling */
  .carousel {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Better spacing for mobile */
  .card {
    margin-bottom: 16px;
  }
  
  /* Improve text readability */
  .hero .title {
    word-wrap: break-word;
    hyphens: auto;
  }
  
  /* Better form spacing */
  .form-group {
    margin-bottom: 16px;
  }
  
  /* Improve button spacing */
  .ctas {
    margin-top: 20px;
  }
  
  /* Better countdown spacing */
  .countdown {
    margin-top: 20px;
    justify-content: center;
  }
}

/* Small mobile styles (320px - 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 8px;
    max-width: 100%;
  }
  
  /* Ensure no horizontal overflow */
  .hero-layout,
  .hero-content-main,
  .hero-info-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .hero .title {
    font-size: 18px;
    word-break: break-word;
  }
  
  .hero .lead {
    font-size: 13px;
  }
  
  .hero .meta .pill {
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }
  
  .countdown .unit {
    padding: 6px 8px;
    min-width: 50px;
  }
  
  .countdown .num {
    font-size: 14px;
  }
  
  .countdown .label {
    font-size: 9px;
  }
  
  .card {
    padding: 12px;
    margin: 0 0 16px 0;
  }
  
  h2.section-title {
    font-size: 16px;
  }
  
  .carousel .item {
    width: 100px;
    height: 50px;
  }
  
  /* Fix form elements */
  input[type=text], 
  input[type=email], 
  input[type=tel], 
  select, 
  textarea {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Fix buttons */
  .btn {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Landscape mobile styles */
@media (max-width: 767px) and (orientation: landscape) {
  .hero .hero-bg {
    height: 70vh;
    min-height: 300px;
  }
  
  .hero .hero-content {
    padding: 16px 0;
  }
  
  .hero .title {
    font-size: 18px;
  }
  
  .hero .lead {
    font-size: 13px;
  }
  
  .hero .meta {
    flex-direction: row;
    gap: 12px;
  }
  
  .hero .ctas {
    flex-direction: row;
    gap: 8px;
  }
  
  .hero .ctas .btn {
    flex: 1;
  }
}

/* WordPress specific styles */
.wp-block-group{margin:0}
.wp-block-image{margin:0}
.wp-block-image img{max-width:100%;height:auto}

/* Global overflow prevention */
@media (max-width: 767px) {
  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  /* Specific fixes for common overflow culprits */
  .hero-layout,
  .hero-content-main,
  .hero-info-card,
  .event-info-card,
  .card,
  .form-group,
  .form-row,
  .form-toggle-buttons,
  .ctas,
  .meta,
  .countdown {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Fix text overflow */
  .hero .title,
  .hero .lead,
  .section-title,
  .event-info-title,
  .event-info-desc {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Fix iframe (Google Maps) */
  iframe {
    max-width: 100%;
    width: 100%;
  }
}