/* ==========================================================
   LITTLE EXPLORERS LEARNING HUB
   Editable Classroom Labels
   Master Stylesheet

   Author: Bradley Hobbs
   Website: Little Explorers Learning Hub
========================================================== */


/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {

    --primary: #4CAF50;
    --primary-dark: #388E3C;
    --primary-light: #E8F5E9;

    --secondary: #FFB300;
    --secondary-dark: #F57C00;

    --blue: #2196F3;
    --purple: #8E24AA;
    --red: #E53935;
    --teal: #009688;

    --white: #ffffff;
    --off-white: #fafafa;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #111827;

    --text: #2b2b2b;

    --border: #e5e7eb;

    --shadow-sm: 0 3px 10px rgba(0,0,0,.05);
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.12);

    --radius-sm: .5rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;

    --transition: .3s ease;

    --container: 1280px;

}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Nunito",sans-serif;
    font-size:1rem;
    line-height:1.7;

    color:var(--text);

    background:#f7f9fc;

    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

button,
input,
select,
textarea{

    font:inherit;

}

button{

    cursor:pointer;
    border:none;

}

ul{

    list-style:none;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4{

    font-family:"Fredoka",sans-serif;

    color:var(--gray-900);

    line-height:1.2;

}

h1{

    font-size:clamp(2.7rem,6vw,4.5rem);

}

h2{

    font-size:clamp(2rem,5vw,3rem);

}

h3{

    font-size:1.35rem;

}

p{

    color:var(--gray-700);

}


/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

/* ==========================================================
   SITE HEADER
========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:#ffffff;

    box-shadow:0 2px 20px rgba(0,0,0,.08);

}

.site-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:1rem;

    color:inherit;

}

.logo img{

    width:64px;

    height:64px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-family:"Fredoka",sans-serif;

    font-size:1.45rem;

    font-weight:700;

    color:var(--gray-900);

}

.logo-subtitle{

    color:var(--primary);

    font-weight:700;

    font-size:.95rem;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.main-nav ul{

    display:flex;

    align-items:center;

    gap:2rem;

    list-style:none;

}

.main-nav a{

    color:var(--gray-700);

    font-weight:700;

    transition:.3s;

    position:relative;

}

.main-nav a:hover{

    color:var(--primary);

}

.main-nav a.active{

    color:var(--primary);

}

.main-nav a.active::after,

.main-nav a:hover::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:var(--primary);

    border-radius:999px;

}

/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu{

    display:none;

    background:none;

    border:none;

    color:var(--gray-900);

    font-size:1.6rem;

}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb-section{

    background:#f8fbfd;

    border-bottom:1px solid var(--border);

    padding:1rem 0;

}

.breadcrumb ol{

    display:flex;

    align-items:center;

    gap:.75rem;

    flex-wrap:wrap;

    list-style:none;

}

.breadcrumb li{

    display:flex;

    align-items:center;

    gap:.75rem;

}

.breadcrumb a{

    color:var(--primary);

    font-weight:600;

}

.breadcrumb li[aria-current="page"]{

    color:var(--gray-700);

    font-weight:700;

}

/* ==========================================================
   RESPONSIVE HEADER
========================================================== */

@media (max-width:992px){

.site-header .container{

    flex-wrap:wrap;

    padding:1rem 0;

}

.mobile-menu{

    display:block;

}

.main-nav{

    display:none;

    width:100%;

    margin-top:1rem;

}

.main-nav.active{

    display:block;

}

.main-nav ul{

    flex-direction:column;

    align-items:flex-start;

    gap:1rem;

}

}


/* ==========================================================
   GLOBAL SECTIONS
========================================================== */

section{

    padding:6rem 0;

}

.section-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 4rem;

}

.section-heading h2{

    margin:1rem 0;

}

.section-heading p{

    font-size:1.1rem;

}


/* ==========================================================
   SECTION TAG
========================================================== */

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:.65rem;

    padding:.6rem 1.2rem;

    background:var(--primary-light);

    color:var(--primary-dark);

    border-radius:999px;

    font-weight:700;

    font-size:.95rem;

}

.section-tag i{

    font-size:1rem;

}


/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#E8F5E9,#F4FBFF);

    padding:7rem 0;

}

