/* ============================================================
   NURSERY GUARDIAN v2 — nursery.css
   Central design token sheet.
   All colour, spacing, typography, and animation primitives
   are declared here as CSS custom properties.
   Component files consume these variables exclusively —
   no raw colour values outside this file.
   Location: /var/www/css/nursery.css
   ============================================================ */

/* ── @imports ───────────────────────────────────────────────
   Keep import declarations at the absolute top of the sheet.
   ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');


/* ── :root — design token registry ─────────────────────────
   Naming convention: --ng-{category}-{variant}
   ng = Nursery Guardian
   ─────────────────────────────────────────────────────────── */
:root {

    /* ── Palette: core pinks ── */
    --ng-pink-50:   #fff0f7;   /* near-white blush, card backgrounds  */
    --ng-pink-100:  #ffe8f4;   /* very light blush                    */
    --ng-pink-200:  #ffd6eb;   /* soft petal                          */
    --ng-pink-300:  #ffcce8;   /* light candy                         */
    --ng-pink-400:  #ffb3d9;   /* border / accent ring                */
    --ng-pink-500:  #ff9ed0;   /* medium accent                       */
    --ng-pink-600:  #ff69b4;   /* hot pink — primary brand            */
    --ng-pink-700:  #e0458b;   /* text on light surfaces              */
    --ng-pink-800:  #c71585;   /* medium dark, sub-text               */
    --ng-pink-900:  #c2185b;   /* nav links, hover emphasis           */
    --ng-pink-950:  #880e4f;   /* darkest — body copy on light bg     */

    /* ── Palette: accent / background gradients ── */
    --ng-bg-radial-a:   #ffd6e8;
    --ng-bg-radial-b:   #ffb3d9;
    --ng-bg-radial-c:   #fce4f3;
    --ng-bg-radial-d:   #ffcce5;
    --ng-bg-linear-start: #ffe0f0;
    --ng-bg-linear-mid:   #ffd6eb;
    --ng-bg-linear-end:   #ffd0e8;

    /* ── Palette: semantic ── */
    --ng-color-danger:  #b71c1c;
    --ng-color-warn:    #e65100;
    --ng-color-safe:    #2e7d32;
    --ng-color-white:   #ffffff;
    --ng-color-surface: #ffffff;

    /* ── Typography ── */
    --ng-font-primary:  'Nunito', cursive, sans-serif;
    --ng-font-size-xs:  0.75rem;
    --ng-font-size-sm:  0.85rem;
    --ng-font-size-md:  1rem;
    --ng-font-size-lg:  1.15rem;
    --ng-font-size-xl:  1.6rem;
    --ng-font-size-2xl: 1.8rem;
    --ng-font-size-h1:  2.625rem;   /* 42px */
    --ng-font-size-icon: 6.25rem;   /* 100px main icon */

    --ng-font-weight-regular: 400;
    --ng-font-weight-bold:    700;
    --ng-font-weight-black:   900;

    --ng-line-height-body:   1.8;
    --ng-letter-spacing-h1: -0.5px;
    --ng-letter-spacing-h2: -0.3px;

    /* ── Spacing ── */
    --ng-space-xs:   4px;
    --ng-space-sm:   8px;
    --ng-space-md:   16px;
    --ng-space-lg:   24px;
    --ng-space-xl:   40px;
    --ng-space-2xl:  60px;

    /* ── Border radius ── */
    --ng-radius-sm:   8px;
    --ng-radius-md:   12px;
    --ng-radius-lg:   20px;
    --ng-radius-xl:   30px;
    --ng-radius-pill: 9999px;

    /* ── Border widths ── */
    --ng-border-thin:   2px;
    --ng-border-medium: 3px;
    --ng-border-thick:  8px;

    /* ── Shadows ── */
    --ng-shadow-card:
        0 20px 60px rgba(255, 105, 180, 0.4),
        0 0 0 2px #ffe0f0 inset;

    --ng-shadow-nav:
        0 4px 20px rgba(255, 105, 180, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 105, 180, 0.2);

    --ng-shadow-navlink:
        0 2px 6px rgba(255, 105, 180, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    --ng-shadow-navlink-hover:
        0 4px 14px rgba(255, 105, 180, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    --ng-shadow-dropdown:
        0 12px 36px rgba(255, 105, 180, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    --ng-shadow-icon:
        drop-shadow(0 8px 16px rgba(255, 105, 180, 0.35));

    --ng-text-shadow-h1:
        2px 2px 0px #ffd6eb,
        4px 4px 8px rgba(255, 105, 180, 0.3);

    --ng-text-shadow-brand:
        1px 1px 0 #fff,
        2px 2px 6px rgba(255, 105, 180, 0.3);

    /* ── Animations: durations & easing ── */
    --ng-anim-duration-fast:   0.15s;
    --ng-anim-duration-std:    0.18s;
    --ng-anim-duration-slow:   0.3s;
    --ng-anim-duration-pulse:  3s;
    --ng-anim-duration-twinkle: 2s;
    --ng-anim-duration-float:   3s;
    --ng-anim-duration-bob:     2s;
    --ng-anim-ease-std:    ease-in-out;

    /* ── Z-index ladder ── */
    --ng-z-base:     0;
    --ng-z-content:  1;
    --ng-z-overlay:  10;
    --ng-z-nav:      100;
    --ng-z-modal:    200;

    /* ── Nav dimensions ── */
    --ng-nav-height:   70px;
    --ng-nav-padding:  10px 0;

    /* ── Card / portal ── */
    --ng-portal-min-width: 780px;
    --ng-portal-width:     60vw;
    --ng-panel-left-width: 38%;
    --ng-panel-left-min-height: 680px;
}


/* ============================================================
   KEYFRAME REGISTRY
   All project animations declared once, referenced everywhere.
   ============================================================ */
@keyframes ng-gentle-pulse {
    0%,  100% { transform: scale(1);    }
    50%        { transform: scale(1.02); }
}

@keyframes ng-twinkle {
    0%,  100% { opacity: 1;   transform: scale(1)   rotate(0deg);  }
    50%        { opacity: 0.4; transform: scale(0.8) rotate(15deg); }
}

@keyframes ng-float {
    0%,  100% { transform: translateY(0px);   }
    50%        { transform: translateY(-15px); }
}

@keyframes ng-hearts-bob {
    0%,  100% { transform: translateY(0);   }
    50%        { transform: translateY(-5px); }
}


/* ============================================================
   BASE RESET & BODY
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(ellipse at 20% 20%, var(--ng-bg-radial-a) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 10%, var(--ng-bg-radial-b) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 80%, var(--ng-bg-radial-c) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 90%, var(--ng-bg-radial-d) 0%, transparent 45%),
        linear-gradient(
            160deg,
            var(--ng-bg-linear-start)  0%,
            var(--ng-bg-linear-mid)   40%,
            #ffeaf5                   70%,
            var(--ng-bg-linear-end)  100%
        );
    min-height: 100vh;
    padding: var(--ng-space-md);
    font-family: var(--ng-font-primary);
    margin: 0;
    color: var(--ng-pink-950);
}

/* Dot-pattern overlay — decorative, never interactive */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23ffb3d9' opacity='0.4'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23ff69b4' opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='1' fill='%23ff69b4' opacity='0.3'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: var(--ng-z-base);
}

/* Default layout: centred card pages */
body:not(.portal-page) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Portal layout: full-bleed, no padding */
body.portal-page {
    display: block;
    padding: 0;
}


/* ============================================================
   SHARED CARD COMPONENT
   ============================================================ */
.ng-card {
    background:     var(--ng-color-surface);
    border-radius:  var(--ng-radius-xl);
    padding:        var(--ng-space-xl);
    max-width:      600px;
    width:          100%;
    box-shadow:     var(--ng-shadow-card);
    border:         var(--ng-border-thick) solid var(--ng-pink-400);
    position:       relative;
    animation:      ng-gentle-pulse var(--ng-anim-duration-pulse) var(--ng-anim-ease-std) infinite;
    z-index:        var(--ng-z-content);
}

/* Legacy alias — keeps v1 HTML classes working */
.card-container { @extend .ng-card; }


/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
h1 {
    color:          var(--ng-pink-600);
    font-size:      var(--ng-font-size-h1);
    font-weight:    var(--ng-font-weight-black);
    margin:         var(--ng-space-md) 0;
    text-shadow:    var(--ng-text-shadow-h1);
    letter-spacing: var(--ng-letter-spacing-h1);
}

.ng-message {
    color:       var(--ng-pink-700);
    font-size:   var(--ng-font-size-lg);
    margin:      var(--ng-space-md) 0;
    line-height: var(--ng-line-height-body);
}

.ng-sub-message {
    font-size:     var(--ng-font-size-md);
    margin-top:    var(--ng-space-lg);
    color:         var(--ng-pink-800);
    background:    linear-gradient(135deg, var(--ng-pink-50), var(--ng-pink-100));
    border-radius: var(--ng-radius-lg);
    padding:       12px var(--ng-space-md);
    border:        var(--ng-border-thin) dashed var(--ng-pink-400);
}

.ng-reason-box {
    background:    var(--ng-pink-50);
    border:        var(--ng-border-medium) solid var(--ng-pink-400);
    border-radius: var(--ng-radius-lg);
    padding:       15px 25px;
    margin:        var(--ng-space-md) auto;
    font-size:     var(--ng-font-size-md);
    color:         var(--ng-pink-800);
    display:       inline-block;
}


/* ============================================================
   DECORATIVE ELEMENTS
   ============================================================ */
.ng-sparkle {
    position:       absolute;
    font-size:      36px;
    animation:      ng-twinkle var(--ng-anim-duration-twinkle) var(--ng-anim-ease-std) infinite;
    z-index:        var(--ng-z-overlay);
    pointer-events: none;
}

.ng-main-icon {
    font-size:  var(--ng-font-size-icon);
    margin:     var(--ng-space-md) 0;
    animation:  ng-float var(--ng-anim-duration-float) var(--ng-anim-ease-std) infinite;
    filter:     var(--ng-shadow-icon);
}

.ng-hearts {
    display:        flex;
    justify-content: center;
    gap:            15px;
    font-size:      35px;
    margin:         var(--ng-space-lg) 0;
    animation:      ng-hearts-bob var(--ng-anim-duration-bob) var(--ng-anim-ease-std) infinite;
}

/* Corner sparkle positions */
.portal-corner {
    position:       absolute;
    font-size:      28px;
    z-index:        var(--ng-z-overlay);
    pointer-events: none;
    animation:      ng-twinkle var(--ng-anim-duration-twinkle) var(--ng-anim-ease-std) infinite;
    line-height:    1;
}
.c-tl { top: 10px;    left:  12px; animation-delay: 0s;    }
.c-tr { top: 10px;    right: 12px; animation-delay: 0.5s;  }
.c-bl { bottom: 10px; left:  12px; animation-delay: 1s;    }
.c-br { bottom: 10px; right: 12px; animation-delay: 1.5s;  }


/* ============================================================
   NAVBAR COMPONENT
   ============================================================ */
.nursery-nav {
    background: linear-gradient(135deg, var(--ng-pink-300), var(--ng-pink-400), var(--ng-pink-300));
    box-shadow: var(--ng-shadow-nav);
    border-bottom: var(--ng-border-medium) solid var(--ng-pink-500);
    padding: var(--ng-nav-padding);
    position: relative;
    z-index: var(--ng-z-nav);
    height: var(--ng-nav-height);
    display: flex;
    align-items: center;
}

.nursery-brand {
    font-family:    var(--ng-font-primary);
    font-size:      var(--ng-font-size-xl);
    font-weight:    var(--ng-font-weight-black);
    color:          var(--ng-pink-900) !important;
    text-shadow:    var(--ng-text-shadow-brand);
    letter-spacing: var(--ng-letter-spacing-h2);
}

.nursery-navlink {
    font-family:   var(--ng-font-primary) !important;
    font-size:     var(--ng-font-size-lg) !important;
    font-weight:   var(--ng-font-weight-bold) !important;
    color:         var(--ng-pink-950) !important;
    background:    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,220,240,.4));
    border:        var(--ng-border-thin) solid rgba(255,182,215,.6);
    border-radius: var(--ng-radius-lg) !important;
    padding:       7px var(--ng-space-md) !important;
    transition:    all var(--ng-anim-duration-std);
    box-shadow:    var(--ng-shadow-navlink);
}

