/* ==========================================================================
   CSS VARIABLES & Fonts
   ========================================================================== */
/*#region CSS Variables*/
:root {
  /* https://teamcolorcodes.com/philadelphia-eagles-color-codes/ */
  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);
  --color-offwhite: hsl(0, 0%, 98%);

  /* Primary Team Colors */
  --color-reebok-green: hsl(191, 91%, 9%); /* reebok green? */
  --color-jersey-silver: hsl(210, 7%, 80%);
  --color-nike-green: hsl(186, 100%, 17%); /* nike "sport teal"? */
  --color-darkmode-link: hsl(174, 87%, 29%); /* JCT; passes wcag */

  /* Throwback Team Colors */
  --color-kelly-green: hsl(148, 93%, 21%);
  --color-facemask-gray: hsl(206, 7%, 60%);

  /* Theme: Midnight Green */
  --color-eagles-primary: var(--color-reebok-green);
  --color-eagles-secondary: var(--color-jersey-silver);
  --color-link: var(--color-nike-green);

  /* Theme: Kelly Green */
  /*
  --color-eagles-primary: var(--color-kelly-green);
  --color-eagles-secondary: var(--color-facemask-gray);
  --color-link: var(--color-kelly-green);
  */

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-serif: Georgia, serif;
  --font-size-base: 1.25rem;
  --border-radius: 0.75rem;
  --border-width: 5px;

  /* Breakpoints */
  --breakpoint-mobile: 550px;
  --breakpoint-desktop: 601px;
  --breakpoint-wide: 1400px;
}

@font-face {
  font-family: "NFLEagles";
  src: url("./font/NFLEagles.woff2") format("woff2"),
    url("./font/NFLEagles.woff") format("woff"),
    url("./font/NFLEagles.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*#endregion*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
/*#region Base Styles*/
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  height: 100%;
  background-color: var(--color-eagles-primary);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.6;
}

a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
}

a:hover,
.footer a:hover {
  color: var(--color-eagles-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer a,
.footer a:hover {
  color: var(--color-white);
}

hr {
  margin-top: 35px;
  width: 100%;
  color: var(--color-eagles-primary);
  clear: both;
}

/*#endregion*/

/* ==========================================================================
   LAYOUT - GRID SYSTEM
   ========================================================================== */
/*#region Layout - Grid System*/
#wrapper {
  height: 100%;
  width: 1000px;
  margin: 0 auto -100px;
}

.grid-container {
  display: grid;
  margin: 0 auto;
  width: 1000px;
  grid-template-columns: 69% 29%;
  grid-template-rows: auto;
  column-gap: 2%;
  grid-template-areas:
    "header header"
    "posts sidebar"
    "footer footer";
}

.header {
  grid-area: header;
  place-items: center;
  width: 100%;
}

.header a {
  display: block;
  color: var(--color-eagles-secondary);
}

.header a:hover {
  text-decoration: none;
}

.content,
.sidebar {
  border: var(--border-width) solid var(--color-eagles-secondary);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
}

.content {
  grid-area: posts;
  text-align: left;
  padding: 1.8rem;
  min-height: 420px;
}

.sidebar {
  grid-area: sidebar;
  align-self: start;
  /* Makes sidebar shrink to content height */
  margin: 0;
  padding: 1.8rem 0;
  /* this 0 horizontal padding may be a mistake */
}

.footer {
  grid-area: footer;
  color: var(--color-eagles-secondary);
  padding: 2rem 0;
  text-align: center;
}

/*#endregion*/

/* ==========================================================================
   HEADER
   ========================================================================== */
/*#region Header*/
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin: 1.5rem auto 2rem;
  padding: 0;
  color: var(--color-white);
  font-family: "NFLEagles";
  font-weight: normal;
  font-style: normal;
}

.header .eagles-logo {
  grid-area: logo;
  aspect-ratio: 250 / 173;
  height: 100%;
}

.header .title {
  margin-left: 2rem;
}

.header .title:hover .site-title {
  color: var(--color-white);
}