.page-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(76,175,80,.12),
        transparent 45%),

        radial-gradient(circle at bottom left,
        rgba(33,150,243,.10),
        transparent 40%);

}

.hero-content{

    position:relative;

    text-align:center;

    z-index:2;

}

.hero-intro{

    max-width:820px;

    margin:2rem auto;

    font-size:1.15rem;

}

.hero-features{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1rem;

    margin:3rem auto;

    max-width:900px;

}

.hero-feature{

    background:#fff;

    border-radius:1rem;

    padding:1rem;

    box-shadow:var(--shadow-sm);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.6rem;

    font-weight:700;

}

.hero-feature i{

    color:var(--primary);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}


/* ==========================================================
   STATISTICS
========================================================== */

.stats-section{

    padding-top:0;

    margin-top:-3rem;

    position:relative;

    z-index:10;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

}

.stat-card{

    background:#fff;

    border-radius:1.5rem;

    text-align:center;

    padding:2.5rem 2rem;

    box-shadow:var(--shadow);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-card i{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.stat-card h2{

    color:var(--primary);

    margin-bottom:.5rem;

}

.stat-card p{

    font-weight:700;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

.hero-features{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:768px){

section{

padding:4rem 0;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.hero-features{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   HOW IT WORKS
========================================================== */

.how-it-works{

    background:#ffffff;

}

.steps-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:2rem;

}

.step-card{

    position:relative;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:1.5rem;

    padding:3rem 2rem;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    overflow:hidden;

}

.step-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(76,175,80,.06),
        transparent
    );

    opacity:0;

    transition:var(--transition);

}

.step-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.step-card:hover::before{

    opacity:1;

}

.step-number{

    position:absolute;

    top:1rem;
    right:1rem;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-weight:700;

}

.step-card i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:1.5rem;

}

.step-card h3{

    margin-bottom:1rem;

}

.step-card p{

    color:var(--gray-700);

}


/* ==========================================================
   LABEL CATEGORIES
========================================================== */

.label-categories{

    background:#f7fafc;

}

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

}

.category-card{

    background:#ffffff;

    border-radius:1.5rem;

    padding:2rem;

    border:1px solid var(--border);

    transition:.35s;

    display:flex;

    flex-direction:column;

}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.category-icon{

    width:80px;
    height:80px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:2rem;

    margin-bottom:1.5rem;

}

.category-card h3{

    margin-bottom:1rem;

}

.category-card p{

    margin-bottom:1.5rem;

}

.category-card ul{

    margin-bottom:2rem;

}

.category-card li{

    position:relative;

    padding-left:1.4rem;

    margin-bottom:.6rem;

    color:var(--gray-700);

}

.category-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--primary);

    font-weight:bold;

}

.category-button{

    margin-top:auto;

    display:inline-flex;

    justify-content:center;

    padding:1rem;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.category-button:hover{

    background:var(--primary-dark);

}


/* ==========================================================
   CLASSROOM THEMES
========================================================== */

.classroom-themes{

    background:#ffffff;

}

.theme-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:2rem;

}

.theme-card{

    background:#ffffff;

    border-radius:1.5rem;

    padding:2rem;

    text-align:center;

    border:1px solid var(--border);

    transition:.35s;

}

.theme-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.theme-preview{

    width:100px;

    height:100px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.5rem;

    color:#fff;

}


/* Theme Colors */

.rainbow-theme{

    background:linear-gradient(135deg,
    #ff5252,
    #ff9800,
    #ffeb3b,
    #4caf50,
    #2196f3,
    #673ab7);

}

.boho-theme{

    background:#d7b899;

}

.woodland-theme{

    background:#5b8c51;

}

.ocean-theme{

    background:#2196f3;

}

.safari-theme{

    background:#d9a441;

}

.space-theme{

    background:#1e3a8a;

}

.farm-theme{

    background:#4caf50;

}

.construction-theme{

    background:#ff9800;

}

.camping-theme{

    background:#2e7d32;

}

.dinosaur-theme{

    background:#7cb342;

}

.nature-theme{

    background:#43a047;

}

.custom-theme{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--blue)
    );

}

.theme-card h3{

    margin-bottom:1rem;

}

.theme-card p{

    margin-bottom:2rem;

}

