/* === Bridge CSS: Apply Grok's design to Joomla/SunFW markup === */
/* Uses design tokens from grok-site.css (:root variables) */

/* === Override Joomla defaults with Grok palette === */
body#sunfw-master {
  font-family: var(--font) !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  line-height: 1.75 !important;
}
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }

/* === Header: warm gradient like Grok === */
#sunfw_section_header {
  background: linear-gradient(180deg, #fffdf9 0%, #f6efe4 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  padding: 0.5rem 0;
}

/* Hide broken logo image */
.sunfw-logo img {
  visibility: hidden;
}
.sunfw-logo {
  min-height: 40px;
}

/* === Navigation: sticky dark bar === */
nav.navbar,
.navbar-default {
  background: var(--nav) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-nav > li > a {
  color: #f5efe6 !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.95rem !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li.current > a,
.navbar-nav > li.open > a {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.navbar-nav .dropdown-menu,
.navbar-nav .dropdown-submenu .dropdown-menu {
  background: #2a2218 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.4rem !important;
  box-shadow: var(--shadow) !important;
}
.navbar-nav .dropdown-menu > li > a {
  color: #f0e8dc !important;
  border-radius: 6px !important;
  padding: 0.45rem 0.7rem !important;
  font-size: 0.9rem !important;
  background: transparent !important;
  text-shadow: none !important;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li.active > a {
  background: rgba(255,255,255,.1) !important;
}
.navbar-header .navbar-toggle {
  border-color: rgba(255,255,255,.3) !important;
  background: transparent !important;
}
.navbar-header .navbar-toggle .icon-bar {
  background-color: #f5efe6 !important;
}

/* === Content area === */
#sunfw_section_component {
  padding: 1rem 0 2.5rem;
  min-height: 55vh;
}

/* === Hero banner overrides === */
.hero {
  border-radius: var(--radius) !important;
  margin: 0.5rem 0 1.5rem !important;
}

/* === Hide broken images globally === */
img[src*="30years"] {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* Hide completely broken images (naturalWidth=0 after load) */
img.broken-img {
  opacity: 0.15;
  border: 1px dashed var(--line);
  max-height: 60px;
}

/* === Header cards section: tidy up === */
#sunfw_section_header_B3w2hveM {
  padding: 0.5rem 0 1rem !important;
}
#sunfw_section_header_B3w2hveM .pf-link-box,
#sunfw_section_header_B3w2hveM [data-pf-type="link-box"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .15s ease, box-shadow .15s;
  overflow: hidden;
}
#sunfw_section_header_B3w2hveM [data-pf-type="link-box"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(44,36,22,.12);
}

/* === Promo section: reduce visual noise === */
#sunfw_section_promo {
  margin-bottom: 0.5rem;
}

/* === Article content: cleaner typography === */
.item-page h1,
.item-page h2,
.page-header h2,
.page-header h1 {
  color: var(--nav) !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}
.article-info {
  color: var(--accent) !important;
  font-size: 0.92rem !important;
}
.articleBody p,
.item-page .article-body p,
.entry-content p {
  margin: 0 0 0.85rem;
  font-size: 1.02rem;
}

/* === Blog list cards (sub-pages with article lists) === */
.items-row {
  margin-bottom: 1rem;
}
.items-row .page-header,
.items-row h2 {
  font-size: 1.15rem !important;
  margin-bottom: 0.3rem !important;
  border-bottom: none !important;
}
.items-row .page-header a,
.items-row h2 a {
  color: var(--accent-deep) !important;
  text-decoration: none !important;
}
.items-row .page-header a:hover {
  color: var(--accent) !important;
}

/* === Article thumbnails: card-like look === */
.items-row .item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.items-row .item img {
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

/* === Sidebar module === */
.mod-share,
.module-style,
.module-style-2 {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 1rem 1.15rem !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 1.2rem;
}
.mod-share .box-title,
.module-style h3 {
  color: var(--accent-deep) !important;
  font-size: 1.05rem !important;
  border: none !important;
  background: transparent !important;
  margin-bottom: 0.6rem !important;
  padding: 0 !important;
}
.mod-share .nav a,
.module-style .nav a {
  color: var(--accent) !important;
  padding: 0.3rem 0 !important;
}
.mod-share .nav a:hover {
  color: var(--accent-deep) !important;
}

/* === Timeline embed === */
#timeline-embed {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: #fff;
  margin: 1rem 0 2rem;
}

/* === Footer: dark bar with gold top border === */
#sunfw_section_footer {
  background: #2a2218 !important;
  color: #e8dfd0 !important;
  padding: 1.5rem 0 !important;
  border-top: 3px solid var(--gold) !important;
}
#sunfw_section_footer a {
  color: #f0d9a8 !important;
}
#sunfw_section_footer h4,
#sunfw_section_footer h3 {
  color: var(--gold) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.5rem !important;
}
#sunfw_section_footer ul {
  list-style: none !important;
  padding-left: 0 !important;
}
#sunfw_section_footer li {
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}

/* === PageFly overrides: cleaner look === */
[data-pf-type] {
  font-family: var(--font) !important;
}
[data-pf-type] h1,
[data-pf-type] h2,
[data-pf-type] h3,
[data-pf-type] h4 {
  color: var(--nav) !important;
}

/* === Images: better presentation === */
.articleBody img,
.item-page img,
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* === Buttons / Read more links === */
.readmore a,
.btn:not(.navbar-toggle),
.btn-primary,
a.btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.9rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background 0.15s;
  background-image: none !important;
}
.readmore a:hover,
.btn:not(.navbar-toggle):hover,
.btn-primary:hover {
  background: var(--accent-deep) !important;
  color: #fff !important;
}

/* === Clean up Bootstrap wells, panels, alerts === */
.well {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}

/* === Responsive: tighter nav on mobile === */
@media (max-width: 720px) {
  .navbar-nav > li > a {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.85rem !important;
  }
  #timeline-embed {
    height: 480px !important;
  }
  #sunfw_section_header_B3w2hveM {
    padding: 0.3rem 0 0.5rem !important;
  }
}