/*
Theme Name:  Decorator V5
Theme URI:   https://www.ucsd.edu
Description: A WordPress classic theme built on the UC San Diego Decorator V5 design system. Supports full-width, two-column, and homepage layouts. Compatible with WordPress 6.0+.
Version:     1.0.0
Author:      UC San Diego Web Services
Author URI:  https://www.ucsd.edu
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: decorator-v5
Tags:        two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   Base theme styles are loaded via Decorator V5 CDN.
   Add site-specific overrides below.
   ============================================================ */

/* Brand color reference (do not remove — used by child themes) */
:root {
  --color-navy:        #182B49;
  --color-blue:        #00629B;
  --color-blue-dark:   #004268;
  --color-blue-light:  #2b92b9;
  --color-gold:        #FFCD00;
  --color-white:       #FFFFFF;
  --color-gray-light:  #f5f5f5;
  --color-gray:        #e7e7e7;
  --color-text:        #333333;
}

/* ── Sidebar nav active state ─────────────────────────────── */
.main-content-nav li.active > a,
.main-content-nav li.active > span {
  border-left: 4px solid var(--color-gold);
}

/* ── WordPress alignment classes ──────────────────────────── */
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.alignnone  { margin: 0 0 1em; }

img.alignleft, img.alignright, img.aligncenter, img.alignnone {
  max-width: 100%;
  height: auto;
}

/* ── WordPress caption ────────────────────────────────────── */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85em; color: #666; margin-top: 4px; }

/* ── Sticky post indicator ────────────────────────────────── */
.sticky .entry-title::before {
  content: "Featured";
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy);
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Search form ──────────────────────────────────────────── */
.search-form .search-field { width: 70%; }
.search-form .search-submit { width: 28%; }

/* ── Comment form ─────────────────────────────────────────── */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination { margin: 2em 0; }

/* ── Screen reader text (WP requirement) ──────────────────── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ── Sidebar callout box ──────────────────────────────────── */
.sidebar-callout {
  margin-top: 1.5em;
  background: var(--color-gray-light);
  border-left: 4px solid var(--color-blue);
}

/* ── No-results / 404 page ────────────────────────────────── */
.no-results .page-header,
.error404 .page-header {
  margin-bottom: 1.5em;
}

/* ── Post navigation ──────────────────────────────────────── */
.post-navigation {
  margin: 2em 0;
  overflow: hidden;
}
.post-navigation .nav-previous { float: left; }
.post-navigation .nav-next     { float: right; }

/* ── Entry meta ───────────────────────────────────────────── */
.entry-meta {
  font-size: 0.875em;
  color: #666;
  margin-bottom: 1em;
}
.entry-meta a { color: var(--color-blue); }

/* ── Comments ─────────────────────────────────────────────── */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid var(--color-gray); }
.comment-author .avatar { border-radius: 50%; margin-right: 8px; }

/* ── Sidebar: style default WP widgets to match Decorator V5 nav ─── */
.sidebar-section .widget { margin-bottom: 1.5em; }
.sidebar-section .widget-title {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  color: #182B49;
  border-bottom: 2px solid #00629B;
  padding-bottom: 0.4em;
  margin-bottom: 0;
}
.sidebar-section .widget ul {
  list-style: none; padding: 0; margin: 0;
  background: #eee; border: 1px solid #d8d7d7;
}
.sidebar-section .widget ul li { border-top: 1px solid #d8d7d7; }
.sidebar-section .widget ul li a {
  display: block; padding: 0.75em 1em;
  color: #333; text-decoration: none; font-size: 0.9em;
}
.sidebar-section .widget ul li a:hover {
  background-color: #00629B; color: #fff;
}
/* Fix: prevent search dropdown from showing open on load */
.search-content { display: none; }
.search-content.search-is-open { display: block; }
/* Breathing room under navbar */
.layout-main > .container:first-child { padding-top: 0.5em; }

/* ── Front page: remove top padding so hero bleeds to navbar ─── */
.home .layout-main > .container:first-child,
.front-page .layout-main > .container:first-child {
  padding-top: 0;
}
/* Hero on front page: no top margin */
.home .jumbotron-hero,
.front-page .jumbotron-hero {
  margin-top: 0 !important;
}
/* Ensure carousel images are visible and sized correctly */
.jumbotron-hero .carousel-inner > .item > img {
  width: 100%;
  height: auto;
  min-height: 300px;
  object-fit: cover;
}
/* jumbotron-cta-blocks: ensure .flex is not constrained by .row */
.jumbotron-cta-blocks .flex {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
}
.jumbotron-cta-blocks .wrapper {
  flex: 1 1 calc(33% - 20px);
  min-width: 200px;
}
@media (max-width: 768px) {
  .jumbotron-cta-blocks .wrapper {
    flex: 1 1 calc(50% - 20px);
  }
}
@media (max-width: 480px) {
  .jumbotron-cta-blocks .wrapper {
    flex: 1 1 100%;
  }
}