/*
Theme Name: HDCG Nepal
Theme URI: https://hdcgnepal.org
Author: HDCG Nepal
Author URI: https://hdcgnepal.org
Description: Custom Bootstrap-based WordPress theme for Hill Development & Conservation Group Nepal. Built with a green/gold brand palette (#0A6439 / #DDA710) matching the organization's homepage design (hero slider, About, Areas of Impact, News & Highlights, Notices, Partners).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hdcg-theme
*/

/* ==========================================================================
   Brand variables
   These mirror the Sass variables compiled into assets/css/bootstrap.min.css
   (see assets/scss/_variables.scss) and are also exposed here as CSS custom
   properties for any inline/theme-specific styling that isn't Bootstrap.
   ========================================================================== */
:root {
  --hdcg-primary: #0A6439;   /* HDCG green */
  --hdcg-secondary: #DDA710; /* HDCG gold */
  --hdcg-primary-dark: #084f2d;
  --hdcg-light-bg: #f4f4f4;
  --hdcg-text: #212529;
  --hdcg-font-body: Arial, Helvetica, sans-serif;
  --hdcg-font-heading: Arial, Helvetica, sans-serif;
  --hdcg-header-height: 90px; /* Keep in sync with .site-header .navbar min-height below */
}

/* ==========================================================================
   Bootstrap 5.3 color override (no Sass build required)
   ---------------------------------------------------------------------------
   Bootstrap 5.3+ exposes its palette as CSS custom properties (--bs-primary,
   --bs-primary-rgb, etc.) rather than only baking colors into compiled CSS.
   Because this stylesheet loads AFTER bootstrap.min.css (see functions.php),
   redeclaring these variables here overrides them for every component that
   references var(--bs-primary) — buttons, links, active nav states, focus
   rings, badges, alerts, etc. This works with the stock downloaded Bootstrap
   build, so no Node.js / npm / Sass compile step is required.
   ========================================================================== */
:root {
  --bs-primary: #0A6439;
  --bs-primary-rgb: 10, 100, 57;
  --bs-primary-text-emphasis: #084f2d;
  --bs-primary-bg-subtle: #d9ebe1;
  --bs-primary-border-subtle: #a9d1bb;

  --bs-secondary: #DDA710;
  --bs-secondary-rgb: 221, 167, 16;
  --bs-secondary-text-emphasis: #8f6a0a;
  --bs-secondary-bg-subtle: #faedcc;
  --bs-secondary-border-subtle: #f1d383;

  --bs-link-color: #0A6439;
  --bs-link-color-rgb: 10, 100, 57;
  --bs-link-hover-color: #084f2d;
  --bs-link-hover-color-rgb: 8, 79, 45;
}

/* A handful of Bootstrap components hardcode blue in box-shadows/gradients
   rather than reading the variable above — patch those explicitly. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #084f2d;
  --bs-btn-hover-border-color: #084f2d;
  --bs-btn-active-bg: #084f2d;
  --bs-btn-active-border-color: #073f24;
  --bs-btn-focus-shadow-rgb: 10, 100, 57;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 10, 100, 57;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(10, 100, 57, 0.25);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(10, 100, 57, 0.25);
}

body {
  font-family: var(--hdcg-font-body);
  color: var(--hdcg-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hdcg-font-heading);
  font-weight: 700;
  color: var(--hdcg-primary);
}

a {
  color: var(--hdcg-primary);
}

a:hover {
  color: var(--hdcg-primary-dark);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.site-header .navbar {
  min-height: var(--hdcg-header-height);
}

.site-header .navbar-brand img {
  max-height: 55px;
}

.site-header .nav-link {
  font-weight: 600;
  color: var(--hdcg-text);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  color: var(--hdcg-primary);
}

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.hero-carousel .carousel-item {
  /* Fills the rest of the screen below the header, so the whole slide is
     visible on desktop without scrolling. 100dvh is used as the primary
     value where supported (accounts for mobile browser toolbars); 100vh
     is the fallback for older browsers. */
  height: calc(100vh - var(--hdcg-header-height));
  height: calc(100dvh - var(--hdcg-header-height));
  min-height: 400px; /* safety floor for very short browser windows */
  background-size: cover;
  background-position: center;
}

.hero-carousel .carousel-caption {
  left: auto;
  right: 5%;
  bottom: 12%;
  text-align: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  max-width: 420px;
}

.hero-carousel .carousel-caption h3 {
  font-size: 1.00rem;
  color: #fff;
  margin-bottom: 0.25rem;
}

.hero-carousel .carousel-caption p {
  font-size: 0.9rem;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--hdcg-secondary);
}

/* ==========================================================================
   About section
   ========================================================================== */
.about-section {
  background: var(--hdcg-light-bg);
  padding: 4rem 0;
}

.about-section .btn-outline-primary {
  border-color: var(--hdcg-primary);
  color: var(--hdcg-primary);
}

.about-section .btn-outline-primary:hover {
  background-color: var(--hdcg-primary);
  color: #fff;
}

.about-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Areas of Impact
   ========================================================================== */
.impact-card {
  text-align: center;
  padding: 1.5rem 1rem;
}

.impact-card .impact-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 1rem;
}

.impact-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0;
}

/* ==========================================================================
   News & Highlights
   ========================================================================== */
.news-card {
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.news-card .card-img-top {
  height: 220px;
  object-fit: cover;
}

.news-card .card-title {
  font-size: 1.1rem;
  color: var(--hdcg-text);
}

.news-card .btn-outline-primary {
  border-color: var(--hdcg-primary);
  color: var(--hdcg-primary);
}

/* ==========================================================================
   Notices
   ========================================================================== */
.notices-section {
  background: var(--hdcg-light-bg);
  padding: 3rem 0;
}

.notice-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1rem 0;
}

.notice-item .notice-date {
  color: #6c757d;
  font-size: 0.9rem;
}

/* ==========================================================================
   Partners
   ========================================================================== */
.partners-section {
  padding: 3rem 0;
}

.partners-section img {
  max-height: 70px;
  width: auto;
  filter: grayscale(20%);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--hdcg-primary);
  color: #fff;
  padding: 1.5rem 0;
  text-align: center;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
}