/*
Theme Name: PMIS
Theme URI: https://www.pakcnc.com/
Author: XLNC Digital
Author URI: https://xlncdigital.com
Description: Pak Mechatronics Industrial Solutions — a classic WordPress theme for precision machine tools, turnkey installation and mechatronics support. Ships with Services, Products, Case Studies, Team, Industries, Locations and Enquiry post types, auto-provisioned pages, and an ACF-ready field layer with built-in fallbacks.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pmis
Tags: business, industrial, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/*
 * NOTE
 * ----
 * The design system lives in assets/css/style.css and is enqueued separately as
 * `pmis-theme`. This file only carries the theme header plus the WordPress core
 * markup styles that the static HTML had no need for (alignments, captions,
 * screen-reader text, pagination, comments, block defaults).
 */

/* ---------- Bootstrap link colour ----------
 * The design system sets --bs-link-color, but Bootstrap 5.3 paints anchors from
 * --bs-link-color-rgb:
 *
 *   a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); }
 *
 * That variant was never overridden, so every link the theme does not style by class
 * fell back to Bootstrap's default blue (#0d6efd) — visible on case-study card titles,
 * post content, comments and anywhere else a bare <a> appears. Mapping the -rgb
 * variants to the amber accent fixes all of them at once.
 *
 *   --amber-deep #C2540E -> 194, 84, 14
 *   --amber      #FF7A18 -> 255, 122, 24
 */
:root,
[data-bs-theme="light"] {
  --bs-link-color-rgb: 194, 84, 14;
  --bs-link-hover-color-rgb: 255, 122, 24;
}

/* ---------- Case study card title ----------
 * The card title is a heading that happens to link to the project. It should read as
 * a heading, not as a link — dark like every other card title, shifting to amber on
 * hover in line with .card-link and .rel-go.
 */
.cs-body h3 a {
  color: var(--heading);
  text-decoration: none;
  transition: color .25s var(--ease);
}

.cs-body h3 a:hover,
.cs-body h3 a:focus-visible,
.cs-card:hover .cs-body h3 a {
  color: var(--amber-deep);
}

/* ---------- Stat figures on light sections ----------
 * .hero-specs / .spec-cell were authored for the dark hero bands, so their text is
 * hardcoded white and their rules use --line-dark (a white alpha):
 *
 *   .spec-cell .num { color: #fff }
 *   .spec-cell .lbl { color: #FFFFFF }
 *   .hero-specs     { border-top: 1px solid var(--line-dark) }
 *
 * Reused inside a normal section they render white-on-white — the "Project at a
 * glance" figures on the case study detail page were invisible. (.bg-ink2 reads dark
 * but resolves to var(--bg-alt), a light grey.) Restore the light-surface palette
 * whenever the component sits inside .section / .section-tight; the hero markup uses
 * .hero / .page-hero, so it is untouched.
 */
.section .spec-cell .num,
.section-tight .spec-cell .num {
  color: var(--heading);
}

.section .spec-cell .lbl,
.section-tight .spec-cell .lbl {
  color: var(--muted);
}

.section .spec-cell .num .amber,
.section-tight .spec-cell .num .amber {
  color: var(--amber-deep);
}

.section .hero-specs,
.section-tight .hero-specs {
  border-top-color: var(--line);
}

.section .spec-cell,
.section-tight .spec-cell {
  border-right-color: var(--line);
}

/* ---------- Case study: scope of work ----------
 * An asymmetric split — the heading and headline figures sit in a narrow left rail,
 * the scope itself reads as a numbered spec sheet on the right. Built from the theme's
 * own tokens so it stays in step with the rest of the design.
 */
.scope-band {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}

.scope-band > .container {
  position: relative;
  z-index: 1;
}

.scope-band .h-lg,
.scope-band .scope-title {
  color: #fff;
}

.scope-band > .container > .row > div > p {
  color: var(--on-dark-dim);
}

/* Headline figures in the left rail */
.scope-stats {
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin: 2.25rem 0 0;
  padding-top: 1.6rem;
	display:none;
}

