/**
 * Layout & Content Centering System
 * King Size Game - Professional Layout
 * Version: 1.0.0
 */

/* ==========================================================================
   GLOBAL LAYOUT CENTERING
   ========================================================================== */

/* Ensure body takes full width */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Main content wrapper */
#page,
.site {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* ==========================================================================
   CONTAINER SYSTEM
   ========================================================================== */

/* Primary container - centered with max width */
.container,
.elementor-container,
.wp-block-group__inner-container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
}

/* Medium container for content */
.container-medium {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Small container for text content */
.container-small {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Full width container */
.container-fluid {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   ELEMENTOR SPECIFIC CENTERING
   ========================================================================== */

/* Center all Elementor sections */
.elementor-section {
  width: 100%;
  margin: 0 auto;
}

/* Boxed sections */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Full width sections with centered content */
.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* Inner sections centering */
.elementor-inner-section .elementor-container {
  max-width: 100%;
  margin: 0 auto;
}

/* Widget centering */
.elementor-widget-wrap {
  width: 100%;
  margin: 0 auto;
}

/* Center widget content */
.elementor-widget-container {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   CONTENT AREAS CENTERING
   ========================================================================== */

/* Main content area */
.site-content,
#content {
  width: 100%;
  margin: 0 auto;
}

.site-main,
#main {
  width: 100%;
 /* max-width: 1400px;*/
  margin: 0 auto;
  padding: 64px 24px;
}

/* Single post/page content */
.entry-content,
.page-content {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

/* Wide aligned blocks */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Full width aligned blocks */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   HEADER & FOOTER CENTERING
   ========================================================================== */

/* Header centering */
.site-header,
.header-premium {
  width: 100%;
}

.header-inner,
.header-content,
.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Footer centering */
.site-footer {
  width: 100%;
}

.footer-inner,
.footer-widgets-grid,
.site-info-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   SECTIONS & COMPONENTS CENTERING
   ========================================================================== */

/* Hero sections */
.hero-banner,
.hero-premium,
.hero-section {
  width: 100%;
  margin: 0 auto;
}

.hero-content,
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Card grids */
.cards-grid,
.grid-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Custom sections */
.section,
.content-section {
  width: 100%;
  margin: 0 auto;
}

.section-inner,
.section-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Center section headers */
.section-header {
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

/* ==========================================================================
   WIDGET AREAS CENTERING
   ========================================================================== */

/* Sidebar widgets */
.widget-area,
.sidebar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.widget {
  margin-bottom: 32px;
}

/* Custom widgets */
.kingsize-widget {
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   FORMS CENTERING
   ========================================================================== */

/* Contact forms */
.wpcf7,
.wpforms-container,
.contact-form {
  max-width: 768px;
  margin: 0 auto;
}

/* Search forms */
.search-form {
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   BUTTONS & CTAs CENTERING
   ========================================================================== */

/* Center aligned buttons */
.text-center .btn,
.text-center .wp-block-button,
.center-button {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* Button groups */
.button-group,
.wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px auto;
}

/* CTA sections */
.cta-section {
  text-align: center;
  max-width: 960px;
  margin: 48px auto;
}

/* ==========================================================================
   MEDIA & EMBEDS CENTERING
   ========================================================================== */

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wp-block-image {
  text-align: center;
}

.wp-block-image img {
  margin-left: auto;
  margin-right: auto;
}

/* Videos and embeds */
.wp-block-embed,
.wp-block-video,
iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Galleries */
.wp-block-gallery,
.gallery {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Margin auto utilities */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

/* Display utilities for centering */
.d-flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   RESPONSIVE CENTERING
   ========================================================================== */

/* Tablet - 992px */
@media (max-width: 992px) {
  .container,
  .elementor-container,
  .site-main,
  .header-inner,
  .footer-inner {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .entry-content,
  .page-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-content {
    padding: 0 20px;
  }
}

/* Mobile - 768px */
@media (max-width: 768px) {
  .container,
  .elementor-container,
  .site-main,
  .header-inner,
  .footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .entry-content,
  .page-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-main {
    padding: 48px 16px;
  }

  .section-inner,
  .section-content {
    padding: 0 16px;
  }

  /* Stack buttons on mobile */
  .button-group {
    flex-direction: column;
    align-items: center;
  }

  .button-group .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* Small mobile - 480px */
@media (max-width: 480px) {
  .container,
  .elementor-container,
  .site-main,
  .header-inner,
  .footer-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .entry-content,
  .page-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-content {
    padding: 0 12px;
  }

  /* Full width buttons on small screens */
  .btn,
  .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   FIXES FOR COMMON ALIGNMENT ISSUES
   ========================================================================== */

/* Fix for Elementor full width sections */
.elementor-section-stretched {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix for WordPress block alignment */
.wp-block-group.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Center block content within full width blocks */
.wp-block-group.alignfull > .wp-block-group__inner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Fix overflow issues */
.site,
#page {
  overflow-x: hidden;
}

/* Ensure proper box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   DEBUG MODE (Comment out in production)
   ========================================================================== */

/* Uncomment to visualize centering during development
.container,
.elementor-container,
.site-main,
.entry-content {
  border: 2px dashed rgba(255, 0, 0, 0.3);
}

.section-inner,
.hero-content {
  border: 2px dashed rgba(0, 255, 0, 0.3);
}
*/