/*
 * Toonaweza site-wide overrides. Loaded last in layouts/app.blade.php, after Bootstrap.
 * Presentation only: no layout markup depends on this file.
 */

/* ---- Full-width layout -------------------------------------------------
 * Bootstrap's .container caps the width (1140/1320px), which leaves empty
 * bands left and right on wide screens. Let it span the full width, and keep
 * a small fluid gutter so text never touches the screen edge on phones:
 *   ~12px on small phones, growing to 40px on large desktops.
 * Pages that set their own max-width inline (forms, legal pages, checkout)
 * keep it, because inline styles win over this rule; they stay readable.
 */
:root {
    --tt-gutter: clamp(12px, 2.5vw, 40px);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 100%;
    padding-left: var(--tt-gutter);
    padding-right: var(--tt-gutter);
}

/* The header/nav row used .container.px-0, so give it the same gutter */
.tt-header .container.px-0 {
    padding-left: var(--tt-gutter) !important;
    padding-right: var(--tt-gutter) !important;
}

/* Top info bar spans edge to edge; round only the inner corners */
.tt-header .topbar {
    border-radius: 0 0 24px 24px !important;
}

/* Homepage banner: fill the full width once, never tile (it repeated on wide screens) */
.hero-header {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ---- Footer (resources/views/partials/footer.blade.php) ---------------- */
.tt-footer {
    --f-bg: #2b2350;
    --f-bg2: #3a2a75;
    --f-text: #e9e5ff;
    --f-muted: #b9b2e0;
    --f-accent: #ff4880;
    --f-yellow: #ffc83d;
    position: relative;
    margin-top: 90px;
    color: var(--f-text);
    background: radial-gradient(1200px 400px at 85% 0%, rgba(123, 47, 247, .45), transparent 60%),
                radial-gradient(900px 380px at 5% 100%, rgba(255, 72, 128, .25), transparent 60%),
                linear-gradient(180deg, var(--f-bg2), var(--f-bg));
    font-size: .95rem;
}
.tt-footer-wave { position: absolute; top: -59px; left: 0; right: 0; height: 60px; line-height: 0; }
.tt-footer-wave svg { width: 100%; height: 100%; transform: scaleY(-1); }
.tt-footer-wave path { fill: var(--f-bg2); }
.tt-footer-stars span {
    position: absolute; color: var(--f-yellow); opacity: .35; font-size: 18px;
    animation: tt-twinkle 3.2s ease-in-out infinite;
}
.tt-footer-stars span:nth-child(2n) { animation-delay: -1.4s; font-size: 13px; color: #fff; }
@keyframes tt-twinkle { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.15); } }

.tt-footer-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tt-footer-main { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 40px; }
.tt-footer .tt-footer-logo { max-width: 170px; }
.tt-footer-blurb { color: var(--f-muted); line-height: 1.7; max-width: 380px; }

.tt-footer-heading {
    font-family: Fredoka, sans-serif; font-size: 1.15rem; color: #fff; margin-bottom: 16px;
    display: inline-block; position: relative; padding-bottom: 8px;
}
.tt-footer-heading::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--f-accent), var(--f-yellow));
}

.tt-footer a { color: var(--f-text); text-decoration: none; }
.tt-footer a:hover { color: #fff; }
.tt-footer a:focus-visible { outline: 3px solid var(--f-yellow); outline-offset: 3px; border-radius: 6px; }

.tt-footer-links, .tt-footer-contact, .tt-footer-posts { list-style: none; padding: 0; margin: 0; }
.tt-footer-links li { margin-bottom: 10px; }
.tt-footer-links a { color: var(--f-muted); display: inline-flex; align-items: center; min-height: 28px; transition: color .2s ease, transform .2s ease; }
.tt-footer-links a::before { content: "›"; margin-right: 8px; color: var(--f-accent); font-weight: 700; transition: transform .2s ease; }
.tt-footer-links a:hover { color: #fff; transform: translateX(3px); }

.tt-footer-contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--f-muted); }
.tt-footer-contact i {
    flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: var(--f-yellow); font-size: .85rem; margin-top: -4px;
}
.tt-footer-contact a { color: var(--f-text); }
.tt-footer-hours {
    margin-top: 6px; padding: 12px 14px; border-radius: 14px; font-size: .85rem; line-height: 1.7;
    background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .18); color: var(--f-muted);
}

.tt-footer-posts li { margin-bottom: 12px; }
.tt-footer-posts a { display: flex; align-items: center; gap: 12px; }
.tt-footer-posts img {
    width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, .2); transition: transform .25s ease, border-color .25s ease;
}
.tt-footer-posts span {
    font-weight: 600; font-size: .88rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-footer-posts a:hover img { transform: rotate(-4deg) scale(1.06); border-color: var(--f-yellow); }

.tt-footer-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    font-weight: 600; font-size: .9rem; color: #fff !important;
    background: linear-gradient(90deg, var(--f-accent), #7b2ff7);
    box-shadow: 0 8px 20px rgba(255, 72, 128, .3); transition: transform .2s ease, box-shadow .2s ease;
}
.tt-footer-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 72, 128, .4); }
.tt-footer-cta-ghost { background: rgba(255, 255, 255, .1); box-shadow: none; border: 1px solid rgba(255, 255, 255, .25); }

.tt-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-footer .tt-social {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s ease;
}
.tt-footer .tt-social:hover { transform: translateY(-4px) rotate(-6deg); background: var(--f-accent); }

.tt-footer-bottom {
    position: relative; border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 16px 0; font-size: .85rem; color: var(--f-muted); background: rgba(0, 0, 0, .15);
}
.tt-footer-bottom a { color: #fff; border-bottom: 1px dashed rgba(255, 255, 255, .4); }

@media (max-width: 767.98px) {
    .tt-footer { margin-top: 60px; }
    .tt-footer-wave { top: -39px; height: 40px; }
    .tt-footer-main { padding-top: 36px; padding-bottom: 24px; }
    .tt-footer .tt-footer-logo { max-width: 140px; }
}
@media (max-width: 1199.98px) {
    .tt-footer-stars { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-footer-stars span { animation: none; }
    .tt-footer *, .tt-footer *::before { transition: none !important; }
}

/* Never allow sideways scrolling on small screens */
html,
body {
    overflow-x: hidden;
}