/*==================================================
    PrintPlayland Design System
    Version : 1.0
----------------------------------------------------
    Contents

    01. CSS Variables
    02. Reset
    03. Base Elements
    04. Typography
    05. Layout
    06. Utility Classes

==================================================*/
/*
Design Philosophy

PrintPlayland should feel like opening
a colourful activity book, not using
a web application.

Every component should be:

• Simple
• Cheerful
• Consistent
• Easy to maintain

Use colour to create joy,
not to communicate danger.
*/

/*==================================================
    01. CSS VARIABLES
==================================================*/

:root {

    /* Brand Colors */

    --color-primary:        #38bdf8;   /* Sky Blue */
    --color-secondary:      #ec4899;   /* Pink */
    --color-success:        #22c55e;   /* Green - Grass */
    --color-warning:        #facc15;   /* Yellow - Sunshine */
    --color-accent:         #fb923c;   /* Orange */
    --color-danger:         #ef4444;   /* Red - Cherry */

    /* Neutral Colors */

    --color-background:     #ffffff;
    --color-surface:        #fafafa;
    --color-border:         #e5e7eb;

    --color-text:           #222222;
    --color-text-light:     #666666;
    --color-heading:        #111827;

    /* Shadows */

    --shadow-small:
        0 1px 3px rgba(0,0,0,.08);

    --shadow-medium:
        0 4px 12px rgba(0,0,0,.10);

    --shadow-large:
        0 10px 24px rgba(0,0,0,.15);

    /* Radius */

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 18px;

    /* Spacing */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Layout */

    --container-width: 1100px;
    --header-height: 72px;

    /* Animation */

    --transition-speed: .20s;

/* Theme Override Colors */

	--theme-primary: var(--color-primary);
	--theme-secondary: var(--color-secondary);	
}


/*==================================================
    02. RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:15px;
    line-height:1.6;

    color:var(--color-text);
    background:var(--color-background);

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;

}


/*==================================================
    03. BASE ELEMENTS
==================================================*/

img{

    max-width:100%;
    height:auto;
    display:block;

}

a{

    color:var(--color-primary);
    text-decoration:none;

    transition:
        color var(--transition-speed);

}

a:hover{

    color:#0284c7;

}

ul,
ol{

    padding-left:22px;

}

hr{

    border:none;
    border-top:1px solid var(--color-border);
    margin:var(--space-xl) 0;

}


/*==================================================
    04. TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--color-heading);
    font-weight:700;
    line-height:1.25;

    margin-bottom:var(--space-md);

}

h1{

    font-size:2.2rem;

}

h2{

    font-size:1.8rem;

}

h3{

    font-size:1.45rem;

}

h4{

    font-size:1.2rem;

}

p{

    margin-bottom:var(--space-md);

    color:var(--color-text-light);

}

small{

    color:var(--color-text-light);

}

strong{

    color:var(--color-heading);

}


/*==================================================
    05. LAYOUT
==================================================*/

.container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding-left:var(--space-md);
    padding-right:var(--space-md);

}

section{
    margin-bottom:var(--space-xxl);
}

.page-content{

    padding-top:var(--space-xl);
    padding-bottom:var(--space-xl);

}


/*==================================================
    06. UTILITY CLASSES
==================================================*/

/* Alignment */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}


/* Display */

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}


/* Spacing */

.mt-sm{
    margin-top:var(--space-sm);
}

.mt-md{
    margin-top:var(--space-md);
}

.mt-lg{
    margin-top:var(--space-lg);
}

.mb-sm{
    margin-bottom:var(--space-sm);
}

.mb-md{
    margin-bottom:var(--space-md);
}

.mb-lg{
    margin-bottom:var(--space-lg);
}


/* Width */

.w-100{

    width:100%;

}

.content-width{

    max-width:760px;

}
::selection{

    background:var(--color-secondary);

    color:white;

}
:focus-visible{

    outline:3px solid var(--theme-primary);

    outline-offset:2px;

}

/*==================================================
    Responsive Layout
==================================================*/

@media (min-width:768px){

    h1{
        font-size:2.5rem;
    }

    h2{
        font-size:2rem;
    }

}

@media (min-width:1024px){

    h1{
        font-size:2.8rem;
    }

}


/*==================================================
    07. HEADER
==================================================*/

.site-header{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f3fbff 100%
        );

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

}

.header-inner{

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

    min-height:var(--header-height);

    gap:var(--space-lg);

}


/*--------------------------------------------------
    Logo
--------------------------------------------------*/

.site-logo{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:var(--color-heading);
}