.theme-button{

    width:100%;

    padding:1rem;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.theme-button:hover{

    background:var(--primary-dark);

}

.featured-theme{

    border:3px solid var(--secondary);

    position:relative;

}

.featured-theme::after{

    content:"Most Popular";

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:var(--secondary);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    padding:.4rem 1rem;

    border-radius:999px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

.steps-grid,
.category-grid,
.theme-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:768px){

.steps-grid,
.category-grid,
.theme-grid{

    grid-template-columns:1fr;

}

.category-card,
.theme-card,
.step-card{

    padding:2rem;

}

.theme-preview{

    width:80px;
    height:80px;

    font-size:2rem;

}

}

/* ==========================================================
   LABEL SIZES
========================================================== */

.label-sizes{

    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fbfd
    );

}

.size-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:2rem;

}

.size-card{

    background:#fff;

    border-radius:1.5rem;

    padding:2rem;

    border:1px solid var(--border);

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow-sm);

}

.size-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.featured-size{

    border:3px solid var(--primary);

}

.custom-size{

    background:linear-gradient(
        135deg,
        #ffffff,
        #f5fbff
    );

}

.size-preview{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:1.75rem;

    height:140px;

}

.sample-label{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border:3px solid var(--primary);

    border-radius:1rem;

    font-weight:700;

    color:var(--gray-900);

    box-shadow:var(--shadow-sm);

}

.tiny-label .sample-label{

    width:110px;
    height:40px;

    font-size:.85rem;

}

.small-label .sample-label{

    width:150px;
    height:55px;

}

.medium-label .sample-label{

    width:210px;
    height:75px;

    font-size:1.2rem;

}

.large-label .sample-label{

    width:260px;
    height:95px;

    font-size:1.3rem;

}

.extra-large-label .sample-label{

    width:290px;
    height:115px;

    font-size:1.35rem;

}

.custom-label{

    font-size:4rem;

    color:var(--primary);

}

.size-info{

    display:inline-block;

    margin:.75rem 0 1.25rem;

    color:var(--primary);

    font-weight:700;

}

.size-button{

    margin-top:1.5rem;

    width:100%;

    padding:1rem;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.size-button:hover{

    background:var(--primary-dark);

}


/* ==========================================================
   STUDIO INTRO
========================================================== */

.studio-intro{

    padding:4rem 0;

}

.studio-banner{

    display:flex;

    align-items:center;

    gap:2rem;

    background:linear-gradient(
        135deg,
        var(--primary),
        #66bb6a
    );

    color:#fff;

    padding:3rem;

    border-radius:2rem;

    box-shadow:var(--shadow-lg);

}

.studio-icon{

    width:110px;

    height:110px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.2);

    font-size:3rem;

}

.studio-content h2{

    color:#fff;

    margin-bottom:1rem;

}

.studio-content p{

    color:rgba(255,255,255,.95);

    font-size:1.1rem;

}


/* ==========================================================
   LABEL BUILDER
========================================================== */

.label-builder{

    background:#eef5f9;

}

.builder-layout{

    display:grid;

    grid-template-columns:320px 1fr 320px;

    gap:2rem;

    align-items:start;

}

