/*
Theme Name:   FH8 Plugin Store
Description:  Theme for the Family Historian plugin store, styled to match the FH8 main-site theme. Standalone classic theme (replaces pluginstore2 / stacker-lite).
Author:       Jane Taubman
Version:      0.1.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fh8-pluginstore
*/

/* ==========================================================================
   Tokens (same palette as fh8-theme/theme.json)
   ========================================================================== */
:root {
  --fh8-navy: #383e53;
  --fh8-navy-soft: #5b6178;
  --fh8-orange: #e2862b;
  --fh8-orange-dark: #cc7420;
  --fh8-green: #8dc63f;
  --fh8-border: #e6e6e6;
  --fh8-bg-alt: #fafafa;
  --fh8-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --fh8-body: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fh8-bg-alt);
  color: var(--fh8-navy);
  font-family: var(--fh8-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh8-heading);
  font-weight: 600;
  color: var(--fh8-navy);
  line-height: 1.25;
  margin: 1.2em 0 .5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
img { max-width: 100%; height: auto; }

a { color: var(--fh8-orange); text-decoration: none; }
a:hover, a:focus { color: var(--fh8-orange-dark); text-decoration: underline; }

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
}

table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
th, td { border: 1px solid var(--fh8-border); padding: 8px 12px; text-align: left; }
th { background: var(--fh8-bg-alt); }

pre, code { font-family: Consolas, Menlo, monospace; font-size: .9rem; }
pre { background: #fff; border: 1px solid var(--fh8-border); padding: 1em; overflow: auto; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrapper { width: 95%; max-width: 1200px; margin: 2em auto; }
.masonryinside { margin: 1.5em 0 0; }

/* ==========================================================================
   Header (logo, title, search, menu) -- mirrors the main site header
   ========================================================================== */
.fh8ps-header { background: #fff; border-bottom: 4px solid var(--fh8-green); }

.fh8ps-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 10px;
}

.fh8ps-logo { display: block; line-height: 0; flex: 0 1 404px; }
.fh8ps-logo img { display: block; width: 404px; max-width: 100%; height: auto; }

.site-branding-sub { flex: 1 1 200px; }
.site-title { margin: 0; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; }
.site-title a { color: var(--fh8-navy); }
.site-title a:hover { text-decoration: none; color: var(--fh8-orange); }
.site-description { margin: 2px 0 0; font-family: var(--fh8-body); font-weight: 400; font-size: .95rem; color: var(--fh8-navy-soft); }

/* Search box (header) */
.fh8ps-header-search { flex: 0 1 320px; margin-left: auto; }
.search-form { display: flex; margin: 0; }
.search-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #c9ccd6;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  font: inherit;
  color: var(--fh8-navy);
  background: #fff;
}
.search-field:focus { outline: 2px solid var(--fh8-green); outline-offset: -2px; }
.search-submit {
  padding: 9px 18px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--fh8-green);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search-submit:hover, .search-submit:focus { background: #7ab332; }

/* Primary menu: white bar, black uppercase links, orange hover (same as main site) */
.fh8ps-nav { background: #fff; position: relative; }
.fh8ps-nav ul { list-style: none; margin: 0; padding: 0; }
.fh8ps-nav > ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}
.fh8ps-nav li { position: relative; }
.fh8ps-nav a {
  display: block;
  padding: 10px 16px;
  color: #000;
  font-size: 15.2px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
}
.fh8ps-nav a:hover,
.fh8ps-nav .current-menu-item > a,
.fh8ps-nav .current-menu-ancestor > a { color: #e38000; }

.fh8ps-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--fh8-border);
}
.fh8ps-nav li:hover > ul,
.fh8ps-nav li:focus-within > ul { display: block; }
.fh8ps-nav li ul a { font-size: 13.6px; white-space: nowrap; }
.fh8ps-nav li ul a:hover { background: var(--fh8-green); color: #000; }
.fh8ps-nav li ul ul { top: 0; left: 100%; }

.fh8ps-nav-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--fh8-border);
  background: #fff;
  color: #000;
  font: inherit;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 768px) {
  .fh8ps-header-search { flex-basis: 100%; margin-left: 0; }
  .fh8ps-nav-toggle { display: block; }
  .fh8ps-nav > ul { display: none; flex-direction: column; padding: 0; }
  .fh8ps-nav.is-open > ul { display: flex; }
  .fh8ps-nav li ul { display: block; position: static; border: 0; min-width: 0; padding-left: 16px; }
  .fh8ps-nav li ul a { white-space: normal; }
}

/* ==========================================================================
   Card grid (plugins, language packs, featured / recent lists)
   Replaces the old Masonry columns with CSS grid.
   ========================================================================== */
.masonry,
.flow-item,
#rjt-masonry,
.alm-listing,
.alm-reveal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  margin: 1.5em 0;
  padding: 0;
  font-size: .9rem;
}
/* Ajax Load More wraps its rows in .alm-reveal; keep its own wrapper from nesting grids */
.alm-reveal .alm-listing { display: contents; }

