/* ============================================================
   Yoo Jean Korean Hair Salon — Page width lock
   Constrains the theme's own content (page title, classic-editor
   body, Elementor sections, footer) to the same centred column
   the redesigned sections use, so every page reads as one narrow
   column on desktop exactly as it does on a phone.

   Loaded after the theme CSS. Scoped to the plugin's preview.
   ============================================================ */

:root {
  --yj-col: 560px;
  --yj-col-pad: 24px;
}

/* ---------- Page title band ---------- */

.page-title {
  padding: 24px 0 20px !important;
}

.page-title .container {
  max-width: var(--yj-col) !important;
  margin: 0 auto !important;
  padding-left: var(--yj-col-pad) !important;
  padding-right: var(--yj-col-pad) !important;
  width: 100% !important;
  text-align: center;
}

.page-title h1 {
  font-family: Oswald, sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Classic-editor content (PRICE) ---------- */

.wn-section > .container {
  max-width: var(--yj-col) !important;
  margin: 0 auto !important;
  padding-left: var(--yj-col-pad) !important;
  padding-right: var(--yj-col-pad) !important;
  width: 100% !important;
}

.wn-section > .container > p,
.wn-section > .container > h1,
.wn-section > .container > h2,
.wn-section > .container > h3 {
  text-align: center;
}

.wn-section > .container img {
  max-width: 100%;
  height: auto;
}

/* ---------- Elementor pages (HOME, LOCATION) ---------- */

.elementor-section > .elementor-container,
.elementor-section .elementor-container {
  max-width: var(--yj-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Elementor widgets that carry the page body text */
.elementor-widget-text-editor,
.elementor-widget-text-editor .elementor-widget-container {
  text-align: center;
}

.elementor-widget-image img {
  max-width: 100%;
  height: auto;
}

/* ---------- Footer ---------- */

.wn-footer .elementor-container,
.wn-footer .container {
  max-width: var(--yj-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Comments (hidden on PRICE but kept sane) ---------- */

.comments-wrap,
.comment-respond {
  max-width: var(--yj-col);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--yj-col-pad);
  padding-right: var(--yj-col-pad);
}

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

@media (max-width: 720px) {
  :root { --yj-col-pad: 16px; }

  .page-title { padding: 18px 0 14px !important; }
  .page-title h1 { font-size: 19px !important; }
}

/* Full-bleed backgrounds must stay full width — only inner
   containers are constrained, never the section wrappers. */
.wn-section,
.elementor-section,
.page-title,
.wn-footer {
  max-width: none !important;
}