.builder-sidebar{

    position:sticky;

    top:2rem;

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.builder-panel{

    background:#fff;

    border-radius:1.5rem;

    padding:1.5rem;

    box-shadow:var(--shadow);

}

.builder-panel h3{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-bottom:1.5rem;

    color:var(--primary);

}

.builder-panel label{

    display:block;

    font-weight:700;

    margin-bottom:.45rem;

    margin-top:1rem;

}

.builder-panel input[type=text],

.builder-panel select{

    width:100%;

    padding:.9rem 1rem;

    border:1px solid var(--border);

    border-radius:.85rem;

    outline:none;

}

.builder-panel input[type=text]:focus,

.builder-panel select:focus{

    border-color:var(--primary);

}

.builder-panel input[type=color]{

    width:100%;

    height:55px;

    border:none;

    background:none;

    cursor:pointer;

}

.builder-panel input[type=range]{

    width:100%;

}

.builder-panel button{

    width:100%;

    margin-top:.75rem;

    padding:.9rem;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-weight:700;

    transition:.3s;

}

.builder-panel button:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   LIVE PREVIEW
========================================================== */

.builder-preview{

    background:#fff;

    border-radius:2rem;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.preview-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem 2rem;

    background:var(--primary);

    color:#fff;

}

.preview-toolbar h3{

    color:#fff;

}

.preview-toolbar span{

    font-weight:700;

}

.preview-canvas{

    min-height:700px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:4rem;

    background:
    repeating-linear-gradient(
        0deg,
        #f5f7fa,
        #f5f7fa 24px,
        #edf2f7 25px
    );

}

.label-card{

    width:520px;

    min-height:260px;

    background:#fff;

    border:4px solid var(--primary);

    border-radius:2rem;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:2.5rem;

    box-shadow:var(--shadow-lg);

    transition:.3s;

}

.label-card:hover{

    transform:scale(1.03);

}

.label-icon{

    font-size:4rem;

    margin-bottom:1rem;

}

.label-card h2{

    margin-bottom:.5rem;

}

.label-card p{

    font-size:1.1rem;

}


/* ==========================================================
   ACTION BUTTONS
========================================================== */

#printBtn,

#duplicateBtn,

#downloadBtn,

#resetBtn{

    width:100%;

    padding:1rem;

    margin-top:.75rem;

    border-radius:999px;

    color:#fff;

    font-weight:700;

}

#printBtn{

    background:var(--primary);

}

#duplicateBtn{

    background:var(--blue);

}

#downloadBtn{

    background:#e53935;

}

#resetBtn{

    background:var(--gray-700);

}

#printBtn:hover,

#duplicateBtn:hover,

#downloadBtn:hover,

#resetBtn:hover{

    transform:translateY(-3px);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

.builder-layout{

    grid-template-columns:1fr;

}

.builder-sidebar{

    position:static;

}

}

@media (max-width:768px){

.studio-banner{

    flex-direction:column;

    text-align:center;

}

.preview-canvas{

    padding:2rem;

}

.label-card{

    width:100%;

}

}

/* ==========================================================
   PRINT CENTER
========================================================== */

.print-center{

    background:#ffffff;

}

.print-layout-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:2rem;

    margin:4rem 0;

}

.print-card{

    background:#ffffff;

    border:2px solid var(--border);

    border-radius:1.5rem;

    padding:2rem;

    text-align:center;

    transition:.3s;

    box-shadow:var(--shadow-sm);

}

.print-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:var(--primary);

}

.print-card.featured{

    border:3px solid var(--secondary);

}

.print-card i{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.print-card h3{

    margin-bottom:.75rem;

}

.print-card p{

    margin-bottom:1.5rem;

}

.layout-button{

    width:100%;

    padding:1rem;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:#ffffff;

    font-weight:700;

    transition:.3s;

}

.layout-button:hover{

    background:var(--primary-dark);

}

/* ==========================================================
   PRINT SETTINGS
========================================================== */

.print-settings{

    margin-top:4rem;

    background:#ffffff;

    border-radius:1.5rem;

    padding:2.5rem;

    box-shadow:var(--shadow);

}

.print-settings h3{

    margin-bottom:2rem;

    color:var(--primary);

    text-align:center;

}

.settings-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:2rem;

}

.setting{

    display:flex;

    flex-direction:column;

}

.setting label{

    font-weight:700;

    margin-bottom:.5rem;

    color:var(--gray-900);

}

.setting select{

    width:100%;

    padding:1rem;

    border:1px solid var(--border);

    border-radius:.85rem;

    background:#fff;

    transition:.3s;

}

.setting select:focus{

    border-color:var(--primary);

    outline:none;

}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.print-actions{

    margin-top:3rem;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:1rem;

}

.print-actions button{

    padding:1rem 1.5rem;

    border:none;

    border-radius:999px;

    color:#fff;

    font-weight:700;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;

}

.print-actions button:hover{

    transform:translateY(-3px);

}
#previewSheet{

    background:var(--blue);

}

#duplicatePage{

    background:var(--primary);

}

#downloadPdf{

    background:var(--purple);

}

#printLabels{

    background:var(--secondary-dark);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

.settings-grid{

    grid-template-columns:1fr;

}

.print-actions{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:768px){

.print-layout-grid{

    grid-template-columns:1fr;

}

.print-actions{

    grid-template-columns:1fr;

}

}


