/*
Theme Name: Crinkle.Contact
Description: A playful Crinkle.Contact homepage and brand styling for Blocksy.
Template: blocksy
Version: 0.1.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: crinkle-contact
License: GPL-2.0-or-later
*/
body.crinkle-home {
    background: #fffaf0;
    color: #15366b;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    margin: 0;
}
.crinkle-home * { box-sizing: border-box; }
.crinkle-home h1, .crinkle-home h2, .crinkle-home h3 {
    color: #12366f;
    font-family: inherit;
    line-height: 1.15;
    font-weight: 800;
}
.crinkle-home a { text-decoration: none; color: inherit; }
.crinkle-home p { line-height: 1.65; }
.cc-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.cc-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; border-bottom: 2px solid #f3db8c; }
.cc-brand { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 900; letter-spacing: -1px; }
.cc-brand img { width: 72px; height: auto; }
.cc-brand > span { color: #0072d8; }
.cc-brand span span { color: #12366f; }
.cc-header nav, .cc-footer nav { display: flex; align-items: center; gap: 24px; font-weight: 700; }
.crinkle-home .cc-button { display: inline-block; padding: 14px 23px; border: 2px solid #0062c8; border-radius: 999px; background: linear-gradient(#0787eb, #0058bc); color: white; font-weight: 700; box-shadow: 0 3px 0 #00478e; text-align: center; }
.crinkle-home .cc-outline { background: transparent; color: #0062c8; box-shadow: none; }
.cc-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 64px; }
.cc-intro h1 { font-size: clamp(36px, 4.8vw, 62px); color: #006ed2; letter-spacing: -2px; margin: 0 0 26px; }
.cc-intro > p { font-size: 19px; }
.cc-community { font-weight: 700; }
.cc-community strong, .cc-footer strong { color: #b12626; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cc-profile { background: white; border: 2px solid #d5e5f1; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 0 #e5dfd1, 0 20px 45px #15366b12; scroll-margin-top: 24px; }
.cc-banner, .cc-style-banner { height: 135px; background: radial-gradient(ellipse at 8% 110%, #ffffffba 0 25%, transparent 26%), radial-gradient(ellipse at 75% 130%, #ffffffba 0 40%, transparent 41%), linear-gradient(140deg, #0080e8, #a4ddff); }
.cc-banner span { display: block; padding: 12px 28px; text-align: right; font-size: 52px; color: #fff1a5; }
.cc-profile-body { padding: 0 26px 28px; text-align: center; }
.cc-avatar { position: relative; margin: -40px auto 10px; width: 84px; height: 84px; border-radius: 24px; background: #d9f0ff; border: 5px solid white; color: #bd7e00; display: grid; place-items: center; font-size: 48px; }
.cc-profile h2 { font-size: 30px; margin: 8px 0 0; }
.cc-handle { color: #0061bb; margin: 4px 0 12px; }
.cc-example-label { font-size: 11px; color: #52627b; margin: 0; }
.cc-example-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; font-weight: 700; }
.cc-example-links span { padding: 10px; border-radius: 18px; background: #e6f3ff; }
.cc-about { text-align: left; border-top: 2px dashed #cadff0; padding-top: 16px; margin-top: 18px; }
.cc-about h3 { font-size: 20px; margin: 0 0 10px; }
.cc-about p { font-size: 14px; margin-bottom: 0; }
.cc-favorites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-favorites div { padding: 14px; border-radius: 15px; background: #fff0b7; }
.cc-favorites div:nth-child(2) { background: #dcefff; }
.cc-favorites div:nth-child(3) { background: #ece1fa; }
.cc-favorites div:nth-child(4) { background: #e3efd7; }
.cc-favorites small, .cc-favorites strong { display: block; }
.cc-favorites small { font-size: 11px; margin-bottom: 5px; }
.cc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; scroll-margin-top: 30px; }
.cc-features article { border: 1px solid #f0d99a; background: #fff0bc; border-radius: 24px; padding: 26px; }
.cc-features h2 { font-size: 23px; margin: 0 0 12px; }
.cc-features p { margin: 0; font-size: 15px; }
.cc-styles { text-align: center; padding-block: 60px; }
.cc-styles > h2 { font-size: 38px; margin: 0 0 12px; }
.cc-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.cc-style { border: 2px solid #d7e2ed; border-radius: 24px; overflow: hidden; background: white; }
.cc-style-banner { height: 100px; padding: 20px; color: #fff2a1; font-size: 45px; }
.cc-style h3 { font-size: 18px; padding-inline: 12px; margin: 22px 0 8px; }
.cc-style p { font-size: 12px; }
.cc-lilac .cc-style-banner { background: linear-gradient(130deg, #9f85dc, #e0d3f4); }
.cc-midnight { background: #24223b; }
.cc-midnight h3, .cc-midnight p { color: #f0eaff; }
.cc-midnight .cc-style-banner { background: linear-gradient(130deg, #102b50, #584579); }
.cc-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #fff0b6; border: 2px dashed #e4bd54; border-radius: 28px; padding: 32px; margin-bottom: 50px; }
.cc-cta h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); }
.cc-footer { border-top: 2px solid #efda98; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; font-size: 13px; }
.cc-note { font-size: 13px; }
.cc-skip { position: absolute; left: -9999px; }
.cc-skip:focus { left: 12px; top: 12px; padding: 14px; background: white; z-index: 10000; }
.crinkle-home a:focus-visible { outline: 3px solid #b12626; outline-offset: 5px; }
@media (max-width: 850px) {
    .cc-header { flex-wrap: wrap; }
    .cc-header nav { flex-wrap: wrap; gap: 16px; font-size: 14px; }
    .cc-hero { gap: 30px; }
    .cc-features { gap: 12px; }
    .cc-features article { padding: 20px; }
}
@media (max-width: 650px) {
    .cc-wrap { padding-inline: 18px; }
    .cc-hero, .cc-features, .cc-style-grid { grid-template-columns: 1fr; }
    .cc-hero { padding-block: 36px; }
    .cc-profile { max-width: 460px; width: 100%; margin-inline: auto; }
    .cc-cta, .cc-footer { flex-direction: column; align-items: flex-start; }
    .cc-footer nav { flex-wrap: wrap; gap: 16px; }
    .cc-style-grid { gap: 18px; }
    .cc-header .cc-button { padding: 10px 16px; }
}

/* Retain Blocksy's document and script hooks with the Crinkle homepage shell. */
body.crinkle-home #header,
body.crinkle-home #footer { display: none; }
body.crinkle-home #main { padding-top: 0; padding-bottom: 0; }
body.crinkle-home .cc-header { width: 100%; }