.scope-stat dt {
  color: #fff;
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.scope-stat dt .unit {
  color: var(--amber);
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: .15rem;
}

.scope-stat dd {
  color: var(--on-dark-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  margin: .5rem 0 0;
  text-transform: uppercase;
}

/* Numbered spec sheet */
.scope-list {
  counter-reset: scope;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scope-list li {
  border-top: 1px solid var(--line-dark);
  display: flex;
  gap: 1.5rem;
  padding: 1.6rem 0;
  position: relative;
  transition: border-color .35s var(--ease);
}

.scope-list li:first-child {
  border-top: 0;
  padding-top: 0;
}


.scope-list li:hover::after {
  width: 100%;
}

.scope-list li:first-child::after {
  display: none;
}

.scope-n {
  color: var(--amber);
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  padding-top: .3rem;
  width: 2.5rem;
}

.scope-body {
  display: block;
}

.scope-title {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.scope-text {
  color: var(--on-dark-dim);
  display: block;
  margin-top: .5rem;
  max-width: 62ch;
}

@media (max-width: 575.98px) {
  .scope-list li {
    gap: 1rem;
  }

  .scope-n {
    width: 2rem;
  }

  .scope-stat dt {
    font-size: 2.1rem;
  }
}

/* ---------- Accessibility helpers ---------- */
.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;
}

.screen-reader-text:focus {
  background-color: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  clip: auto !important;
  clip-path: none;
  color: var(--heading);
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: .75rem 1.25rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

/* ---------- Core alignment classes ---------- */
.alignleft {
  float: left;
  margin: .35rem 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: .35rem 0 1rem 1.5rem;
}

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

.alignwide,
.alignfull {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.entry-content > * {
  max-width: 100%;
}

/* ---------- Captions & galleries ---------- */
.wp-caption {
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.wp-caption img {
  border-radius: var(--radius);
  display: block;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
  color: var(--muted);
  font-size: var(--fs-label);
  margin-top: .6rem;
}

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-bottom: 1.5rem;
}

.gallery-item img {
  border-radius: var(--radius);
  display: block;
  width: 100%;
}

/* ---------- Editor content rhythm ---------- */
.entry-content img,
.entry-content iframe,
.entry-content video {
  border-radius: var(--radius);
  height: auto;
  max-width: 100%;
}

.entry-content > * + * {
  margin-top: 1.25rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--heading);
  font-family: var(--f-display);
  margin-top: 2.25rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.35rem;
}

.entry-content li + li {
  margin-top: .4rem;
}

.entry-content blockquote {
  border-left: 3px solid var(--amber);
  color: var(--heading);
  font-size: var(--fs-lead);
  padding: .25rem 0 .25rem 1.25rem;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  padding: .65rem .85rem;
  text-align: left;
}

.entry-content pre {
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow-x: auto;
  padding: 1rem 1.25rem;
}

/* ---------- Sticky post & post meta ---------- */
.post-meta {
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.post-meta a {
  color: inherit;
}

.post-tags {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.post-tags a {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  display: inline-block;
  font-size: var(--fs-label);
  margin: 0 .35rem .5rem 0;
  padding: .3rem .85rem;
  text-decoration: none;
}

.post-tags a:hover,
.post-tags a:focus {
  border-color: var(--amber);
  color: var(--amber-deep);
}

/* ---------- Pagination ---------- */
.pmis-pagination {
  margin-top: 3rem;
}

.pmis-pagination .page-numbers {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--heading);
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  margin: 0 .3rem .5rem 0;
  min-width: 42px;
  padding: .55rem .75rem;
  justify-content: center;
  text-decoration: none;
  transition: all .25s var(--ease);
}

.pmis-pagination .page-numbers:hover,
.pmis-pagination .page-numbers:focus-visible {
  border-color: var(--amber);
  color: var(--amber-deep);
}

.pmis-pagination .page-numbers.current {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

.pmis-pagination .page-numbers.dots {
  border-color: transparent;
}

/* ---------- Search form ---------- */
.pmis-search-form {
  display: flex;
  gap: .5rem;
  max-width: 520px;
}

.pmis-search-form .form-control {
  flex: 1 1 auto;
}

/* ---------- Comments ---------- */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list ol.children {
  list-style: none;
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}

.comment-body {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.5rem;
}

.comment-author .fn {
  color: var(--heading);
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
}

.comment-metadata {
  color: var(--muted);
  font-size: var(--fs-label);
  margin-bottom: .75rem;
}

.comment-metadata a {
  color: inherit;
}

.comment-respond {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 2rem;
}

.comment-form label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  margin-bottom: .35rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  width: 100%;
}

.comment-form p {
  margin-bottom: 1rem;
}

/* ---------- Admin bar offset for the sticky navbar ---------- */
body.admin-bar .site-navbar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-navbar {
    top: 0px;
  }
	.spec-cell{
		border-right:0;
		margin-right:0;
	}
	.brand-mark,
	.foot-brand .navbar-brand img{
    width: 80px;
	}

}

/* ---------- Empty-state notice ---------- */
.pmis-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  padding: 2.5rem;
  text-align: center;
}