.nursery-navlink:hover,
.nursery-navlink:focus,
.nursery-navlink.show {
    background:    linear-gradient(135deg, var(--ng-pink-50), var(--ng-pink-200)) !important;
    color:         var(--ng-pink-900) !important;
    border-color:  var(--ng-pink-600) !important;
    box-shadow:    var(--ng-shadow-navlink-hover);
    transform:     translateY(-1px);
}

.nursery-dropdown {
    background:    linear-gradient(160deg, #fff5fb, var(--ng-pink-50));
    border:        2.5px solid var(--ng-pink-400);
    border-radius: var(--ng-radius-lg) !important;
    box-shadow:    var(--ng-shadow-dropdown);
    padding:       var(--ng-space-sm);
    margin-top:    6px !important;
    overflow:      hidden;
}

.nursery-item {
    font-family:   var(--ng-font-primary) !important;
    font-size:     var(--ng-font-size-md) !important;
    font-weight:   var(--ng-font-weight-bold) !important;
    color:         var(--ng-pink-950) !important;
    border-radius: var(--ng-radius-md) !important;
    padding:       var(--ng-space-sm) 14px !important;
    transition:    background var(--ng-anim-duration-fast), transform var(--ng-anim-duration-fast);
}

.nursery-item:hover {
    background: linear-gradient(135deg, var(--ng-pink-50), var(--ng-pink-200)) !important;
    color:      var(--ng-pink-900) !important;
    transform:  translateX(3px);
}

.nursery-toggler {
    border:         var(--ng-border-thin) solid var(--ng-pink-400);
    border-radius:  var(--ng-radius-md);
    padding:        6px 12px;
    background:     rgba(255,255,255,.5);
    font-size:      var(--ng-font-size-xl);
}
.nursery-toggler:focus { box-shadow: none; }


/* ============================================================
   PORTAL LAYOUT  (body.portal-page)
   ============================================================ */
.portal-outer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      calc(100vh - var(--ng-nav-height));
    padding:         var(--ng-space-xl) var(--ng-space-md);
}

