/*
==========================================================
Calendar Site Generator
style.css
Version : 1.0
==========================================================
*/

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

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

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================================================
   ROOT
========================================================== */

:root{

    --primary:#198754;

    --primary-dark:#146c43;

    --background:#f5f7fb;

    --surface:#ffffff;

    --text:#222222;

    --muted:#666666;

    --border:#dddddd;

    --radius:12px;

    --shadow:0 8px 24px rgba(0,0,0,.08);

    --container:1200px;

}

/* ==========================================================
   BODY
========================================================== */

body{

    font-family:Arial,Helvetica,sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    font-size:16px;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--primary-dark);

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    max-width:100%;

    display:block;

}

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

.container{

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

    margin:auto;

}

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

.site-header{

    background:#ffffff;

    box-shadow:var(--shadow);

    position:sticky;

    top:0;

    z-index:999;

}

.site-header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-size:26px;

    font-weight:bold;

    color:var(--text);

}

.main-nav{

    display:flex;

    gap:24px;

}

.main-nav a{

    color:var(--text);

    font-weight:600;

}

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

.hero{

    padding:80px 0;

    text-align:center;

}

.hero h1{

    font-size:42px;

    line-height:1.2;

    margin-bottom:20px;

}

.hero-description{

    max-width:760px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

}

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

.hero-buttons{

    margin-top:35px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

}

.hero-buttons button{

    padding:14px 30px;

    border:none;

    border-radius:var(--radius);

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    background:var(--primary);

    color:#ffffff;

    transition:.25s;

}

.hero-buttons button:hover{

    background:var(--primary-dark);

}

/* ==========================================================
   CALENDAR SECTION
========================================================== */

.calendar-section{

    padding:70px 0;

}

.section-header{

    text-align:center;

    margin-bottom:35px;

}

.section-header h2{

    font-size:34px;

    margin-bottom:10px;

}

.section-header p{

    color:var(--muted);

    font-size:17px;

}

.calendar-wrapper{

    background:var(--surface);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow-x:auto;

    padding:25px;

}

.calendar-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}

.calendar-table th{

    background:var(--primary);

    color:#ffffff;

    padding:15px;

    font-size:16px;

}

.calendar-table td{

    height:90px;

    text-align:center;

    vertical-align:top;

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

    font-size:18px;

    font-weight:600;

    background:#ffffff;

    transition:.2s;

}

.calendar-table td:hover{

    background:#f0fff8;

}

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

.action-section{

    padding:40px 0;

    text-align:center;

}

.primary-btn,
.secondary-btn{

    padding:14px 30px;

    border:none;

    border-radius:var(--radius);

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    margin:8px;

    transition:.25s;

}

.primary-btn{

    background:var(--primary);

    color:#ffffff;

}

.primary-btn:hover{

    background:var(--primary-dark);

}

.secondary-btn{

    background:#333333;

    color:#ffffff;

}

.secondary-btn:hover{

    background:#111111;

}

/* ==========================================================
   FEATURES
========================================================== */

.features{

    padding:80px 0;

}

.features h2{

    text-align:center;

    margin-bottom:45px;

    font-size:34px;

}

.feature-grid{

    display:grid;

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

    gap:25px;

}

.feature-card{

    background:#ffffff;

    border-radius:var(--radius);

    padding:28px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.feature-card:hover{

    transform:translateY(-6px);

}

.feature-card h3{

    margin-bottom:15px;

    font-size:22px;

}

.feature-card p{

    color:var(--muted);

}

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

.faq-section{

    padding:80px 0;

}

.faq-section h2{

    text-align:center;

    margin-bottom:35px;

    font-size:34px;

}

.faq-section details{

    background:#ffffff;

    border-radius:var(--radius);

    margin-bottom:16px;

    padding:18px 22px;

    box-shadow:var(--shadow);

}

.faq-section summary{

    cursor:pointer;

    font-weight:700;

    font-size:18px;

}

.faq-section p{

    margin-top:14px;

    color:var(--muted);

    line-height:1.7;

}

/* ==========================================================
   RELATED CALENDARS
========================================================== */

.related-section{

    padding:80px 0;

}

.related-section h2{

    text-align:center;

    margin-bottom:35px;

    font-size:34px;

}

#related-calendars{

    display:grid;

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

    gap:20px;

}

.related-card{

    background:#ffffff;

    padding:20px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.25s;

}

.related-card:hover{

    transform:translateY(-5px);

}

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

.site-footer{

    background:#222222;

    color:#ffffff;

    padding:60px 0;

    margin-top:80px;

}

.site-footer h2{

    font-size:28px;

    margin-bottom:15px;

}

.site-footer p{

    color:#d8d8d8;

    margin-bottom:18px;

}

.footer-nav{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin:25px 0;

}

.footer-nav a{

    color:#ffffff;

    font-weight:600;

}

.footer-nav a:hover{

    color:var(--primary);

}

.copyright{

    margin-top:30px;

    font-size:15px;

    color:#bfbfbf;

}

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

@media (max-width:992px){

    .hero{

        padding:60px 0;

    }

    .hero h1{

        font-size:34px;

    }

    .section-header h2,
    .features h2,
    .faq-section h2,
    .related-section h2{

        font-size:30px;

    }

}

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

@media (max-width:768px){

    .site-header .container{

        flex-direction:column;

        gap:18px;

    }

    .main-nav{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero h1{

        font-size:28px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons button{

        width:100%;

        max-width:320px;

    }

    .calendar-table th,
    .calendar-table td{

        font-size:14px;

    }

    .calendar-table td{

        height:60px;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        max-width:320px;

    }

}

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

@media (max-width:480px){

    .container{

        width:95%;

    }

    .hero{

        padding:45px 0;

    }

    .hero h1{

        font-size:24px;

    }

    .section-header h2{

        font-size:26px;

    }

}

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

@media print{

    body{

        background:#ffffff;

    }

    .site-header,
    .hero-buttons,
    .action-section,
    .faq-section,
    .related-section,
    .site-footer{

        display:none !important;

    }

    .calendar-section{

        padding:0;

    }

    .calendar-wrapper{

        box-shadow:none;

        border:none;

        padding:0;

    }

    .calendar-table th{

        background:#ffffff !important;

        color:#000000 !important;

        border:1px solid #000000;

    }

    .calendar-table td{

        border:1px solid #000000;

        height:90px;

        color:#000000;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

button:focus,
a:focus,
summary:focus{

    outline:3px solid #0d6efd;

    outline-offset:3px;

}

/* ==========================================================
   SMOOTH SCROLL
========================================================== */

html{

    scroll-behavior:smooth;

}

/* ==========================================================
   Holiday Calendar
   ========================================================== */

.calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.calendar-month h3 {
    text-align: center;
    margin: 0 0 14px;
    font-size: 24px;
}

.calendar-day-number {
    font-weight: 700;
}

.calendar-table td.holiday {
    background: #fff3cd;
}

.holiday-name {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
}

@media (max-width: 800px) {
    .calendar-year-grid {
        grid-template-columns: 1fr;
    }

    .holiday-name {
        font-size: 11px;
    }
}