/* ==========================================================
   INSPIRATION GALLERY
========================================================== */

.inspiration-gallery{

    background:#f8fbfd;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:2rem;

}

.gallery-card{

    background:#fff;

    border-radius:1.5rem;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.gallery-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.gallery-image{

    height:220px;

    background:linear-gradient(
        135deg,
        var(--primary-light),
        #ffffff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:4rem;

    color:var(--primary);

}

.gallery-content{

    padding:2rem;

}

.gallery-content h3{

    margin-bottom:1rem;

}

.gallery-content p{

    margin-bottom:1.5rem;

}

.gallery-content .btn{

    width:100%;

}


/* ==========================================================
   TEACHER TIPS
========================================================== */

.teacher-tips{

    background:#ffffff;

}

.tips-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:2rem;

}

.tip-card{

    background:#fff;

    border-radius:1.5rem;

    padding:2rem;

    border-top:6px solid var(--primary);

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.tip-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.tip-card i{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:1rem;

}

.tip-card h3{

    margin-bottom:1rem;

}


/* ==========================================================
   ORGANIZATION CHECKLIST
========================================================== */

.organization-checklist{

    background:#f7fafc;

}

.checklist-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.checklist-column{

    background:#fff;

    border-radius:1.5rem;

    padding:2rem;

    box-shadow:var(--shadow);

}

.checklist-column h3{

    color:var(--primary);

    margin-bottom:1.5rem;

}

.checklist-column ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.checklist-column li{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:var(--gray-700);

}

.checklist-column li::before{

    content:"✓";

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-light);

    color:var(--primary);

    font-weight:700;

    flex-shrink:0;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

.checklist-grid{

    grid-template-columns:1fr;

}

}

@media (max-width:768px){

.gallery-grid,
.tips-grid,
.print-layout-grid,
.print-settings{

    grid-template-columns:1fr;

}

.layout-card,
.tip-card,
.gallery-card{

    padding:1.5rem;

}

.gallery-image{

    height:180px;

    font-size:3rem;

}

}

/* ==========================================================
   RELATED RESOURCES
========================================================== */

.related-resources{

    background:#ffffff;

}

.resources-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

}

.resource-card{

    background:#fff;

    border-radius:1.5rem;

    padding:2rem;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.resource-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.resource-icon{

    width:90px;

    height:90px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:2.4rem;

}

.resource-card h3{

    margin-bottom:1rem;

}

.resource-card p{

    margin-bottom:2rem;

}

.resource-card .btn{

    width:100%;

}


/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

    background:linear-gradient(
        135deg,
        var(--primary),
        #66bb6a
    );

    color:#fff;

}

.newsletter-wrapper{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.newsletter h2{

    color:#fff;

    margin-bottom:1rem;

}

.newsletter p{

    color:rgba(255,255,255,.95);

    margin-bottom:2rem;

}

.newsletter-form{

    display:flex;

    gap:1rem;

    justify-content:center;

    flex-wrap:wrap;

}

.newsletter-form input{

    flex:1;

    min-width:260px;

    padding:1rem 1.25rem;

    border:none;

    border-radius:999px;

    outline:none;

}

.newsletter-form button{

    padding:1rem 2rem;

    border-radius:999px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.newsletter-form button:hover{

    transform:translateY(-3px);

}


/* ==========================================================
   FAQ
========================================================== */

.faq-section{

    background:#f8fbfd;

}

.faq-grid{

    max-width:950px;

    margin:0 auto;

    display:grid;

    gap:1rem;

}

.faq-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:1rem;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:var(--transition);

}

.faq-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem 2rem;

    background:#ffffff;

    border:none;

    cursor:pointer;

    text-align:left;

    font:inherit;

    font-weight:700;

    color:var(--gray-900);

}

.faq-question span{

    font-size:1.1rem;

}

.faq-question i{

    color:var(--primary);

    transition:transform .3s ease;

    flex-shrink:0;

}

.faq-card.active .faq-question i{

    transform:rotate(180deg);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:max-height .35s ease,
               opacity .35s ease,
               padding .35s ease;

    padding:0 2rem;

}

.faq-answer p{

    margin:0;

    color:var(--gray-700);

    line-height:1.8;

}

.faq-card.active .faq-answer{

    max-height:300px;

    opacity:1;

    padding:0 2rem 1.5rem;

}


