/*
Theme Name: Holly Johnson Fan Pages
Theme URI: https://hollyjohnson.de
Author: Holly Johnson Fan Pages
Description: Test theme for an independent Holly Johnson fan website. Uses your own concert photograph.
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: holly-fan
*/
:root{--blue:#1289ff;--bg:#050613;--white:#f8f9ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #59baff;outline-offset:4px}.site-header{position:relative;z-index:10;background:rgba(1,2,16,.87);border-bottom:1px solid #ffffff16}.nav-wrap{max-width:1480px;margin:auto;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{font-size:22px;letter-spacing:.18em;font-weight:300;white-space:nowrap}.brand small{display:block;font-size:11px;letter-spacing:.7em;color:var(--blue);text-align:center;margin-top:6px}.nav-menu{display:flex;list-style:none;gap:30px;padding:0;margin:0;flex-wrap:wrap}.nav-menu a{font-size:13px;letter-spacing:.12em;transition:color .2s}.nav-menu a:hover,.nav-menu .current-menu-item>a{color:#51aeff}.hero{min-height:730px;position:relative;isolation:isolate;background:linear-gradient(90deg,rgba(0,3,21,.88) 0%,rgba(0,3,21,.55) 42%,rgba(0,3,21,.22) 100%),linear-gradient(0deg,#050613 0%,transparent 35%),url('assets/concert.jpg') center 35%/cover no-repeat}.hero-content{max-width:1480px;margin:auto;padding:145px 5% 130px}.hero h1{font-weight:200;font-size:clamp(60px,9vw,145px);line-height:.85;letter-spacing:-.045em;margin:0;text-shadow:0 2px 25px #0009}.hero h1 span{display:block;color:#6bb8ff}.hero .fanpages{letter-spacing:.5em;color:#42a0ff;font-size:clamp(15px,2vw,27px);margin:25px 0 45px}.tagline{font-size:13px;line-height:1.8;letter-spacing:.28em;text-transform:uppercase;max-width:400px}.buttons{display:flex;gap:15px;flex-wrap:wrap;margin-top:28px}.button{display:inline-block;background:#007cff;padding:17px 30px;text-transform:uppercase;font-weight:bold;font-size:12px;letter-spacing:.08em}.button.outline{background:transparent;border:1px solid #ffffffa6}.cards{max-width:1480px;margin:-95px auto 0;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:0 5% 45px}.card{min-height:210px;border:1px solid #ffffff44;background:linear-gradient(0deg,rgba(0,0,0,.95),rgba(3,7,30,.5)),url('assets/concert.jpg') center/cover;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:transform .2s,border-color .2s}.card:nth-child(2){background-position:40% 20%}.card:nth-child(3){background-position:70% 50%}.card:nth-child(4){background-position:50% 85%}.card:hover{transform:translateY(-4px);border-color:var(--blue)}.card strong{font-size:18px;letter-spacing:.05em}.card span{font-size:13px;line-height:1.5;color:#d2d5e0;margin-top:7px}.main-content{max-width:1100px;padding:55px 5% 95px;margin:auto;min-height:35vh}.main-content h1{font-size:clamp(32px,5vw,60px);font-weight:300}.main-content p{line-height:1.75;color:#d7d9e4}.main-content a:not(.button){color:#75baff;text-decoration:underline}.site-footer{text-align:center;border-top:1px solid #ffffff24;padding:30px 5%;font-size:11px;letter-spacing:.24em;color:#a8adbd;text-transform:uppercase}@media(max-width:850px){.nav-wrap{flex-direction:column}.nav-menu{justify-content:center;gap:16px}.hero{min-height:660px;background-position:55% 25%}.hero-content{padding-top:140px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.brand{font-size:17px}.nav-menu a{font-size:11px}.hero{min-height:610px;background-position:53% center}.hero-content{padding-top:145px}.hero h1{font-size:65px}.hero .fanpages{letter-spacing:.26em}.cards{grid-template-columns:1fr;margin-top:-45px}.card{min-height:140px}.tagline{font-size:11px}}

/* Content pages, version 0.2 */
.main-content{max-width:1080px}.main-content h1{letter-spacing:.02em;color:#fff}.main-content h2{font-weight:400;color:#79baff;font-size:clamp(23px,3vw,33px);margin-top:45px}.main-content h3{font-weight:500}.main-content li{line-height:1.9;color:#d7d9e4}.main-content ul{padding-left:22px}.main-content blockquote{border-left:3px solid #1289ff;margin:28px 0;padding:5px 24px;color:#d5e5ff}.main-content .wp-block-separator{border-color:#ffffff30}.main-content .wp-block-button__link{background:#007cff;border-radius:0}.main-content strong{color:#fff}.main-content a:hover{color:#fff}.main-content .wp-block-columns{gap:28px}.nav-menu{gap:17px}.nav-menu a{font-size:11px}@media(max-width:850px){.nav-menu{gap:13px}}

/* Archive integration */
.main-content .hj-archive a{text-decoration:none}.main-content .hj-archive .hj-event-card:hover{border-color:#1289ff}