/* h1 */
.header .site-title {
  color: var(--color-eagles-secondary);
  font-size: 4rem;
  letter-spacing: 3px;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.header .byline {
  color: var(--color-white);
  text-align: right;
}

/*#endregion*/

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
/*#region Typography*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-eagles-primary);
  line-height: 1.35;
  margin: 0 0 0.5em;
  text-decoration: none;
  font-weight: bold;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.3rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
  font-weight: normal;
}

/*#endregion*/

/* ==========================================================================
   POSTS
   ========================================================================== */
/*#region Post Typography*/
.post p {
  margin: 0.5rem 0 1rem;
  font-style: normal;
}

.post em {
  font-style: italic;
}

/* `.post small` targets "Posted [date] | 23 Comments" */
.post small {
  font-size: 0.9rem;
  font-style: normal;
}

.post .indent {
  padding-left: 10px;
}

.post .indent p {
  padding-left: 10px;
}

.post abbr {
  font-weight: normal;
}

.post ul {
  list-style: circle;
  margin: 0 0 0 2.5rem;
}

.post ol {
  list-style: decimal;
  margin: 0 0 0 2.5rem;
}

.twitter-tweet,
.twitter-tweet-rendered {
  /* tweets have margin-top: 10px; margin-bottom: 10px; */
  margin: 2rem auto !important;
}

.post .wp-caption {
  background: var(--color-white);
  border: 1px solid var(--color-eagles-secondary);
  margin: 10px;
  text-align: center;
  padding: 5px 0 0;
}

.post .wp-caption-text {
  margin: 0;
}

.post .wp-caption a,
.post .wp-caption a:hover {
  border-bottom: 0;
}

.post blockquote {
  color: #333333;
  border-left: 5px solid #ccc;
  margin: 15px 30px 0 10px;
  padding-left: 20px;
}

.post pre {
  font-family: courier;
  font-size: 12px;
  letter-spacing: -1px;
  margin: 14px 0 14px 0;
}

.post .message ul {
  margin: 12px 0 0;
}

.post .message {
  display: none;
  background: #0f67a1;
  margin-top: 10px;
  padding: 20px;
  color: var(--color-white);
}

/*#endregion*/

/* ==========================================================================
   COMPONENTS - SIDEBAR
   ========================================================================== */
/*#region Sidebar*/
/* Style the Search Label (title; "Search") to look like an H3 */
.sidebar h3,
.sidebar .widget_search label {
  font-size: 1.2em;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid var(--color-eagles-primary);
  margin-bottom: 0.8rem;
}

/* Support Iggles Blitz */
.widget_media_image figure a,
.widget_media_image figure a img {
  display: block;
  margin: 0 auto;
}

/* Recent Posts */
.sidebar .block li {
  margin-left: 1.5em;
  padding-left: 0;
  /* this is so stupid; hides a ' 0' after each bookmark */
  color: var(--color-white);
}

.sidebar .block + .block h3,
.sidebar .block + .block label {
  margin-top: 1.5rem;
}

.sidebar .widget_search label {
  display: block;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid var(--color-eagles-primary);
}

.sidebar .wp-block-search__inside-wrapper {
  margin: 0 0.5rem;
  border: 1px solid #767676;
  /* matches border around select dropdown */
  border-radius: 2px;
}

/* sidebar prefix is for specificity and avoids !important */
.sidebar .wp-block-search__button {
  margin-left: 0;
}

#archives-dropdown-3 {
  width: 96%;
  font-size: 1.2rem;
  margin: 0 auto;
  display: block;
  height: 2rem;
}

/*#endregion*/

/* ==========================================================================
   COMPONENTS - COMMENTS
   ========================================================================== */
/*#region Comments*/

.dsq-comment-meta a,
.dsq-comment-actions a {
  font-size: 0.9rem;
}

/*#endregion*/

/* ==========================================================================
   UTILITIES
   ========================================================================== */
/*#region Utilities*/

/* Older Entries / Newer Entries links on page 2, for instance */
.content .navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.content .navigation a {
  text-align: center;
}

/*#endregion*/

/* ==========================================================================
   DARK MODE
   ========================================================================== */
/*#region Dark Mode*/
/* Dark Mode - Desktop */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-black);
    color: var(--color-eagles-secondary);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-eagles-secondary);
  }

  a {
    color: var(--color-darkmode-link);
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
  }

  a:hover,
  .footer a:hover {
    color: var(--color-darkmode-link);
  }

  .footer a {
    color: var(--color-darkmode-link);
  }

  a:hover,
  .footer a:hover {
    color: var(--color-eagles-secondary);
  }

  .content,
  .sidebar {
    border: none;
  }

  .content {
    color: var(--color-eagles-secondary);
    background: var(--color-black);
  }

  .content a:hover {
    color: var(--color-white);
  }

  .content blockquote {
    color: var(--color-eagles-secondary);
  }

  .sidebar {
    background: var(--color-black);
    color: var(--color-eagles-secondary);
  }

  .sidebar h3,
  .sidebar .widget_search label {
    color: var(--color-eagles-secondary);
    border-bottom-color: var(--color-eagles-secondary);
  }

  .wp-block-search__input,
  .wp-block-search__input::placeholder {
    background: var(--color-darkmode-link);
    color: var(--color-white);
  }

  .sidebar .wp-block-search__inside-wrapper {
    margin: 0;
    border: 0;
  }

  #archives-dropdown-3 {
    width: 100%;
    background-color: var(--color-darkmode-link);
    color: var(--color-eagles-secondary);
  }
}

/* Dark Mode - Mobile */
/* @media (prefers-color-scheme: dark) and (max-width: 550px) {
  .content {
    color: var(--color-white);
    background: var(--color-black);
    border: none;
    border-radius: 0;
  }

  .content a {
    color: var(--color-eagles-secondary);
    font-size: 1rem;
  }

  .content a:hover {
    color: var(--color-white);
  }

  .content blockquote {
    color: var(--color-eagles-secondary);
    border-left-color: var(--color-eagles-secondary);
  }

  .header {
    background: var(--color-black);
  }
} */
/*#endregion*/

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
/*#region Resonsive Design*/
@media screen and (max-width: 620px) {
  body {
    font-size: 1.1rem;
  }

  .grid-container {
    width: 100%;
    grid-template-areas: "header" "posts" "sidebar" "footer";
    grid-template-columns: 100%;
    grid-template-rows: none;
    column-gap: 0;
  }

  .header {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .header .title {
    margin: 2rem 0 0;
  }

  .header .title .site-title {
    font-size: 3rem;
  }

  .header .title .byline {
    font-size: 1rem;
  }

  .content,
  .sidebar {
    border: 0;
    border-radius: 0;
  }

  .sidebar {
    margin-top: 2rem;
  }
}

/*#endregion*/