/* ==========================================================
   FINAL CALL TO ACTION
========================================================== */

.final-cta{

    background:linear-gradient(
        135deg,
        #43A047,
        #81C784
    );

    color:#fff;

    text-align:center;

}

.final-cta h2{

    color:#fff;

    margin-bottom:1rem;

}

.final-cta p{

    color:rgba(255,255,255,.95);

    max-width:700px;

    margin:0 auto 2rem;

}

.final-cta-buttons{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

.final-cta .btn-secondary{

    background:#fff;

    border:none;

    color:var(--primary);

}


/* ==========================================================
   SIMPLE FADE ANIMATIONS
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

.scale-in{

    opacity:0;

    transform:scale(.9);

    transition:all .6s ease;

}

.scale-in.show{

    opacity:1;

    transform:scale(1);

}


/* ==========================================================
   UTILITY CLASSES
========================================================== */

.text-center{

    text-align:center;

}

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

.hidden{

    display:none !important;

}

.rounded{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow);

}


/* ==========================================================
   PRINT STYLES
========================================================== */

@media print{

header,
footer,
.mobile-menu,
.newsletter,
.final-cta,
.back-to-top,
.hero-buttons,
.preview-toolbar,
.builder-sidebar,
.settings-actions{

    display:none !important;

}

body{

    background:#fff;

}

.builder-preview{

    box-shadow:none;

}

.preview-canvas{

    background:#fff;

    padding:0;

    min-height:auto;

}

.label-card{

    width:100%;

    max-width:none;

    margin:0;

    box-shadow:none;

    page-break-inside:avoid;

}

section{

    padding:0;

}

}


/* ==========================================================
   LARGE SCREEN ENHANCEMENTS
========================================================== */

@media (min-width:1400px){

.container{

    max-width:1380px;

}

.hero-content{

    max-width:1100px;

    margin:auto;

}

.label-card{

    width:620px;

    min-height:300px;

}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.newsletter-form{

    flex-direction:column;

}

.newsletter-form button{

    width:100%;

}

.final-cta-buttons{

    flex-direction:column;

}

.final-cta-buttons .btn{

    width:100%;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.section-heading{

    margin-bottom:3rem;

}

.resource-card{

    padding:1.5rem;

}

.faq-question{

    padding:1.25rem;

}

.newsletter-wrapper{

    padding:0 1rem;

}

.final-cta{

    padding:4rem 1rem;

}

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:#1d3557;

    color:#ffffff;

    margin-top:0;

    padding:5rem 0 2rem;

}

.footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:3rem;
    align-items:start;
}

/* ==========================================
   FOOTER BRAND
========================================== */

.footer-brand{
    max-width:340px;
}

.footer-title{
    margin:0;
    font-family:"Fredoka",sans-serif;
    font-size:2rem;
    font-weight:700;
    color:#ffffff;
    line-height:1.1;
}

.footer-subtitle{
    display:block;
    margin:.4rem 0 1.25rem;
    font-size:1.1rem;
    font-weight:700;
    color:#8fd694;
}

.footer-brand p{
    color:rgba(255,255,255,.85);
    line-height:1.8;
}

.footer-column p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

.footer-column h3{

    color:#ffffff;

    margin-bottom:1.25rem;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:.8rem;

}

.footer-column a{

    color:rgba(255,255,255,.9);

    transition:.3s;

}

.footer-column a:hover{

    color:#8fd694;

    padding-left:6px;

}

.footer-button{

    display:inline-block;

    margin-top:1rem;

    background:#4CAF50;

    color:#ffffff;

    padding:.9rem 1.5rem;

    border-radius:12px;

    font-weight:700;

}

.footer-bottom{

    margin-top:3rem;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    flex-wrap:wrap;

}

.footer-links{

    display:flex;

    gap:1.5rem;

}

.footer-links a{

    color:rgba(255,255,255,.85);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:#4CAF50;

    color:#ffffff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    transition:.3s;

    opacity:0;

    visibility:hidden;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-4px);

    background:#43a047;

}

/* ==========================================================
   FOOTER RESPONSIVE
========================================================== */

@media (max-width:900px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-links{

    justify-content:center;

    flex-wrap:wrap;

}

}