/*
Theme Name: Randy Corman Child
Description: Child theme of WP Bootstrap Starter that mimics the look of randycorman.com.
Template: wp-bootstrap-starter
Version: 1.0.0
Text Domain: randycorman-child
*/

:root {
  --rc-link: #2e84db;
  --rc-dark: #575a62;
  --rc-dark-2: #494c55;
  --rc-text: #333;
}

body {
  background: #e9ecef url("images/content.jpg") top left repeat;
  color: var(--rc-text);
  font: 15px/1.55 "Segoe UI", Calibri, "Myriad Pro", "Trebuchet MS", Helvetica, Arial, sans-serif;
}
.container { max-width: 960px; }

/* Banner */
/* Height must equal the image's native height. "contain" then scales the image
   to fit that height: native size on wide screens, shrinks on narrow ones,
   never enlarges. The grey fills the sides. */
.rc-banner {
  background:
    url("images/banner.jpg") center top / contain no-repeat,
    linear-gradient(#4a4d54, #7b8087);
  width: 100%;
  aspect-ratio: 960 / 231;   /* banner.jpg's native size: height shrinks with the width */
  max-height: 231px;
  box-shadow: inset 0 3px 5px -2px rgba(0,0,0,.45);
}

/* Menu / search strip */
.rc-strip {
  background: linear-gradient(#e3e7ea, #cfd4d9);
  border-bottom: 1px solid #b9bec4;
  padding: 10px 0;
  margin-bottom: 30px;
}
/* The parent styles header#masthead (higher specificity than .rc-strip), so match it */
header#masthead.rc-strip {
  background: linear-gradient(#e8ebee, #d2d7db);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aeb3b9;
  box-shadow: 0 4px 8px -3px rgba(0,0,0,.4);   /* soft shadow onto the page below */
  position: relative; z-index: 2;
}
/* Let the textured page background show through, as on the old site */
#content { background: transparent; }
#content .container { background: transparent; border: 0; }
.rc-strip .container { display: flex; align-items: center; justify-content: space-between; }
.rc-strip .navbar-nav { margin: 0; float: none; display: flex; }
.rc-strip .navbar-nav > li > a {
  color: #111; font-weight: 700; text-transform: uppercase;
  text-shadow: 0 1px 0 #fff; padding: 10px 14px;
}
.rc-strip .navbar-nav > li > a:hover,
.rc-strip .navbar-nav > .current-menu-item > a {
  background: #1f9ef6; color: #fff; text-shadow: 0 1px 2px #0a5182;
}
.rc-strip .search-form { display: flex; gap: 6px; margin: 0; }
.rc-strip .search-form label { margin: 0; }

/* Titles */
.entry-title, .entry-title a {
  color: #51545c; font-size: 30px; line-height: 1.25; font-weight: 700;
  letter-spacing: -1px; text-shadow: 0 1px 2px #fff; text-decoration: none;
}
.entry-title a:hover { color: #000; }

/* Meta bar: date block + avatar + byline + comments */
.entry-meta {
  display: flex; align-items: center; gap: 10px;
  margin: 15px 0 25px; padding: 0 12px 0 0;
  border: 1px solid #ccc;
  background: linear-gradient(#f3f5f6, #dde1e4);
  text-transform: uppercase; font-size: 12px; color: #444; text-shadow: 0 1px 0 #fff;
}
.entry-meta a { color: #333; }
.rc-date {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  padding: 4px 8px; text-align: center; line-height: 1.1;
  background: linear-gradient(#6a6d75, var(--rc-dark-2)); color: #fff;
  border-right: 1px solid #3c3f46; text-shadow: 0 1px 2px #444;
}
.rc-date .rc-year { font-size: 17px; font-weight: 700; }
.rc-avatar img { border: 2px solid #eee; box-shadow: 0 0 2px #999; display: block; }
.rc-comments { margin-left: auto; font-weight: 700; }

/* Content */
.entry-content a { color: var(--rc-link); text-decoration: underline; }
.entry-content a:hover { text-decoration: none; }
.entry-content img, .wp-caption {
  background: #fff; padding: 5px; box-shadow: 0 1px 2px #999; max-width: 100%; height: auto;
}
.wp-caption img { box-shadow: none; padding: 0; }
.wp-caption-text, figcaption { padding: 6px; font-weight: 700; text-align: center; }

/* Post footer: "Posted in ..." left, comment count right, soft divider below */
.entry-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  margin: 20px 0 0; padding-bottom: 25px; font-style: italic;
  position: relative;
}
.entry-footer .cat-links { font-weight: 700; color: #111; }
.entry-footer .cat-links .fa { color: #777; margin-right: 3px; }
.entry-footer .cat-links a,
.entry-footer .comments-link a { font-weight: 700; border-bottom: 1px dotted #accdee; text-decoration: none; }
.entry-footer .comments-link { margin-left: auto; }
.entry-footer::after {            /* the faded line with a soft shadow */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #b5bac0 20%, #b5bac0 80%, transparent);
  box-shadow: 0 2px 6px rgba(255,255,255,.9);
}
article.post { margin-bottom: 30px; }

/* Sidebar widgets */
#secondary.widget-area {
  background: none;
  border: 0;
  padding-top: 25px;
}
#secondary .widget {
  background: #fff; border: 1px solid #d5d8db; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); margin-bottom: 25px;
  padding: 0 0 18px; overflow: hidden;
}
/* Title bar: classic widgets (.widget-title) and block-widget headings */
#secondary .widget-title,
#secondary .widget .wp-block-heading {
  margin: 0 0 12px; padding: 10px 16px;
  background: linear-gradient(#6a6d75, var(--rc-dark-2)); border-bottom: 1px solid #3c3f46;
  color: #fff; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -1px;
  text-transform: uppercase; text-shadow: 0 1px 3px #333;
}
/* Everything except the title bar gets side margins, so the bar runs edge to edge */
#secondary .widget > *:not(.widget-title):not(.wp-block-heading):not(.wp-block-group),
#secondary .widget .wp-block-group > *:not(.wp-block-heading):not(.wp-block-group__inner-container),
#secondary .widget .wp-block-group__inner-container > *:not(.wp-block-heading) {
  margin-left: 16px; margin-right: 16px;
}
#secondary .widget .wp-block-group { margin: 0; padding: 0; }
#secondary .widget ul { padding-left: 0; list-style: none; }
#secondary .widget li { margin-bottom: 2px; }
#secondary .widget a { color: var(--rc-link); }
#secondary .widget li a {
  font-weight: 700; text-decoration: none;
  border-bottom: 1px dotted #accdee;
}
#secondary .widget li a:hover { border-bottom-color: #184573; color: #2365a7; }

/* Optional: add these classes to a Group block (Advanced > Additional CSS class) */
.rc-scroll ul { max-height: 320px; overflow-y: auto; }
.rc-cols ul { column-count: 2; column-gap: 20px; }

/* Forms */
input[type="text"], input[type="email"], input[type="search"], textarea {
  background: #f9f9f9; border: 2px solid #fff; border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2); font-weight: 700; padding: 8px 10px;
}
button, input[type="submit"], .btn, .btn-primary {
  background: linear-gradient(#6a6d75, #3d4047); border: 1px solid #333; border-radius: 5px;
  color: #ddd; font-weight: 700; letter-spacing: -.5px; text-transform: uppercase;
  text-shadow: 0 1px 2px #111;
}
button:hover, input[type="submit"]:hover, .btn:hover, .btn-primary:hover {
  color: #fff; background: linear-gradient(#777a82, #44474e);
}

/* Comments */
.comments-title {
  font-size: 22px; line-height: 1.3; font-weight: 700; font-style: italic;
  letter-spacing: -.5px; margin: 30px 0 20px;
}
.comment-list, .comment-list ul, .comment-list li { list-style: none; }
.comment-list { padding-left: 0; margin-left: 0; }
.comment-list .children { padding-left: 30px; margin-left: 0; }
.comment-body {
  background: #fff; border: 4px solid #eee; border-radius: 5px;
  box-shadow: 0 1px 6px #999; padding: 15px; margin-bottom: 25px;
}