.portal-wrap {
    position:   relative;
    width:      var(--ng-portal-width);
    min-width:  var(--ng-portal-min-width);
}

.portal-card {
    background:    var(--ng-color-surface);
    border-radius: var(--ng-radius-xl);
    box-shadow:    var(--ng-shadow-card);
    border:        var(--ng-border-thick) solid var(--ng-pink-400);
    position:      relative;
    animation:     ng-gentle-pulse var(--ng-anim-duration-pulse) var(--ng-anim-ease-std) infinite;
    z-index:       var(--ng-z-content);
    display:       flex;
    flex-direction: row;
    overflow:      hidden;
}

.panel-left {
    flex:         0 0 auto;
    width:        var(--ng-panel-left-width);
    min-height:   var(--ng-panel-left-min-height);
    position:     relative;
    overflow:     hidden;
    border-right: 4px solid var(--ng-pink-400);
    border-radius: calc(var(--ng-radius-xl) - 2px) 0 0 calc(var(--ng-radius-xl) - 2px);
}

.panel-left img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
}

.panel-left-overlay {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(255,105,180,.6));
    padding:    28px var(--ng-space-md) 18px;
    text-align: center;
}

.panel-right {
    flex:    1;
    padding: var(--ng-space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* ============================================================
   SHIELD / JOURNAL CARD STYLES (white backgrounds, centered text blocks for kim.html and similar pages)
   ============================================================ */
.shield-card {
  background: #fff !important;
  border-radius: var(--ng-radius-lg);
  border: var(--ng-border-thin) solid var(--ng-pink-400);
  box-shadow: 0 8px 30px rgba(255,105,180,.2);
  padding: var(--ng-space-xl) var(--ng-space-lg);
  height: auto !important;
  min-height: 140px;
  text-align: center;
  transition: transform var(--ng-anim-duration-slow), box-shadow var(--ng-anim-duration-slow);
}

.shield-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ng-shadow-card);
}

