/* ============================================================
   BASE STYLES – unchanged visual identity
   ============================================================ */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Wrapper – central white panel */
.wrapper {
    background: #fff;
    max-width: 960px;
    width: 95%;
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* Header image */
img#header {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 600px;
}

/* Headings */
h1 {margin-bottom:.5rem; font-size:2rem;}
h2 {margin-top:0; color:#444; font-size:1.2rem;}

/* ------------------------------------------------------------
   Tabs
   ------------------------------------------------------------ */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ddd;
    justify-content: center;
}
.tab {
    padding: .5rem 1rem;
    cursor: pointer;
    background:#f5f5f5;
    border:1px solid #ccc;
    border-bottom:none;
    border-radius:6px 6px 0 0;
    font-weight:bold;
    transition: background .2s, color .2s;
}
.tab.active {
    background:#fff;
    border-color:#bbb;
    color:#169B62;
}

/* ------------------------------------------------------------
   Card grid
   ------------------------------------------------------------ */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
    justify-content: center;
}
.card {
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    width: 230px;
    height: 300px;
    box-shadow:0 2px 4px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    transition: transform .15s ease-in-out;
}
.card:hover {transform:translateY(-2px);}

/* Card image */
.card img {
    width:100%;
    height:180px;
    object-fit:cover;
    flex-shrink:0;
}

/* Card content */
.card-content {
    padding:.75rem;
    flex:1;
    display:flex;
    flex-direction:column;
}
.card-content h3 {margin:0; font-size:1rem; flex-shrink:0;}
.card-content p {
    margin:.25rem 0;
    font-size:.75rem;
    color:#555;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* Checkbox */
.card input[type=checkbox]{
    position:absolute;
    top:.5rem;
    right:.5rem;
    width:22px;
    height:22px;
}

/* Selected‑card highlight */
.card:has(input[type=checkbox]:checked),
.card.selected {
    border:2px solid #169B62;
    box-shadow:0 0 12px rgba(22,155,98,.4);
    background:#f5fbff;
}

/* ------------------------------------------------------------
   Template area (subject + textarea)
   ------------------------------------------------------------ */
.subject::before {
    content:"Subject:";
    margin-right:15px;
}
textarea{
    display:block;
    width:80%;
    max-width:90%;
    height:500px;
    resize:vertical;
    margin:.5rem auto;
    padding:30px;
    font-family:inherit;
    border:1px solid #ccc;
    border-radius:4px;
}

/* Template container */
.template{
    border:1px solid #ccc;
    padding:.75rem;
    margin-bottom:1rem;
    background:#fff;
}
.template h3{margin:0 0 .5rem;}

/* Button */
button{
    padding:.6rem 1rem;
    background:#169B62;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:1rem;
    transition:background .2s;
}
button:hover{background:#068B52;}

section .sendBtn {
    display: block;               /* ensures it behaves like a block element */
    margin: 1.5rem auto 0 auto;   /* top margin for spacing, auto left/right = centered */
}

/* Tab panels – hide/show */
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Footer styling */
.site-footer {
    margin-top: 2rem;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    border-top: 1px solid #ddd;
}
.site-footer a {
    color: #169B62;
    text-decoration: underline;
}
.site-footer a:hover {
    color: #068B52;
}

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

/* ------------------------------------------------------------
   Tablet / small‑desktop (max‑width: 900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .wrapper {padding:1.5rem;}
    h1 {font-size:1.8rem;}
    h2 {font-size:1.1rem;}
    .card {
        width:calc(50% - 1rem);
        height:auto;
    }
}

/* ------------------------------------------------------------
   Mobile phones (max‑width: 600px)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    /* ---- Force larger base font size ---- */
    html, body {font-size:18px !important; line-height:1.5 !important;}
    h1 {font-size:1.6rem !important; margin-bottom:.4rem;}
    h2 {font-size:1rem !important; margin-bottom:.8rem;}
    p, .card-content p, .card-content h3,
    .template p, .template h3,
    .subject, textarea, button, .tab {
        font-size:1rem !important;
    }

    /* ---- Tabs become full‑width for easy tapping ---- */
    .tabs {justify-content:stretch;}
    .tab {
        flex:1;
        text-align:center;
        padding:.6rem 0;
    }

    /* ---- Cards turn into a single column ---- */
    .cards {flex-direction:column; align-items:center;}
    .card {
        width:80% !important;
        height:auto !important;
    }
    .card-content {padding:.5rem;}

    /* ---- Bigger tap targets for buttons ---- */
    button {
        font-size:1.1rem !important;
        padding:.7rem 1.2rem !important;
    }

    .wrapper {padding:1rem;}

    .strike-note {
        padding:1rem 1.2rem;
        margin:1.5rem 0;
    }
    .strike-note h3 {font-size:1.2rem;}
}

/* ------------------------------------------------------------
   Ultra‑small devices (max‑width: 380px)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
    h1 {font-size:1.4rem !important;}
    h2 {font-size:.95rem !important;}
    button {font-size:1rem !important; padding:.6rem .9rem !important;}
    .card-content h3 {font-size:.9rem !important;}
    .card-content p  {font-size:.8rem !important;}
}

/* ------------------------------------------------------------
   Highlighted “Note” about the strike
   ------------------------------------------------------------ */
.strike-note {
    background:#f0faf5;                /* light yellow‑beige */
    border-left:6px solid #169b62;      /* orange accent */
    padding:1.2rem 1.5rem;
    margin:2rem 0;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    line-height:1.55;
}
.strike-note h3 {
    margin-top:0;
    margin-bottom:.6rem;
    font-size:1.3rem;
    color:#169b62;                     /* darker orange for the heading */
}
.strike-note p {
    margin:0.6rem 0;
    color:#333;
}
.strike-note ul {
    margin:0.4rem 0 0.4rem 1.2rem;
    padding-left:0;
}
.strike-note li {
    margin-bottom:0.4rem;
}