/* ==========================================================
   Happy Sad Mi
   components.css
   Reusable UI Components
========================================================== */

/* ===========================
   ABOUT
=========================== */

/* Grid rather than wrapping flex: the previous flex-wrap layout left a
   ragged right edge (2 cards then 1) and capped each card at 320px inside
   a wider column, so the cards never filled the space beside the copy. */

.about-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 20px;
    align-content: start;
}

.info-card{
    display: flex;
    align-items: center;
    gap: 16px;

    background: var(--white);
    padding: 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.info-card i{
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;

    border-radius: 50%;
    background: rgba(59,130,246,.1);
    color: var(--secondary);
    font-size: 1.3rem;
}

.info-content{
    flex: 1;
}

.info-content h4{
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary);
    font-size: 1.1rem;
}

.info-content p{
    margin: 0;
}

/* ===========================
   SERVICES
=========================== */

.service-card{

    background:var(--white);

    border-radius:var(--radius);

    padding:35px;

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

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

}

.service-icon{

    width:70px;

    height:70px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:rgba(25,66,93,.08);

    margin-bottom:25px;

}

.service-icon i{

    font-size:2rem;

    color:var(--primary);

}


.service-card h3{

    margin-bottom:15px;

}

.service-card p{

    margin-bottom:20px;

}

.service-card ul{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.service-card li{

    position:relative;

    padding-left:22px;

    color:var(--gray-700);

}

.service-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--accent);

    font-weight:bold;

}

/* ===========================
   PROCESS
=========================== */

.process-card{

    background:var(--white);

    border-radius:var(--radius);

    padding:35px;

    text-align:center;

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

}

/* ===========================
   TECH STACK
=========================== */

.tech-card{

    background:white;

    border-radius:18px;

    padding:30px;

    text-align:center;

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

}

.tech-card i{

    font-size:3rem;

    color:var(--primary);

    margin-bottom:18px;

}

/* HTML5 */
.tech-card i.fa-html5 {
    color: #E34F26;
}

/* CSS3 */
.tech-card i.fa-css3-alt {
    color: #1572B6;
}

/* JavaScript */
.tech-card i.fa-js-square {
    color: #F7DF1E;
}

/* PHP */
.tech-card i.fa-php {
    color: #777BB4;
}

/* Laravel */
.tech-card i.fa-laravel {
    color: #FF2D20;
}

/* MySQL */
.tech-card i.fa-database {
    color: #4479A1;
}

/* GitHub */
.tech-card i.fa-github {
    color: #181717;
}

/* Docker */
.tech-card i.fa-docker {
    color: #2496ED;
}

/* Power BI */
.tech-card i.fa-chart-bar {
    color: #F2C811;
}

/* Microsoft Excel */
.tech-card i.fa-table {
    color: #217346;
}

.tech-card span{

    font-weight:600;

}

/* ===========================
   STATS
=========================== */

.stats-card{

    background:white;

    text-align:center;

    padding:35px;

    border-radius:var(--radius);

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

}

.stats-card h2{

    color:var(--primary);

    margin-bottom:10px;

}

/* ===========================
   PORTFOLIO
=========================== */

.portfolio-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:45px;

}

.portfolio-filter button{

    display:inline-flex;

    align-items:center;

    min-height:44px;

    padding:12px 24px;

    border-radius:40px;

    background:white;

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

    transition:.3s;

}

.portfolio-filter button.active,

.portfolio-filter button:hover{

    background:var(--primary);

    color:white;

}

.project-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

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

}

.project-card img{

    height:220px;

    object-fit:cover;

}

.project-content{

    padding:30px;

}

.project-tag{

    display:inline-block;

    background:rgba(16,185,129,.1);

    color:var(--accent);

    padding:8px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

    margin-bottom:15px;

}

.project-content h3{

    margin-bottom:15px;

}

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:25px 0;

}

.project-tech span{

    background:var(--gray-100);

    padding:8px 14px;

    border-radius:30px;

    font-size:.8rem;

}

