/*
Theme Name: Simon's Kubrick Lite
Author: Simon Manley
Version: 1.0
Description: Minimal modern Kubrick style theme
*/

:root{
--kubrick-top:#4f8bc9;
--kubrick-bottom:#2c5d99;
}

body{
margin:0;
font-family:'PT Sans', Georgia, serif;
background:#d5d6d7;
color:#333;
}

/* Gap when admin bar is visible */

.admin-bar .site{
margin-top:2rem;
}
.site{
margin:2rem auto;
}


/* MAIN GRID */

.site{

max-width:760px;

margin:2rem auto; /* top and bottom spacing */

background:white;

border-radius:12px;

box-shadow:
0 2px 0 rgba(255,255,255,.8),
0 0 0 1px rgba(0,0,0,.1),
0 6px 14px rgba(0,0,0,.15);

overflow:hidden;

display:grid;

grid-template-columns:1fr 220px;

grid-template-areas:

"header header"
"content sidebar"
"footer footer";

}


/* HEADER */

header{

grid-area:header;

padding:45px 20px;

text-align:center;

color:white;

background:linear-gradient(
to bottom,
var(--kubrick-top),
var(--kubrick-bottom)
);

header{
border-radius:12px 12px 0 0;
}

header::before{
content:"";
position:absolute;

top:-140px;
left:-25%;

width:150%;
height:260px;

background:radial-gradient(
ellipse at center,
rgba(255,255,255,0.65) 0%,
rgba(255,255,255,0.25) 35%,
rgba(255,255,255,0) 70%
);
}


/* recessed effect */

box-shadow:
inset 0 2px 6px rgba(0,0,0,.35),
inset 0 -10px 25px rgba(0,0,0,.2);

position:relative;

}


/* main glow */

header::before{

content:"";
position:absolute;

top:-140px;
left:-25%;

width:150%;
height:260px;

/*background:radial-gradient(
ellipse at center,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0.25) 35%,
rgba(255,255,255,0) 70%
);*/

pointer-events:none;

}

/* secondary water reflection */

header::after{

content:"";
position:absolute;

top:-60px;
left:10%;

width:80%;
height:180px;

background:radial-gradient(
ellipse at center,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.15) 30%,
rgba(255,255,255,0) 70%
);

opacity:.7;
pointer-events:none;

}
header{

border-bottom:1px solid rgba(0,0,0,0.2);
box-shadow:inset 0 -10px 20px rgba(0,0,0,0.15);

}

/* HEADER LAYOUT */

.header-inner{
position:relative;
}

/* SEARCH BOX */

.header-search{

position:absolute;
top:10px;
right:10px;

}

/* SEARCH INPUT */

.header-search input[type="search"],
.header-search input[type="text"]{

padding:4px 6px;
font-size:13px;

border:1px solid #9db3c5;

border-radius:4px;

background:white;

}

/* SEARCH BUTTON */

.header-search input[type="submit"]{

padding:4px 8px;
font-size:12px;

border:1px solid #9db3c5;

background:#e6eef5;

border-radius:4px;

cursor:pointer;

}

.header-search input[type="submit"]:hover{
background:#d6e4ef;
}
.header-search input[type="search"],
.header-search input[type="text"]{
width:120px;
}



/* CONTENT */

main{
grid-area:content;
padding:20px;
}

article{
margin-bottom:40px;
}

h2{
font-weight:400;
}
main{
grid-area:content;
padding:22px 24px;
line-height:1.65;
}
main p{
margin-bottom:1.2em;
}
article h2{

margin-left:-2px;

letter-spacing:.3px;

}
article p:first-of-type{
color:#222;
}

/* SIDEBAR */

aside{

grid-area:sidebar;

padding:20px;

background:#f3f3f3;

box-shadow:
inset 1px 0 0 #ffffff;

}

article h2{
margin-top:0;
margin-bottom:10px;
font-size:24px;
}


/* FOOTER */

footer{

grid-area:footer;
padding:20px;
text-align:center;
font-size:14px;
border-radius:0 0 12px 12px;
}



/* LINKS */

a{
color:#21759b;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* MOBILE */

@media(max-width:700px){

.site{

grid-template-columns:1fr;

grid-template-areas:

"header"
"content"
"sidebar"
"footer";

}

}

/* POST DATE */

.post-date{

font-size:13px;
color:#777;

margin-bottom:15px;

}

/* POST META */

.post-meta{

margin:25px 0 35px;

padding-top:10px;

font-size:13px;
color:#666;

border-top:1px solid #ddd;

text-align:center;

}
.post-meta a{
color:#777;
}

.post-meta a:hover{
color:#21759b;
}

/* COMMENTS */

.comments-area{
margin-top:40px;
}

.comment{
margin-bottom:20px;
padding-bottom:15px;
border-bottom:1px solid #eee;
}

.comment-author{
font-weight:bold;
}
/* DEBUG GRID MODE */

.debug-grid .site{
outline:3px solid red;
}

.debug-grid header{
outline:3px solid orange;
}

.debug-grid main{
outline:3px solid green;
}

.debug-grid aside{
outline:3px solid blue;
}

.debug-grid footer{
outline:3px solid purple;
}