.site-logo:hover{
    color:var(--color-heading);
}

.logo-image{
    width:48px;
    height:48px;

    object-fit:contain;
}

.logo-text{0
    display:flex;
    flex-direction:column;

}

.site-name{
    font-size:1.35rem;
    font-weight:700;
    color:var(--color-heading);
}

.site-tagline{
    font-size:.82rem;
    color:var(--color-text-light);
}


/*==================================================
    08. NAVIGATION
==================================================*/

.main-nav{
    display:none;
}

.nav-list{
    list-style:none;
    display:flex;
    gap:6px;
    padding:0;
}

.nav-list a{
    display:block;
    padding:10px 14px;
    border-radius:var(--radius-medium);
    color:var(--color-heading);
    font-weight:600;
    transition:
        background var(--transition-speed),
        color var(--transition-speed);
}

.nav-list a:hover{
    background:#eef9ff;
    color:var(--theme-primary);
}


/*--------------------------------------------------
    Active Navigation
--------------------------------------------------*/

.nav-list a.active{
    background:#e0f2fe;
    color:var(--theme-primary);
}


/*==================================================
    09. MOBILE NAVIGATION
==================================================*/

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    font-size:1.8rem;
    line-height:1;
    color:var(--color-heading);
}

.mobile-nav{
    display:none;
    border-top:1px solid var(--color-border);
    background:#ffffff;
}

.mobile-nav.active{
    display:block;
}

.mobile-nav ul{
    list-style:none;
    padding:0;
}

.mobile-nav li{
    border-bottom:1px solid #f2f2f2;
}

.mobile-nav a{
    display:block;
    padding:14px 18px;
    color:var(--color-heading);
    font-weight:600;
}

.mobile-nav a:hover{
    background:#f8fdff;
}
.mobile-nav a.active{
    background:#eef9ff;
    color:var(--theme-primary);
}

/*==================================================
    10. HERO
==================================================*/

