/*
 * public/assets/web-builder/theme-starter.css
 *
 * The one built-in starter theme.
 *
 * It lives here, not beside modules/web-builder/theme/starter/*.php, because a
 * theme's stylesheet must be web-readable while its templates must not be
 * web-reachable at all. public/ is the only web-readable tree on this platform
 * and only public/index.php executes, so the two halves of a theme are
 * necessarily split. That is a platform property, not a preference - the
 * reference's theme directory was both, which is why its dynamic-style.php
 * could boot the whole application over HTTP.
 *
 * Written fresh rather than extracted from themes/Default/style.css (535
 * lines), which styles a blog layout, a menu tree and a header/footer builder
 * that the MVP does not have.
 *
 * Scoped under .wb-site so it can never leak into the admin shell.
 */

/* Zemin renkleri :where() içinde: bu seçicinin ÖZGÜLLÜĞÜ SIFIRDIR, yani
   müşterinin yapıştırdığı "body{background:...}" gibi sade bir kural bunu
   yener. Önceden ".wb-site{background:#fff}" yazıyordu; sınıf seçicisi eleman
   seçicisini yendiği için müşterinin kendi zemin rengi hiç görünmüyordu ve
   sayfa keskin beyaz kalıyordu.

   Renk de yumuşatıldı: #fff yerine kırık beyaz. */
:where(.wb-site) { background: #faf9f6; }
:where(.wb-site-header) { background: #faf9f6; }

.wb-site {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a202c;
}

.wb-site *,
.wb-site *::before,
.wb-site *::after { box-sizing: border-box; }

.wb-site img { max-width: 100%; height: auto; }

.wb-site-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Preview banner --------------------------------------------------- */

.wb-preview-banner {
    padding: 8px 15px;
    background: #fefcbf;
    border-bottom: 1px solid #f6e05e;
    color: #744210;
    font-size: .9em;
    text-align: center;
}

/* --- Header ----------------------------------------------------------- */

.wb-site-header {
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}

.wb-site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.wb-site-brand {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
}

.wb-site-tagline {
    margin: 0;
    color: #718096;
    font-size: .95em;
}

/* --- Main / builder output -------------------------------------------- */

.wb-site-main { min-height: 40vh; }

.wb-site-empty {
    padding: 60px 0;
    color: #718096;
    text-align: center;
}

.wb-content { width: 100%; }

.wb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* The renderer emits per-column flex widths inline. Below the tablet
 * breakpoint they all become full width - the same rule the reference
 * renderer injected as an inline <style> block on every single render. */
@media (max-width: 991px) {
    .wb-row { flex-wrap: wrap !important; }
    .wb-col { flex: 0 0 100% !important; max-width: 100% !important; }
}

.wb-heading { margin: 0 0 .5em; line-height: 1.25; }
.wb-text { margin: 0 0 1em; }

/* HTML widget'ı. Müşterinin girdiği işaretleme temizlenmiş olarak buraya
   basılıyor; burada yalnızca sayfanın geri kalanıyla uyumlu boşluk ve
   taşma davranışı veriliyor. Geniş tablo, sayfayı yana kaydırmak yerine
   kendi içinde kayar. */
.wb-html { margin: 0 0 1em; overflow-x: auto; }
.wb-html img { max-width: 100%; height: auto; }
.wb-html table { border-collapse: collapse; width: 100%; }
.wb-html th, .wb-html td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; }
.wb-html pre { overflow-x: auto; background: #f7fafc; padding: 10px; border-radius: 4px; }
.wb-html blockquote { margin: 0 0 1em; padding-left: 12px; border-left: 3px solid #e2e8f0; color: #4a5568; }
.wb-image { margin: 0 0 1em; }

.wb-button-wrap { margin: 0 0 1em; }

.wb-button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    background: #2b6cb0;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

.wb-button:hover { background: #2c5282; }

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

.wb-site-footer {
    margin-top: 40px;
    padding: 24px 0;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
    color: #4a5568;
    font-size: .9em;
}

.wb-site-footer p { margin: 4px 0; }

/* Alt bilgi hizalaması. Site Ayarları'ndaki "Hizalama" seçimi
   theme/starter/footer.php tarafından sınıf olarak veriliyor. */
.wb-site-footer-left   { text-align: left; }
.wb-site-footer-center { text-align: center; }
.wb-site-footer-right  { text-align: right; }