@import 'tailwindcss';

/*
|--------------------------------------------------------------------------
| Public Website Design System
|--------------------------------------------------------------------------
| Standalone stylesheet for school public websites. School branding is
| injected as CSS variables (--ws-primary, --ws-font-heading, ...) by the
| website layout, so every theme stays consistent while remaining fully
| customizable per tenant.
*/

@theme {
    --font-ws-heading: var(--ws-font-heading);
    --font-ws-body: var(--ws-font-body);
}

.ws-body {
    font-family: var(--ws-font-body);
}

.ws-heading {
    font-family: var(--ws-font-heading);
}

.ws-primary-bg { background-color: var(--ws-primary); }
.ws-primary-text { color: var(--ws-primary); }
.ws-secondary-bg { background-color: var(--ws-secondary); }
.ws-secondary-text { color: var(--ws-secondary); }
.ws-accent-bg { background-color: var(--ws-accent); }
.ws-accent-text { color: var(--ws-accent); }
.ws-border-primary { border-color: var(--ws-primary); }

.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.ws-btn-primary {
    background-color: var(--ws-primary);
    color: #fff;
    box-shadow: 0 10px 25px -10px color-mix(in srgb, var(--ws-primary) 60%, transparent);
}
.ws-btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ws-btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
}
.ws-btn-outline:hover { background: rgba(255, 255, 255, 0.15); }
.ws-btn-ghost {
    border: 2px solid color-mix(in srgb, var(--ws-primary) 30%, transparent);
    color: var(--ws-primary);
}
.ws-btn-ghost:hover { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }

.ws-hero-gradient {
    background:
        radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--ws-accent) 55%, transparent), transparent),
        radial-gradient(50rem 28rem at -10% 110%, color-mix(in srgb, var(--ws-secondary) 45%, transparent), transparent),
        linear-gradient(135deg, var(--ws-primary), color-mix(in srgb, var(--ws-primary) 70%, #000));
}

.ws-card {
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid rgb(241 245 249);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.04);
    transition: all 0.25s ease;
}
.ws-card:hover {
    box-shadow: 0 20px 40px -20px rgb(15 23 42 / 0.18);
    transform: translateY(-3px);
}

.ws-prose h2 { font-size: 1.35rem; font-weight: 700; margin: 1.75em 0 0.6em; color: #0f172a; }
.ws-prose h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5em 0 0.5em; color: #0f172a; }
.ws-prose p { margin: 0.9em 0; line-height: 1.8; }
.ws-prose ul, .ws-prose ol { margin: 1em 0 1em 1.4em; list-style: disc; line-height: 1.8; }
.ws-prose ol { list-style: decimal; }
.ws-prose a { color: var(--ws-primary); text-decoration: underline; }
.ws-prose img { border-radius: 0.75rem; margin: 1.25em 0; max-width: 100%; height: auto; }
.ws-prose blockquote {
    border-left: 4px solid var(--ws-accent);
    padding-left: 1rem;
    font-style: italic;
    color: #475569;
    margin: 1.25em 0;
}

/* Accessible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ws-accent) 70%, white);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   Kensol (Premium) theme
   Applied when the school selects the "kensol" layout. Everything is
   driven by the per-school CSS variables, so brand colours stay dynamic.
---------------------------------------------------------------------- */

/* Hover state helpers used with Tailwind pseudo-variants on custom classes */
.hover\:ws-primary-text:hover { color: var(--ws-primary); }
.hover\:ws-primary-text:focus { color: var(--ws-primary); }
.hover\:ws-secondary-text:hover { color: var(--ws-secondary); }
.hover\:ws-secondary-text:focus { color: var(--ws-secondary); }
.hover\:bg-ws-primary:hover { background-color: var(--ws-primary); }
.group:hover .group-hover\:ws-primary-text { color: var(--ws-primary); }
.group:hover .group-hover\:ws-accent-text { color: var(--ws-accent); }
.group:focus-within .group-hover\:ws-primary-text { color: var(--ws-primary); }

/* Coloured left borders for vision / mission cards */
.ws-accent-border { border-left-color: var(--ws-accent); }
.ws-secondary-border { border-left-color: var(--ws-secondary); }

/* Decorative gold offset frame used on imagery */
.kensol-frame {
    position: relative;
}
.kensol-frame::before {
    content: '';
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 2px solid var(--ws-secondary);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.85;
}

/* Hero readability overlay (over a slide image) */
.kensol-hero-overlay {
    background:
        linear-gradient(to right, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.78) 45%, rgba(2, 6, 23, 0.35) 100%),
        linear-gradient(to top, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.1));
}

/* Subtle grid texture for dark bands */
.kensol-hero-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
}

/* Footer newsletter input focus */
.ws-newsletter-input:focus {
    border-color: var(--ws-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-accent) 35%, transparent);
}

/* ----------------------------------------------------------------------
   Photo lightbox
   Full-screen, image-focused modal shared by the homepage gallery and the
   full Gallery page. Overlays the background and locks page scroll while
   open; closes via the close button, backdrop click or Escape.
---------------------------------------------------------------------- */
.ws-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.92);
    padding: 1rem;
    cursor: pointer;
}
.ws-lightbox.hidden { display: none; }

.ws-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ws-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.06);
}

.ws-lightbox-stage {
    max-width: 96vw;
    max-height: 92vh;
    cursor: default;
}
.ws-lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ws-lightbox-figure img {
    max-width: 96vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}
.ws-lightbox-caption {
    color: #e2e8f0;
    font-size: 0.875rem;
    text-align: center;
    max-width: 80vw;
}

/* ----------------------------------------------------------------------
   Floating action buttons (WhatsApp + Back-to-top)
   Fixed in the lower-right, stacked so they never overlap: WhatsApp sits
   at the bottom and Back-to-top sits just above it when both are shown.
---------------------------------------------------------------------- */
.ws-float-btn {
    position: fixed;
    right: 1.25rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ws-float-btn:hover { transform: translateY(-2px); }
.ws-float-btn.hidden { display: none; }

.ws-float-whatsapp {
    bottom: 1.25rem;
    width: 3.25rem;
    height: 3.25rem;
    background: #25d366;
    color: #fff;
}
.ws-float-whatsapp:hover { background: #1ebe5b; }
.ws-float-whatsapp svg { width: 1.75rem; height: 1.75rem; }

.ws-float-top {
    bottom: 5.25rem; /* sits above the WhatsApp button */
    width: 2.75rem;
    height: 2.75rem;
    background: var(--ws-primary);
    color: #fff;
}
.ws-float-top:hover { background: color-mix(in srgb, var(--ws-primary) 85%, #000); }
.ws-float-top svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 480px) {
    .ws-float-btn { right: 1rem; }
    .ws-float-whatsapp { bottom: 1rem; }
    .ws-float-top { bottom: 4.9rem; }
}