.hero{

    padding:
        var(--space-xxl)

        0;

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

.hero-inner{
    display:grid;
    gap:var(--space-xl);
    align-items:center;
}


/*--------------------------------------------------
    Hero Sizes
--------------------------------------------------*/

.hero-large{
    padding:48px 0;
}

.hero-medium{
    padding:35px 0;
}

.hero-small{
    padding:22px 0;
}


/*--------------------------------------------------
    Hero Content
--------------------------------------------------*/

.hero-content h1{
    margin-bottom:18px;
}

.hero-content p{
    font-size:1.05rem;
    max-width:700px;
}


/*--------------------------------------------------
    Hero Image
--------------------------------------------------*/

.hero-image{
    display:flex;
    justify-content:center;
}

.hero-image img{
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}
.hero-image-small img{
    max-height:180px;
}

.hero-image-medium img{
    max-height:320px;
}

.hero-image-large img{
    max-height:420px;
}
 
.hero-text-only .hero-inner{
    display:block;
}

.hero-text-only .hero-content{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
/*==================================================
    11. BUTTONS
==================================================*/

.button{

    display:inline-flex;

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

    gap:8px;

    padding:
        10px 20px;

    border:none;

    border-radius:var(--radius-medium);

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    transition:
        transform var(--transition-speed),
        box-shadow var(--transition-speed),
        background var(--transition-speed);

}


/*--------------------------------------------------
    Primary
--------------------------------------------------*/

.button-primary{

    background:var(--theme-primary);

    color:#ffffff;

}

.button-primary:hover{

    transform:translateY(-2px);

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

}


/*--------------------------------------------------
    Secondary
--------------------------------------------------*/

.button-secondary{

    background:var(--color-secondary);

    color:#ffffff;

}

.button-secondary:hover{

    transform:translateY(-2px);

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

}


/*--------------------------------------------------
    Outline
--------------------------------------------------*/

.button-outline{

    background:#ffffff;

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

    color:var(--theme-primary);

}

.button-outline:hover{

    background:#f5fcff;

}


/*--------------------------------------------------
    Download
--------------------------------------------------*/

.button-download{

    background:var(--color-success);

    color:#ffffff;

}

.button-download:hover{

    transform:translateY(-2px);

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

}

.card-download-link{

    display:inline-flex;

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

    margin-top:auto;

    font-weight:700;

    color:var(--theme-primary);

    text-decoration:none;

}

.card-download-link:hover{

    text-decoration:underline;

}
/*==================================================
    12. SECTION HEADINGS
==================================================*/

.section-header{

    text-align:center;

    margin-bottom:var(--space-xl);

}

.section-header h2{

    margin-bottom:10px;

}

.section-header p{

    max-width:700px;

    margin:0 auto;

}


/*==================================================
    13. RESPONSIVE
==================================================*/

@media (min-width:768px){

    .menu-toggle{

        display:none;

    }

    .main-nav{

        display:block;

    }

    .hero-inner{

        grid-template-columns:

            1.1fr

            .9fr;

    }

}


@media (max-width:767px){
    .hero{

        text-align:center;

    }
    .hero-content p{

        margin-left:auto;
        margin-right:auto;
    }

    .hero-image{
        order:-1;
    }
}

/*==================================================
    14. CARDS
==================================================*/

/*--------------------------------------------------
    Base Card
--------------------------------------------------*/

.card{

    display:flex;
    flex-direction:column;

    background:var(--color-background);

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

    border-radius:var(--radius-large);

    overflow:hidden;

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

    transition:
        transform var(--transition-speed),
        box-shadow var(--transition-speed);

}

.card:hover{

    transform:translateY(-3px);

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

}


/*--------------------------------------------------
    Card Image Area
--------------------------------------------------*/

.card-image{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:220px;

    padding:var(--space-md);

    background:#fbfdff;

}

.card-image img{

    width:auto;
    height:auto;

    max-width:100%;
    max-height:200px;

    object-fit:contain;

}


/*--------------------------------------------------
    Card Body
--------------------------------------------------*/

.card-body{
    display:flex;
    flex-direction:column;
    padding:var(--space-lg);

    flex:1;
}
.card-body .button{
    margin-top:auto;
    align-self:center;
}

.card-body h3{

    margin-bottom:10px;

}

.card-body p{

    margin-bottom:18px;

}


/*==================================================
    15. THEME CARD
==================================================*/

.theme-card{

    text-align:center;

}

.theme-card .card-image{

    min-height:250px;

}


/*==================================================
    16. DOWNLOAD CARD
==================================================*/

.download-card{

    border-left:
        6px solid
        var(--theme-primary);

}


/*==================================================
    17. BOARD GAME CARD
==================================================*/

.boardgame-card{

    position:relative;

}

.boardgame-meta{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:12px;

}

.boardgame-badge{

    display:inline-block;

    padding:5px 10px;

    border-radius:999px;

    background:#eef9ff;

    font-size:.82rem;

}



/*==================================================
    Download Cards
==================================================*/

.download-card{

    overflow:hidden;

    text-align:center;

}


/*--------------------------------------------------
    Download Card Preview
--------------------------------------------------*/

.card-preview-link{

    display:flex;
    flex-direction:column;

    flex:1;

    color:inherit;

    text-decoration:none;

}

.card-preview-link .card-image{

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);

}

.card-preview-link:hover .card-image{

    background:#f5fbff;

}

.card-preview-link:hover .card-image img{

    transform:scale(1.03);

}

.card-preview-link .card-image img{

    transition:transform var(--transition-fast);

}


/*--------------------------------------------------
    Download Card Title
--------------------------------------------------*/

.card-preview-link h3{

    margin:var(--space-md) var(--space-md) 0;

    color:var(--color-heading);

    text-align:center;

}

.card-preview-link:hover h3{

    color:var(--theme-primary);

}


/*--------------------------------------------------
    Download Action
--------------------------------------------------*/

.download-card .card-body{
	padding:var(--space-sm) var(--space-md) var(--space-md);
}

.card-download-link{

    display:inline-flex;

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

    margin-top:auto;

    font-size:0.9rem;
    font-weight:700;

    line-height:1.2;

    color:var(--theme-primary);

    text-decoration:none;

}

.card-download-link:hover{
    text-decoration:underline;
}

.download-card .card-preview-link h3{
    margin:var(--space-sm) var(--space-md) 0;

    font-size:1rem;
    line-height:1.3;
}

/*==================================================
    18. PARENT RESOURCE CARD
==================================================*/

.parent-card{

    border-left:
        6px solid
        var(--color-accent);

}

.parent-card .card-image{

    min-height:120px;

}


/*==================================================
    19. FEATURED CARD
==================================================*/

.featured-card{

    background:

        linear-gradient(

            180deg,

            #ffffff,

            #f8fcff

        );

}


/*==================================================
    20. CARD GRID
==================================================*/

.card-grid{

    display:grid;

    gap:24px;

}

@media(min-width:700px){

    .card-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

}

@media(min-width:1100px){

    .card-grid{

        grid-template-columns:

            repeat(3,1fr);

    }

}


/*==================================================
    21. IMAGES
==================================================*/

.img-contain{

    object-fit:contain;

}

.img-cover{

    object-fit:cover;

}

.img-rounded{

    border-radius:var(--radius-medium);

}

.img-shadow{

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

}

.img-center{

    display:block;

    margin-left:auto;
    margin-right:auto;

}


/*==================================================
    22. FORMS
==================================================*/

.form-section{

    background:#fffdf2;

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

    border-radius:var(--radius-large);

    padding:var(--space-xl);

}

.form-group{

    margin-bottom:20px;

}

label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

}

