/*
Theme Name: Hayley Young Portfolio
Author: ChatGPT
Version: 1.2
Description: Professional portfolio theme for Hayley Young with projects, blog space and fixed menu.
*/

*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fffaf7;color:#2d1530}
a{color:inherit}

.site-header{background:#fffaf7;border-bottom:1px solid #f1d8e7;padding:20px 24px;position:sticky;top:0;z-index:50}
.header-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-title{text-decoration:none;font-size:28px;font-weight:900;color:#3b1745;letter-spacing:.3px}
.site-title span{color:#d86fa3}

.main-menu ul,
.main-menu .menu{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:16px!important;flex-wrap:wrap!important}
.main-menu li{list-style:none!important;margin:0!important;padding:0!important;display:inline-block!important}
.main-menu a{text-decoration:none!important;color:#3b1745!important;font-weight:800!important;font-size:15px!important;padding:9px 12px!important;border-radius:999px!important;display:inline-block!important}
.main-menu a:hover{background:#ffe4f0!important;color:#d86fa3!important}

.hero{background:linear-gradient(135deg,#fffaf7 0%,#ffe4f0 55%,#f7d6a7 100%);padding:88px 24px}
.hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.kicker{text-transform:uppercase;letter-spacing:2px;color:#a05a79;font-weight:900;font-size:13px}
.hero h1{font-size:56px;line-height:1.05;margin:14px 0;color:#2d1530}
.hero p{font-size:20px;line-height:1.7;color:#5d3a5a;max-width:720px}
.hero-card{background:#fff;border:2px solid #f1d8e7;border-radius:32px;padding:34px;box-shadow:0 18px 50px rgba(93,58,90,.12)}
.hero-card h2{margin-top:0;color:#3b1745}
.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;background:#3b1745;color:#fff!important;text-decoration:none;padding:13px 20px;border-radius:999px;font-weight:900}
.btn.secondary{background:#d86fa3}

.section{padding:72px 24px}
.section.alt{background:#fff}
.section-inner{max-width:1180px;margin:0 auto}
.section h2{text-align:center;font-size:42px;margin:0 0 12px;color:#3b1745}
.section-subtitle{text-align:center;max-width:780px;margin:0 auto 38px;color:#6f4b6a;font-size:18px;line-height:1.7}

.project-grid,.blog-grid,.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card,.project-card,.blog-card{background:#fff;border:1px solid #f1d8e7;border-radius:28px;padding:28px;box-shadow:0 10px 30px rgba(59,23,69,.08)}
.alt .card,.alt .project-card,.alt .blog-card{background:#fffaf7}
.card h3,.project-card h3,.blog-card h3{margin-top:0;color:#3b1745;font-size:24px}
.card p,.project-card p,.blog-card p{color:#5d3a5a;line-height:1.7}

.project-tag{display:inline-block;background:#ffe4f0;color:#9b4370;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:900;margin-bottom:14px}
.blog-space{background:linear-gradient(135deg,#3b1745,#7c3f72);color:#fff;border-radius:36px;padding:44px;margin-bottom:30px}
.blog-space h2{text-align:left;color:#fff;margin:0 0 12px}
.blog-space p{color:#ffe4f0;font-size:18px;line-height:1.8;max-width:820px}

.read-more{display:inline-block;margin-top:12px;background:#d86fa3;color:#fff!important;text-decoration:none;padding:11px 16px;border-radius:999px;font-weight:900}

.content-section{padding:70px 24px;background:#fff}
.content-card{max-width:920px;margin:0 auto;background:#fffaf7;border:1px solid #f1d8e7;border-radius:32px;padding:42px;box-shadow:0 10px 30px rgba(59,23,69,.08)}
.content-card h1{text-align:center;color:#3b1745;font-size:42px}
.post-content{font-size:18px;line-height:1.8;color:#4d304b}
.post-content img{max-width:100%;height:auto;border-radius:18px}

.cta{background:linear-gradient(135deg,#3b1745,#d86fa3);color:#fff;text-align:center;padding:70px 24px}
.cta h2{font-size:42px;margin:0 0 14px}
.cta p{font-size:19px;max-width:700px;margin:0 auto 25px;line-height:1.7}
.cta .btn{background:#fff;color:#3b1745!important}

.site-footer{text-align:center;background:#2d1530;color:#fff;padding:30px 24px}

@media(max-width:850px){
.header-inner{display:block;text-align:center}
.main-menu ul,.main-menu .menu{justify-content:center!important;margin-top:16px!important}
.hero-inner{display:block}
.hero h1{font-size:40px}
.project-grid,.blog-grid,.service-grid{grid-template-columns:1fr}
.section h2,.cta h2,.content-card h1{font-size:32px}
.hero{padding:58px 20px}
}