.item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.5em;
  background: #fff;
  border: 1px solid var(--fh8-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(56, 62, 83, .08);
  text-align: center;
}
.item:hover { box-shadow: 0 4px 14px rgba(56, 62, 83, .14); }
.item img { border-radius: 6px; }

.itemtitle {
  margin: .8em 0 .2em;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.itemtitle a, .itemtitle a:visited { color: var(--fh8-navy); }
.itemtitle a:hover { color: var(--fh8-orange); text-decoration: none; }
.itemdate, .itemdate a { color: var(--fh8-navy-soft); font-size: .85rem; margin-top: 2px; }
.itemextract p { margin-bottom: .5em; }
.itemcat { color: var(--fh8-navy-soft); font-size: .85rem; }

/* Single pages inside a card */
.item.inside { margin: 0 auto 2em; text-align: left; max-width: 1280px; padding: 2em; }
.item.inside .itemtitle { text-align: center; font-size: 1.5rem; }
.item.inside .featured-image { display: block; margin: 0 auto; }

#content { width: 80%; max-width: 1280px; margin: 20px auto 0; text-align: left; font-size: 1rem; color: var(--fh8-navy); }
#content p { margin-bottom: .75em; }
#content .pods-submittable-fields li { list-style: none; }
.wrapper #content { width: 99%; }
.type-help #content { max-width: 1280px; }
#bottommeta { margin: 30px 0; }
.table-small { font-size: .9em; }

.archive-title, .search-title { margin: .5em 0; }

/* Home page intro box */
#home-page-content {
  max-width: 1024px;
  margin: auto;
  padding: 2em;
  background: #fff;
  border: 1px solid var(--fh8-border);
  border-radius: 8px;
  font-size: 1.1rem;
}
#home-page-content ul { list-style: circle; padding-left: 3em; }
#home-page-content li { padding: .25em; }

/* Download / action buttons */
.download-button,
.wp-block-button__link,
.su-button {
  border-radius: 6px;
}

/* Pods pagination */
.pods-pagination-advanced { display: block; padding-top: 20px; font-size: 1.2rem; }
a.pods-pagination-last,
a.pods-pagination-first,
a.pods-pagination-number,
span.pods-pagination-current {
  display: inline-block;
  min-width: 3em;
  padding: .25em;
  border: 1px solid var(--fh8-border);
  border-radius: 4px;
  background: #fff;
  color: var(--fh8-navy);
  text-align: center;
}
a.pods-pagination-number:hover,
a.pods-pagination-first:hover,
a.pods-pagination-last:hover { background: var(--fh8-green); color: #000; text-decoration: none; }
span.pods-pagination-current { background: var(--fh8-navy); color: #fff; }

/* Theme pagination */
.pagination { text-align: center; margin: 1.5em 0; }
.pagination .page-numbers {
  display: inline-block;
  min-width: 2.5em;
  padding: .3em .6em;
  border: 1px solid var(--fh8-border);
  border-radius: 4px;
  background: #fff;
  color: var(--fh8-navy);
}
.pagination .current { background: var(--fh8-navy); color: #fff; }

/* Comments (kept minimal; the store rarely uses them) */
.comments-area { max-width: 900px; margin: 2em auto; }
.comment-list { list-style: none; padding: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.fh8ps-footer {
  margin-top: 3em;
  background: var(--fh8-navy);
  color: rgba(255, 255, 255, .75);
  font-size: .875rem;
}
.fh8ps-footer a { color: #fff; }
#footerwidgets { padding: 40px 0 20px; text-align: center; }
.footerwidget { display: inline-block; width: 270px; max-width: 100%; margin: 0 12px 30px; vertical-align: top; text-align: left; }
.footerheading { margin: 0 0 .5em; color: #fff; font-size: 1rem; }
.fh8ps-footer ul { list-style: none; padding: 0; }

/* ==========================================================================
   Admin bar offset not needed (core handles it); print tidy-up
   ========================================================================== */
@media print {
  .fh8ps-header-search, .fh8ps-nav, .fh8ps-footer { display: none; }
}

/* ==========================================================================
   Code highlighting for the source-code page (highlight.js default theme,
   copied from pluginstore2)
   ========================================================================== */


/*

Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #F0F0F0;
}


/* Base color: saturation 0; */

.hljs,
.hljs-subst {
  color: #444;
}

.hljs-comment {
  color: #888888;
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
  font-weight: bold;
}


/* User color: hue: 0 */

.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #880000;
}

.hljs-title,
.hljs-section {
  color: #880000;
  font-weight: bold;
}

.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #BC6060;
}


/* Language color: hue: 90; */

.hljs-literal {
  color: #78A960;
}

.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
  color: #397300;
}


/* Meta color: hue: 200 */

.hljs-meta {
  color: #1f7199;
}

.hljs-meta-string {
  color: #4d99bf;
}


/* Misc effects */

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* Orange announcement bar under the header (same as the main site) */
.fh8ps-announcement-bar {
  background: var(--fh8-orange);
  color: #fff;
  padding: 12px 24px;
  text-align: center;
}
.fh8ps-announcement-bar p,
.fh8ps-announcement-bar a { color: #fff; margin: 0; }
.fh8ps-announcement-bar p { font-family: var(--fh8-heading); font-weight: 500; }