.project-links{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}

.project-links a{

    display:inline-flex;

    align-items:center;

    min-height:44px;

    padding:0 14px;

    border-radius:12px;

    background:rgba(59,130,246,.1);

    color:var(--secondary);

    font-weight:600;

    transition:.3s ease;

}

.project-links a:hover{

    background:var(--secondary-text);

    color:var(--white);

}

/* ===========================
   TEAM
=========================== */

.team-card{

    background:white;

    border-radius:20px;

    text-align:center;

    padding:35px;

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

    display: flex;
    flex-direction: column;
    height: 100%;

}

.team-card p{
    flex: 1;
}.team-card img{

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    margin:0 auto 25px;

    border:5px solid var(--gray-100);

}

.team-card span{

    display:block;

    margin:10px 0 20px;

    color:var(--secondary);

    font-weight:600;

}

/* ===========================
   TESTIMONIALS
=========================== */

.testimonial-card{

    background:white;

    padding:35px;

    border-radius:18px;

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

}

.quote-icon{

    font-size:2rem;

    color:var(--secondary);

    margin-bottom:20px;

}

.testimonial-author{

    margin-top:30px;

}

.testimonial-author h4{

    margin-bottom:5px;

}

.testimonial-author span{

    color:var(--gray-500);

}

/* Rendered by testimonials.js */

.testimonial-card{

    display:flex;

    flex-direction:column;

}

.testimonial-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

    margin:0 auto 18px;

    border:4px solid var(--gray-100);

    background:var(--gray-100);

}

.testimonial-card h3{

    text-align:center;

    margin-bottom:4px;

}

.testimonial-card .testimonial-position{

    display:block;

    text-align:center;

    color:var(--gray-500);

    font-size:.95rem;

}

.testimonial-stars{

    display:flex;

    justify-content:center;

    gap:4px;

    margin:14px 0 18px;

    color:#F59E0B;

    font-size:.9rem;

}

.testimonial-card .testimonial-message{

    flex:1;

    font-style:italic;

}

/* ===========================
   CONTACT
=========================== */

.contact-info h3{

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:35px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}

.contact-item i{

    width:50px;

    height:50px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(59,130,246,.1);

    color:var(--secondary);

}

.contact-form{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contact-form label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    font-size:.95rem;

    color:var(--dark);

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px 18px;

    margin-bottom:20px;

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

    border-radius:12px;

    resize:none;

}

.contact-form button{

    width:100%;

}

.contact-form .form-note{

    margin-top:14px;

    font-size:.85rem;

    color:var(--gray-500);

}

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

.footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer ul a{

    display:inline-flex;

    align-items:center;

    min-height:44px;

}

.footer p a{

    display:inline-flex;

    align-items:center;

    min-height:44px;

    font-weight:600;

}

.footer a{

    transition:.3s;

}

.footer a:hover{

    color:var(--secondary);

}

/* ===========================
/* ===========================================
   LEGAL PAGES (privacy.html)
   =========================================== */

.legal-hero{

    padding-top:180px;

    padding-bottom:60px;

    background:var(--light);

}

.legal-hero .section-title h1{

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

    margin-bottom:15px;

}

.header-back{

    padding:12px 24px;

}

.legal-body{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:50px;

    align-items:start;

}

.legal-toc{

    position:sticky;

    top:110px;

    padding:24px;

    background:var(--white);

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

    border-radius:var(--radius);

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



    min-width:0;
}

.legal-toc h2{

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:.06em;

    margin-bottom:14px;

}

