/*
ABOUTME: Child theme stylesheet for the Barony of the Flaming Gryphon website.
ABOUTME: Inherits from GeneratePress parent theme; baronial colors and typography overrides live here.

Theme Name:   Flaming Gryphon
Theme URI:    https://flaminggryphon.midrealm.org
Description:  Child theme for the Barony of the Flaming Gryphon, built on GeneratePress.
Author:       Barony of the Flaming Gryphon Webminister
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         SCA, baronial, medieval, responsive
Text Domain:  flaming-gryphon
*/

/* =========================================================
   Baronial Color Palette — sourced from the actual garland-custom theme CSS
   saved at docs/Barony of the Flaming Gryphon_files/style.css

   Key values from the original:
   - body bg: #fcf7ed (warm cream) + gradient at top
   - nav (#header-region): #faedd4 (warm golden cream) + bg texture
   - nav link text: #fff (white on the warm cream nav)
   - nav active/hover: #fff text + small indicator at top of item
   - header title: #fff with text-shadow #debb13 (golden glow)
   - body text: #201d1d (near-black), links: #8b090f (dark maroon)
   - font: 16px/140% "Times New Roman", Times, serif
   - headings: "Benegraphic", "Times New Roman", Times, serif
   ========================================================= */

:root {
  /* Override GeneratePress CSS variables */
  --contrast:   #201d1d;   /* body text */
  --contrast-2: #6e6c6c;   /* secondary/meta text */
  --contrast-3: #faeed5;   /* borders (cream/tan) */
  --base:       #6c0000;   /* nav background (dark red) */
  --base-2:     #fcf7ed;   /* page background (warm cream) */
  --base-3:     #ffffff;   /* content background (white) */
  --accent:     #8b090f;   /* links (dark maroon) */
}

/* =========================================================
   Body — warm cream background with subtle golden gradient at top
   ========================================================= */

body {
  background-color: #fcf7ed;
  background-image: linear-gradient(to bottom, #f0d99a 0px, #fcf7ed 180px);
  background-repeat: no-repeat;
  color: #201d1d;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 140%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
}

/* =========================================================
   Site Header — transparent so gradient shows through
   Title text is dark maroon for readability against the cream background
   ========================================================= */

.site-header {
  background-color: transparent !important;
}

/* Constrain the heraldic arms logo */
.site-logo img.is-logo-image,
.site-logo img.header-image {
  max-height: 80px;
  width: auto;
}

.site-title a,
.site-title a:visited,
.main-title a,
.main-title a:hover {
  color: #6c0000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.site-description {
  color: #6e6c6c;
  font-style: italic;
  font-size: 0.9em;
}

/* =========================================================
   Navigation — dark red background
   Nav link text: #fff (WHITE) on dark red
   Active/hover: golden top border indicator
   ========================================================= */

.main-navigation {
  background-color: #6c0000 !important;
  background-image: linear-gradient(to bottom, #8b0000, #5a0000) !important;
}

.main-nav ul li a,
.main-navigation .main-nav ul li a {
  color: #fff !important;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  padding: 0.75em 1em 0.6em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Active nav item: golden top border indicator (replaces bg-navigation-item.png) */
.main-nav ul li.current-menu-item > a,
.main-nav ul li.current-page-ancestor > a {
  color: #fff !important;
  border-top: 3px solid #e1b558;
  padding-top: calc(0.75em - 3px) !important;
}

/* Hover: golden top border indicator (replaces bg-navigation-item-hover.png) */
.main-nav ul li a:hover,
.main-navigation .main-nav ul li a:hover {
  color: #fff !important;
  border-top: 3px solid #debb13;
  padding-top: calc(0.75em - 3px) !important;
}

/* Dropdown sub-menus */
.main-nav ul ul {
  background-color: #6c0000 !important;
  background-image: linear-gradient(to bottom, #8b0000, #5a0000) !important;
  border-top: 1px solid #e1b558;
}

.main-nav ul ul li a,
.main-navigation .main-nav ul ul li a {
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 0.4em 1em !important;
  background-image: none !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  border-top: none !important;
}

.main-nav ul ul li a:hover {
  color: #fff !important;
  background-color: rgba(0,0,0,0.2) !important;
  border-top: none !important;
}

/* ── Mobile nav ─────────────────────────────────────────── */

.menu-toggle {
  color: #fff !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 3px;
  padding: 0.4em 0.7em;
}

.menu-toggle:hover,
.menu-toggle:focus {
  border-color: #fff;
  background-color: rgba(0,0,0,0.2);
}

.menu-toggle .gp-icon svg {
  fill: currentColor;
}

@media (max-width: 768px) {
  .main-navigation,
  .main-navigation .main-nav {
    background-color: #6c0000 !important;
    background-image: linear-gradient(to bottom, #8b0000, #5a0000) !important;
  }

  .main-nav ul li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  .main-nav ul li a,
  .main-navigation .main-nav ul li a {
    display: block;
    padding: 0.75em 1.2em !important;
    color: #fff !important;
    background-image: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    border-top: none !important;
  }

  .main-nav ul li a:hover,
  .main-nav ul li.current-menu-item > a {
    background-color: rgba(0,0,0,0.2) !important;
    color: #fff !important;
    border-top: none !important;
  }

  .main-nav ul ul {
    border-left: 3px solid #e1b558;
    background-image: none !important;
  }
}

/* =========================================================
   Links
   ========================================================= */

a:link, a:visited {
  color: #8b090f;
  text-decoration: none;
}

a:hover {
  color: #6c0707;
  text-decoration: underline;
}

/* =========================================================
   Content area — white background
   ========================================================= */

.separate-containers .inside-article,
.separate-containers .comments-area,
.one-container .container {
  background-color: #fff;
}

/* =========================================================
   Tables — match original striping
   ========================================================= */

thead th {
  border-bottom: 2px solid #faeed5;
  color: #201d1d;
  font-weight: bold;
}

tr:nth-child(odd) {
  background-color: #fcf7ed;
}

tr:nth-child(even) {
  background-color: #fff;
}

td, th {
  padding: .3em .5em;
}

/* =========================================================
   Sidebar / widgets — warm cream with golden borders
   ========================================================= */

.widget-area .widget {
  background-color: #fdf3e0;
  border: solid #faeed5;
  border-width: 1px 0;
  padding: 1em;
  margin-bottom: 1em;
}

.widget-title {
  color: #201d1d;
  border-bottom: 1px solid #e1b558;
  padding-bottom: 0.4em;
}

/* =========================================================
   Horizontal rule — golden amber
   ========================================================= */

hr {
  border: none;
  height: 1px;
  background: #e1b558;
  margin: 1em 0;
}

/* =========================================================
   Site Footer
   ========================================================= */

.site-footer {
  background-color: transparent;
  color: #6e6c6c;
  border-top: 1px solid #faeed5;
  font-size: 0.85em;
  text-align: center;
}

.site-footer a {
  color: #8b090f;
}

.site-footer a:hover {
  color: #6c0707;
}

/* =========================================================
   SCA Disclaimer Block — About/Legal page
   ========================================================= */

.sca-disclaimer {
  border: solid #faeed5;
  border-width: 1px 0;
  border-left: 4px solid #8b090f;
  background: #fdf3e0;
  padding: 1em 1.5em;
  margin: 2em 0;
  font-size: 0.9em;
  color: #201d1d;
}