/* =========================================================
   Clemson University Brand Styles
   Adapted for JointsWP (Foundation-based theme)
   ========================================================= */

/* ---------------------------------------------------------
   Brand Color + Typography Variables
   --------------------------------------------------------- */
:root {
  /* Colors */
  --clemson-blue: #005EB8;
  --clemson-navy: #00205B;
  --clemson-gray: #888B8D;

  --text-primary: #00205B;
  --text-secondary: #555555;
  --background-light: #ffffff;
  --background-muted: #f5f7f8;

  --link-color: #005EB8;
  --link-hover: #00205B;
  --border-color: #e0e0e0;

  /* Typography */
  --font-display: "Biotif", "Garet", "Century Gothic", "Avenir Next", Arial, sans-serif;
  --font-heading: "Trade Gothic Next LT", "Trade Gothic Next", "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --font-heading-condensed: "Trade Gothic Next LT", "Trade Gothic Next", "Libre Franklin", "Arial Narrow", Arial, sans-serif;
  --font-body: "Tiempos", "Source Serif Pro", "Georgia", "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------
   Base Typography
   --------------------------------------------------------- */
html {
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--background-light);
  line-height: 1.6;
  min-width: 320px;
  max-width: 1920px;
  margin: 0 auto;
}

p,
li,
dd,
dt,
blockquote,
figcaption {
  color: var(--text-secondary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--clemson-navy);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

h1,
h2 {
  font-family: var(--font-heading-condensed);
  letter-spacing: 0.02em;
}

/* UI fonts (Foundation forms/buttons/menus) */
button,
input,
select,
textarea,
.button,
.menu a,
.pagination,
.breadcrumbs,
.comment-metadata,
.wp-block-button__link {
  font-family: var(--font-ui);
}

/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */
a {
  color: var(--link-color);
  text-decoration: underline;
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: none;
}

strong {
  color: var(--text-primary);
  font-weight: 700;
}

em {
  font-style: italic;
}

/* ---------------------------------------------------------
   Header & Navigation (JointsWP / Foundation)
   --------------------------------------------------------- */
/* Common JointsWP header wrappers */
.header,
.site-header {
  background-color: var(--clemson-navy);
  border-bottom: 4px solid var(--clemson-blue);
}

/* Mobile title bar */
.title-bar {
  background-color: var(--clemson-navy);
  color: #ffffff;
}

.title-bar .menu-icon {
  filter: invert(1); /* improves visibility of default icon on dark background */
}

/* Top bar nav */
.top-bar {
  background-color: var(--clemson-navy);
}

.top-bar,
.top-bar ul {
  background-color: var(--clemson-navy);
}

/* Site name / brand area (varies by JointsWP implementation) */
.site-title a,
.site-description,
.header .site-title a,
.header .site-description {
  color: #ffffff;
}

.site-title a,
.header .site-title a,
.top-bar .site-title a,
.top-bar .menu-text a,
.top-bar .menu-text {
  font-family: var(--font-heading-condensed);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #ffffff;
}

/* Menu links */
.top-bar a,
.top-bar .menu a,
.main-navigation a {
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}

.top-bar a:hover,
.top-bar a:focus,
.top-bar .menu a:hover,
.top-bar .menu a:focus,
.main-navigation a:hover,
.main-navigation a:focus {
  color: var(--clemson-gray);
}

/* Dropdowns (Foundation) */
.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #ffffff transparent transparent;
}

.is-dropdown-submenu {
  background-color: var(--clemson-navy);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.is-dropdown-submenu .menu a {
  color: #ffffff;
}

.is-dropdown-submenu .menu a:hover,
.is-dropdown-submenu .menu a:focus {
  color: var(--clemson-gray);
}

/* ---------------------------------------------------------
   Buttons & Form Elements (Foundation + WP blocks)
   --------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link {
  background-color: var(--clemson-blue);
  color: #ffffff;
  border: none;
  padding: 0.6em 1.2em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0; /* Foundation default aesthetic; adjust if you want rounding */
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.button:focus,
.wp-block-button__link:focus {
  background-color: var(--clemson-navy);
  color: #ffffff;
}

input,
textarea,
select {
  border: 1px solid var(--border-color);
  padding: 0.5em;
  font-family: var(--font-ui);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--clemson-blue);
  outline: none;
}

/* ---------------------------------------------------------
   Content Areas (JointsWP)
   --------------------------------------------------------- */
/* JointsWP commonly uses .content; keep .site-content as fallback */
.content,
.site-content {
  background-color: var(--background-light);
}

/* Post/page titles */
.entry-title a,
h1.entry-title a {
  color: var(--clemson-navy);
  font-family: var(--font-heading-condensed);
  font-weight: 800;
  text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
  color: var(--clemson-blue);
}

/* Blockquotes inside content */
.entry-content blockquote,
.content blockquote,
.article-content blockquote {
  border-left: 4px solid var(--clemson-blue);
  padding-left: 1em;
  color: var(--clemson-gray);
  background-color: var(--background-muted);
  font-family: var(--font-body);
}

.entry-content blockquote cite,
.content blockquote cite,
.article-content blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-family: var(--font-ui);
  font-style: normal;
  color: var(--text-secondary);
}

/* Code snippets */
code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------------------------------------------------------
   Footer (JointsWP)
   --------------------------------------------------------- */
/* JointsWP often uses .footer; keep .site-footer as fallback */
.footer,
.site-footer {
  background-color: var(--clemson-navy);
  color: #ffffff;
  padding: 2rem 0;
  font-family: var(--font-ui);
}

.footer a,
.site-footer a {
  color: var(--clemson-gray);
}

.footer a:hover,
.footer a:focus,
.site-footer a:hover,
.site-footer a:focus {
  color: #ffffff;
}

/* ---------------------------------------------------------
   Utility Classes
   --------------------------------------------------------- */
.bg-clemson-blue {
  background-color: var(--clemson-blue);
  color: #ffffff;
}

.bg-clemson-navy {
  background-color: var(--clemson-navy);
  color: #ffffff;
}

.text-clemson-gray {
  color: var(--clemson-gray);
}

/* Typography utilities */
.font-display {
  font-family: var(--font-display);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}