/*
Theme Name: MultiplyParts Append
Theme URI: https://multiplyparts.com
Author: Multiply Parts
Author URI: https://multiplyparts.com
Description: WordPress conversion of the "Append" template by BootstrapMade (https://bootstrapmade.com/append-bootstrap-website-template/), adapted for the multiplyparts.com marketing site. Original template license: https://bootstrapmade.com/license/
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mp-append
*/

/* ==========================================================================
   This file intentionally stays light. All of the Append template's visual
   design lives in assets/css/main.css (enqueued in functions.php) so the
   original template CSS is never forked. This stylesheet only adds the
   small set of rules WordPress itself needs: block editor output classes
   (alignment, captions, galleries) and menu-related resets that the theme
   generates via wp_nav_menu() / the Walker in inc/class-append-nav-walker.php.
   ========================================================================== */

/* --- MultiplyParts brand color ---------------------------------------
   The Append template drives every button/link/hover color off these CSS
   custom properties (see assets/css/main.css's :root block), so the whole
   site's accent color is changed in one place, without touching main.css.
   ------------------------------------------------------------------- */
:root {
  --accent-color: #10B894;
}

:root {
  --nav-hover-color: #10B894;
  --nav-dropdown-hover-color: #10B894;
}

/* The template itself re-hardcodes --nav-color/--nav-hover-color at these
   more specific selectors for the homepage header (transparent-over-hero
   before scrolling, solid after) — those win over the plain :root override
   above, which is why the brand color wasn't showing up there. Overriding
   at the same specificity here is what actually fixes it: a lighter,
   easier-to-read gray for the inactive links, and the brand green (instead
   of white/red) for the current page, in both header states. */
.index-page .header {
  --nav-color: rgba(255, 255, 255, 0.75);
  --nav-hover-color: #10B894;
}

.index-page.scrolled .header {
  --nav-color: #3a3939;
  --nav-hover-color: #10B894;
}

/* Underline under the current page's nav link, in the brand color —
   the template only changes the active link's text color by default;
   this adds the underline seen on the live site. */
@media (min-width: 1200px) {
  .navmenu a.active {
    position: relative;
  }

  .navmenu a.active::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--nav-hover-color);
  }
}

/* --- Logo: swap to a white version while the header sits transparently
   over the homepage hero image, and back to full color once scrolled
   (body.scrolled) or on any other page (header is never transparent
   there). Mirrors the color-variable trick main.css already uses for
   the text-only logo. --- */
.header .logo-dark {
  display: inline-block;
}

.header .logo-light {
  display: none;
}

.index-page .header .logo-dark {
  display: none;
}

.index-page .header .logo-light {
  display: inline-block;
}

.index-page.scrolled .header .logo-dark {
  display: inline-block;
}

.index-page.scrolled .header .logo-light {
  display: none;
}

/* --- Standard WordPress alignment & caption classes (used by post/page content) --- */
.alignleft {
  float: left;
  margin: 0 1.5em 1.5em 0;
}

.alignright {
  float: right;
  margin: 0 0 1.5em 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.85em;
  color: #6c757d;
  text-align: center;
  margin-top: 0.5em;
}

.wp-block-quote,
.entry-content blockquote {
  border-left: 3px solid var(--accent-color, #00c896);
  padding-left: 1.2em;
  margin-left: 0;
  font-style: italic;
}

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  padding: 0;
  margin: 1.5em 0;
}

.wp-block-gallery .blocks-gallery-item {
  flex: 1 1 30%;
}

.wp-block-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* --- Nav menu: keep dropdown submenus visually consistent with Append's markup --- */
.navmenu ul ul {
  margin: 0;
  padding: 0;
}

/* --- Hero: eyebrow line, green headline, solid pill CTA button and a
   trust line underneath — replaces the template's default newsletter
   sign-up box to match the live site's richer hero design instead. --- */
.hero-eyebrow {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  margin: 0 0 14px 0;
}

.hero h2 {
  color: var(--accent-color);
}

.hero .cta-btn {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 34px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
  background: var(--accent-color);
  color: var(--contrast-color);
}

.hero .cta-btn:hover {
  background: color-mix(in srgb, var(--accent-color), black 12%);
  border-color: color-mix(in srgb, var(--accent-color), black 12%);
  color: var(--contrast-color);
}

.hero-trust-line {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  margin: 16px 0 0 0;
}

/* --- Custom 3D-printer-head icon used in place of a generic Bootstrap
   Icons glyph on Services/Materials cards (see template-parts/section-services.php).
   Sized and colored to match the "bi" icons it replaces, including the same
   ::before decorative dot the template already draws behind .icon. --- */
.services .service-item .icon svg.mp-icon-printhead {
  width: 56px;
  height: 56px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

/* --- Reusable solid pill button, for anywhere outside .hero/.call-to-action.
   main.css only styles .cta-btn when it's scoped inside one of those two
   sections — a bare .cta-btn elsewhere renders as unstyled text (the same
   bug fixed on the hero button earlier). This is that same look, usable
   standalone, e.g. the "View all" link below a homepage preview grid. --- */
.btn-view-all {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
  background: var(--accent-color);
  color: var(--contrast-color);
}

.btn-view-all:hover {
  background: color-mix(in srgb, var(--accent-color), black 12%);
  border-color: color-mix(in srgb, var(--accent-color), black 12%);
  color: var(--contrast-color);
}

/* --- Portfolio cards with no featured image would otherwise collapse to
   nothing, since the caption is normally an invisible hover-overlay that
   only becomes visible over a photo (see .portfolio-item .portfolio-info
   above in main.css). This keeps the text always visible instead, so a
   missing photo never makes an entire card disappear. --- */
.portfolio .portfolio-item.no-thumb {
  min-height: 220px;
  background: color-mix(in srgb, var(--default-color) 4%, var(--background-color) 96%);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.portfolio .portfolio-item.no-thumb .portfolio-info {
  opacity: 1;
  position: static;
  background: transparent;
  padding: 24px;
}

.portfolio .portfolio-item.no-thumb .portfolio-info .preview-link {
  display: none;
}

.portfolio .portfolio-item.no-thumb .portfolio-info .details-link {
  position: static;
  display: inline-block;
  margin-top: 8px;
}

/* --- Pagination (posts list / archives) --- */
.mp-pagination {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 6px;
}

.mp-pagination li a,
.mp-pagination li span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ececec;
}

.mp-pagination li span.current {
  background: var(--accent-color, #00c896);
  color: #fff;
  border-color: var(--accent-color, #00c896);
}

/* --- Skip link (accessibility) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  z-index: 100000;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
}