.shield-about-card {
  background: #fff !important;
  border-radius: var(--ng-radius-xl);
  border: var(--ng-border-medium) solid var(--ng-pink-400);
  box-shadow: var(--ng-shadow-card);
  padding: var(--ng-space-xl);
  text-align: center;
  font-size: var(--ng-font-size-lg);
  color: var(--ng-pink-950);
  line-height: var(--ng-line-height-body);
}

/* Center content blocks and improve journal layout */
body.portal-page .portal-wrap,
body.portal-page .container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.shield-features .row {
  justify-content: center;
}


/* ============================================================
   INFRACTION BADGE
   ============================================================ */
.ng-infraction-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     rgba(255,255,255,.55);
    border:         var(--ng-border-thin) solid var(--ng-pink-400);
    border-radius:  var(--ng-radius-lg);
    padding:        5px 14px;
    font-family:    var(--ng-font-primary);
    font-size:      var(--ng-font-size-sm);
    font-weight:    var(--ng-font-weight-black);
    color:          var(--ng-pink-950);
    backdrop-filter: blur(4px);
    transition:     background var(--ng-anim-duration-slow);
}

.ng-infraction-badge.has-infractions {
    background:   rgba(255,200,200,.65);
    border-color: #e57373;
    color:        var(--ng-color-danger);
}