/*
Theme Name: Ritini Handmade Mobile (v9.6)
Theme URI: https://ritinihandmade.pl/
Author: Ritini + ChatGPT
Description: Samodzielny motyw landing (mobile-first): tytuł (Great Vibes), rząd ikon social zaraz pod nazwą, przycisk „Napisz e‑mail” i zdjęcie pod CTA. v9.6 naprawia brak ikon i zdjęcia (twarde domyślne).
Version: 9.6
Requires at least: 6.0
Tested up to: 6.8
License: GNU GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ritini-mobile
Tags: mobile, minimal, landing, one-page
*/

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#f7efe6;
  --ink:#1f1f1f;
  --muted:#6e6e6e;
  --ring:#e8e2da;
  --card:#ffffff;
  --shadow:0 8px 26px rgba(0,0,0,.08);
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
*{box-sizing:border-box}

.wrap{max-width:760px;margin:0 auto;padding:24px 16px 48px;text-align:center}

/* BRAND */
.brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;margin-bottom:8px}
.logo{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:#fff;border:1px solid var(--ring);box-shadow:0 1px 0 rgba(0,0,0,.05);font-weight:700}
.title{font-family:'Great Vibes',cursive;font-size:46px;line-height:1;margin:0}

/* SOCIALS row */
.socials{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 18px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--card);border:1px solid var(--ring);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .12s ease, box-shadow .12s ease}
.socials a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.socials svg{width:22px;height:22px;display:block}

/* CTA */
.cta{display:flex;justify-content:center;margin:12px 0 16px}
.cta a{display:inline-block;padding:14px 24px;border-radius:16px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none;font-weight:600;box-shadow:var(--shadow)}
.cta a:active{transform:translateY(1px)}

/* IMAGE under CTA */
.hero{margin:10px auto 0}
.hero img{width:min(680px,92vw);height:auto;border-radius:18px;border:1px solid var(--ring);box-shadow:var(--shadow);display:inline-block}

/* FOOTER */
.footer{margin-top:20px;color:var(--muted);font-size:.95rem}

/* Tiny phones */
@media(max-width:420px){
  .title{font-size:40px}
  .socials a{width:40px;height:40px}
}
/* ===== Custom Logo sizing ===== */
.brand .custom-logo {
  width: 56px;         /* dostosuj w razie potrzeby: 44–64px */
  height: 56px;        /* utrzymuje proporcje przy object-fit */
  object-fit: contain; /* żadnych zniekształceń */
  border-radius: 10%;  /* jeśli chcesz „okrągłe” logo jak bąbel */
  background: #fff;
  border: 1px solid var(--ring);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  display: block;
}
.brand a.custom-logo-link { display: inline-flex; align-items: center; }