.legal-toc ul{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.legal-toc a{

    display:flex;

    align-items:center;

    min-height:32px;

    color:var(--gray-700);

    transition:.3s ease;

}

.legal-toc a:hover{

    color:var(--secondary-text);

}

.legal-content{

    background:var(--white);

    padding:44px;

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

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

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



    min-width:0;
}

.legal-content section + section{

    margin-top:38px;

    padding-top:38px;

    border-top:1px solid var(--gray-200);

}

.legal-content h2{

    font-size:1.4rem;

    margin-bottom:16px;

    scroll-margin-top:110px;

}

.legal-content h3{

    font-size:1.1rem;

    margin:24px 0 10px;

}

.legal-content p{

    margin-bottom:14px;

}

.legal-content ul{

    margin-bottom:14px;

    padding-left:22px;

    list-style:disc;

}

.legal-content li{

    margin-bottom:8px;

    color:var(--gray-700);

}

.legal-content a{

    color:var(--secondary-text);

    font-weight:600;

    text-decoration:underline;

}

.legal-content strong{

    color:var(--dark);

}

.legal-updated{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:28px;

    background:var(--gray-100);

    border-radius:50px;

    font-size:.85rem;

    color:var(--gray-700);

}

.cookie-table{

    width:100%;

    margin:20px 0;

    border-collapse:collapse;

    font-size:.92rem;

}

.cookie-table caption{

    padding-bottom:12px;

    font-weight:600;

    color:var(--dark);

    text-align:left;

}

.cookie-table th,
.cookie-table td{

    padding:12px 14px;

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

    text-align:left;

    vertical-align:top;

}

.cookie-table thead th{

    background:var(--gray-100);

    color:var(--dark);

    font-weight:600;

}

.cookie-table tbody th{

    font-weight:600;

    color:var(--dark);

    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;

    font-size:.85rem;

    word-break:break-word;

}

@media (max-width:992px){

    .legal-body{

        grid-template-columns:1fr;

    }

    .legal-toc{

        position:static;

    }

}

@media (max-width:768px){

    .legal-hero{

        padding-top:150px;

    }

    .legal-content{

        padding:26px;

    }

    .cookie-table{

        display:block;

        overflow-x:auto;

    }

}


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

.back-to-top{

    border:none;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

}

/* ===========================
   UTILITIES
=========================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

/* ===========================================
   PORTFOLIO STATES
=========================================== */

.portfolio-error,
.portfolio-empty{

    padding:60px;

    text-align:center;

    grid-column:1/-1;

}

.details-btn{

    display:inline-flex;

    align-items:center;

    min-height:44px;

    padding:0 18px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.details-btn:hover{

    background:var(--secondary-text);

}

/* ===========================================
   PROJECT MODAL
=========================================== */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:.3s;

    z-index:9999;

}

.modal.show{

    visibility:visible;

    opacity:1;

}

/* Locks background scrolling while the dialog is open */

body.modal-open{

    overflow:hidden;

}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(5px);

}

.modal-content{

    position:relative;

    background:white;

    width:min(900px,92%);

    max-height:90vh;

    max-height:90dvh;

    overflow:auto;

    overscroll-behavior:contain;

    border-radius:20px;

    z-index:2;

    animation:fadeUp .35s;

}

.modal-content img{

    width:100%;

    height:350px;

    object-fit:cover;

}

.modal-body{

    padding:40px;

}

.modal-category{

    display:inline-block;

    background:rgba(59,130,246,.1);

    color:var(--secondary);

    padding:8px 14px;

    border-radius:30px;

    margin-bottom:15px;

    font-weight:600;

}

.modal-body h2{

    margin-bottom:20px;

}

.modal-meta{

    display:grid;

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

    gap:20px;

    margin:35px 0;

}

.modal-meta strong{

    display:block;

    margin-bottom:8px;

}

.modal-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.modal-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:0 26px;

    background:var(--primary);

    color:white;

    border-radius:10px;

    transition:.3s;

}

.modal-buttons a:hover{

    background:var(--secondary-text);

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    z-index:3;

    width:45px;

    height:45px;

    display:grid;

    place-items:center;

    border:none;

    border-radius:50%;

    background:white;

    color:var(--dark);

    cursor:pointer;

    font-size:1rem;

    box-shadow:var(--shadow);

}

@media(max-width:768px){

    .modal-content img{

        height:220px;

    }

    .modal-body{

        padding:25px;

    }

    .modal-meta{

        grid-template-columns:1fr;

    }

}