input,
textarea,
select{

    width:100%;

    padding:12px 14px;

    font:inherit;

    border:1px solid #cccccc;

    border-radius:var(--radius-small);

    background:#ffffff;

}

textarea{

    resize:vertical;

    min-height:160px;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--theme-primary);

}


/*==================================================
    23. FOOTER
==================================================*/

.site-footer{

    margin-top:60px;

    background:#f8fcff;

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

    padding:40px 0;

}

.footer-grid{

    display:grid;

    gap:30px;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:8px;

}

.footer-links a{

    color:var(--color-text-light);

}

.footer-links a:hover{

    color:var(--theme-primary);

}

.footer-bottom{

    margin-top:30px;

    padding-top:20px;

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

    text-align:center;

    font-size:.9rem;

}
@media(min-width:768px){
    .footer-grid{

        grid-template-columns:
            1.4fr
            1fr
            1fr;
    }
}

/*==================================================
    24. RESPONSIVE HELPERS
==================================================*/

.mobile-only{

    display:block;

}

.desktop-only{

    display:none;

}

@media(min-width:768px){

    .mobile-only{

        display:none;

    }

    .desktop-only{

        display:block;

    }

}


/*==================================================
    25. PRINT
==================================================*/

@media print{

    header,
    footer,
    nav,
    .hero,
    .button,
    .mobile-only{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

    .card{

        border:1px solid #bbbbbb;

        box-shadow:none;

        break-inside:avoid;

    }

}


/* ==================================================
   Activity Image Comparison
   --------------------------------------------------
   Reusable comparison layout for activity pages.

   Typical uses:
   - Starting Position / Goal
   - Before / After
   - Example / Result
================================================== */

.activity-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}


/* ==================================================
   Activity Image Card
================================================== */

.activity-image-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
}

.activity-image-card h3 {
    margin: 0 0 1rem;
    text-align: center;
}

.activity-image-card p {
    margin: 1rem 0 0;
    text-align: center;
}


/* ==================================================
   Activity Image Frame
   --------------------------------------------------
   Both comparison images receive exactly the same
   visible frame height.

   The image fills the complete frame dimensions.
   object-fit: cover removes differences caused by
   source image proportions.
================================================== */

.activity-image-frame {
    width: 100%;
    height: 320px;

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

    overflow: hidden;

    background: #ffffff;
    border-radius: 0.75rem;
}

.activity-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


/* ==================================================
   Centered Activity Download Card
================================================== */

.activity-download-card {
    width: 100%;
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.activity-download-card .button {
    display: inline-block;
}

.activity-download-wrapper {
    display: flex;
    justify-content: center;
}


/* ==================================================
   Responsive Layout
================================================== */

@media (max-width: 768px) {

    .activity-image-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .activity-image-card {
        padding: 1.25rem;
    }

    .activity-image-frame {
        height: 260px;
    }

}

.card-placeholder{

    display:flex;

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

    width:100%;
    height:200px;

    font-size:5rem;
    line-height:1;

    color:var(--color-text-light);

}

.card-actions{
    display:flex;
    gap:10px;
    margin-top:1rem;
}

.card-actions a{
    flex:1;
    text-align:center;
}


/*==================================================
    Breadcrumbs
==================================================*/

.breadcrumbs {
    padding: 0.75rem 0;
    font-size: 0.9rem;
}

.breadcrumbs .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumbs .breadcrumb-list > .breadcrumb-item {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumbs .breadcrumb-list > .breadcrumb-item::before,
.breadcrumbs .breadcrumb-list > .breadcrumb-item::after {
    content: none;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #94a3b8;
    user-select: none;
}

.breadcrumb-link {
    color: #475569;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: #0284c7;
    text-decoration: underline;
}

.breadcrumb-link:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
    border-radius: 0.2rem;
}

.breadcrumb-current {
    color: #64748b;
    font-weight: 600;
}

@media (max-width: 600px) {

    .breadcrumbs {
        padding: 0.6rem 0;
        font-size: 0.85rem;
    }

    .breadcrumb-separator {
        margin: 0 0.35rem;
    }
}