/*
Theme Name: Industrial Profile
Theme URI: https://example.com/industrial-profile
Author: Custom build
Description: A single-page corporate profile theme for industrial, instrumentation and engineering distributors. Hero, about, capability grid, tabbed service galleries, filterable product catalogue, contact with map and enquiry form. All content is driven from one PHP file.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: industrial-profile
Tags: business, one-column, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --ink:        #0f2137;
  --ink-2:      #1c3a5e;
  --steel:      #4a6b8a;
  --mist:       #f5f7fa;
  --line:       #dde4ec;
  --paper:      #ffffff;
  --accent:     #0a7ea4;
  --accent-dk:  #075f7d;
  --signal:     #e8a317;
  --body:       #3d4d5e;

  --radius:     4px;
  --shell:      1180px;
  --gutter:     24px;

  --ff-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow:     0 1px 2px rgba(15,33,55,.06), 0 8px 24px rgba(15,33,55,.07);
  --header-h:   76px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff-body);font-size:16.5px;line-height:1.68;
  color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dk);text-decoration:underline}
h1,h2,h3,h4,h5{
  font-family:var(--ff-display);color:var(--ink);
  margin:0 0 .5em;line-height:1.12;font-weight:600;letter-spacing:.005em;
}
h1{font-size:clamp(2.5rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.4rem}
h4{font-size:1.12rem;font-family:var(--ff-body);font-weight:650}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.2em}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);
  color:#fff;padding:12px 20px;
}
.skip-link:focus{left:0}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:84px 0}
.section--mist{background:var(--mist)}
.section--tight{padding:56px 0}
.grid{display:grid;gap:28px}
.eyebrow{
  display:block;font-family:var(--ff-body);font-size:.82rem;font-weight:650;
  letter-spacing:.14em;color:var(--accent);margin-bottom:10px;
}
.section-head{max-width:760px;margin-bottom:44px}
.section-head p{font-size:1.06rem}
.rule{height:3px;width:52px;background:var(--signal);border:0;margin:0 0 22px}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--ff-body);font-weight:600;font-size:.95rem;
  padding:13px 30px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{text-decoration:none}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-dk);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--line{border-color:var(--accent);color:var(--accent)}
.btn--line:hover{background:var(--accent);color:#fff}

/* Placeholder block for empty image slots */
.ph{
  background:
    repeating-linear-gradient(45deg,#e9eef4 0 12px,#eff3f8 12px 24px);
  border:1px dashed #c3cfdd;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:#8a9bb0;font-size:.78rem;letter-spacing:.06em;text-align:center;
  padding:12px;min-height:120px;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(15,33,55,.92);backdrop-filter:saturate(140%) blur(8px);
  transition:background .25s ease,height .25s ease,box-shadow .25s ease;
}
.site-header.is-stuck{background:var(--ink);height:66px;box-shadow:0 2px 18px rgba(0,0,0,.22)}
.site-header .shell{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{text-decoration:none}
.brand img{max-height:42px;width:auto}
.brand__name{
  font-family:var(--ff-display);font-size:1.55rem;font-weight:600;
  color:#fff;line-height:1;
}
.brand__tag{display:block;font-family:var(--ff-body);font-size:.68rem;letter-spacing:.1em;color:#9db4cc;margin-top:3px}

.nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:9px 14px;color:#d7e2ee;font-size:.94rem;font-weight:500;
  border-radius:var(--radius);transition:color .15s ease,background .15s ease;
}
.nav a:hover,.nav .current-menu-item>a,.nav li.is-active>a{color:#fff;background:rgba(255,255,255,.09);text-decoration:none}
.nav .nav-cta>a{background:var(--accent);color:#fff;margin-left:10px;padding-inline:22px}
.nav .nav-cta>a:hover{background:var(--accent-dk)}

/* sub menus */
.nav li{position:relative}
.nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:210px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;flex-direction:column;
}
.nav li:hover>.sub-menu{display:flex}
.nav .sub-menu a{color:var(--ink)}
.nav .sub-menu a:hover{background:var(--mist)}

.nav-toggle{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{
  position:relative;padding:calc(var(--header-h) + 76px) 0 76px;
  background:linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 58%,#24507f 100%);
  color:#e6eef7;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 22%,rgba(232,163,23,.16),transparent 42%);
}
.hero .shell{position:relative;z-index:1;display:grid;gap:44px;align-items:center;grid-template-columns:1.05fr .95fr}
.hero h1{color:#fff;margin-bottom:.32em}
.hero__sub{
  font-family:var(--ff-display);font-size:clamp(1.15rem,2.1vw,1.6rem);
  color:var(--signal);letter-spacing:.05em;margin:0 0 22px;
}
.hero__intro{font-size:1.08rem;color:#c3d4e6;max-width:52ch}
.hero__media img{border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero__media .ph{min-height:300px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#9db4cc}

/* Partner strip */
.partners{background:var(--paper);border-bottom:1px solid var(--line);padding:30px 0}
.partners ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:18px 46px;
}
.partners img{max-height:52px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}
.partners li:hover img{filter:none;opacity:1}
.partners .ph{min-height:52px;min-width:130px;font-size:.72rem}

/* ==========================================================================
   6. About
   ========================================================================== */
.about .shell{display:grid;gap:52px;grid-template-columns:.85fr 1.15fr;align-items:start}
.about__media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about__media .ph{min-height:280px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0}
.facts li{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--radius);padding:8px 16px;font-size:.88rem;font-weight:550;color:var(--ink);
}

/* ==========================================================================
   7. Solutions grid
   ========================================================================== */
.solutions__grid{grid-template-columns:repeat(4,1fr)}
.solution{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.solution:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.solution__icon{width:38px;height:38px;margin-bottom:16px;color:var(--accent)}
.solution__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.solution h4{margin-bottom:6px;color:var(--ink)}
.solution p{font-size:.92rem;margin:0}

/* ==========================================================================
   8. Services (tabs + gallery)
   ========================================================================== */
.tabs{
  display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);
  padding:0;margin:0 0 34px;list-style:none;
}
.tabs button{
  background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;
  padding:12px 18px;font:inherit;font-weight:600;color:var(--steel);cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal)}
.tabpanel[hidden]{display:none}
.tabpanel>p{max-width:70ch;margin-bottom:26px}
.gallery{grid-template-columns:repeat(4,1fr)}
.shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shot img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shot .ph{aspect-ratio:4/3;border:0;border-radius:0;min-height:0}
.shot figcaption{padding:12px 14px;font-size:.84rem;color:var(--steel);line-height:1.45}

/* ==========================================================================
   9. Products
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px;padding:0;list-style:none}
.filters button{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:8px 20px;font:inherit;font-size:.88rem;font-weight:550;color:var(--steel);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.products__grid{grid-template-columns:repeat(4,1fr)}
.product{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease;
}
.product:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.product[hidden]{display:none}
.product__img{background:var(--mist);padding:18px}
.product__img img{aspect-ratio:1/1;object-fit:contain;width:100%;mix-blend-mode:multiply}
.product__img .ph{aspect-ratio:1/1;min-height:0}
.product__body{padding:16px 18px 20px;border-top:1px solid var(--line)}
.product__brand{font-size:.72rem;letter-spacing:.1em;color:var(--signal);font-weight:650;display:block;margin-bottom:4px}
.product__name{font-family:var(--ff-body);font-size:.98rem;font-weight:650;color:var(--ink);margin:0 0 4px}
.product__desc{font-size:.86rem;margin:0;color:var(--steel)}

/* ==========================================================================
   10. Contact
   ========================================================================== */
.contact__grid{grid-template-columns:.9fr 1.1fr;gap:44px}
.infobox{display:flex;gap:16px;margin-bottom:26px}
.infobox__icon{
  flex:0 0 44px;height:44px;border-radius:50%;background:rgba(10,126,164,.1);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.infobox__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.infobox h4{margin:0 0 4px}
.infobox p,.infobox address{margin:0;font-style:normal;font-size:.95rem;line-height:1.6}
.map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:8px}
.map iframe{display:block;width:100%;height:290px;border:0}
.map .ph{min-height:290px;border:0;border-radius:0}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.form .row{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}
.form label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.form input,.form textarea{
  width:100%;font:inherit;font-size:.95rem;padding:11px 14px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--mist);
  transition:border-color .16s ease,background .16s ease;
}
.form input:focus,.form textarea:focus{background:#fff;border-color:var(--accent);outline:none}
.form textarea{min-height:150px;resize:vertical}
.form .field{margin-bottom:16px}
.form .hp{position:absolute;left:-9999px}
.notice{padding:12px 16px;border-radius:var(--radius);font-size:.92rem;margin-bottom:18px}
.notice--ok{background:#e6f6ec;border:1px solid #b7e3c6;color:#1c6b38}
.notice--err{background:#fdecec;border:1px solid #f3c2c2;color:#992222}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:#a9bed4;padding:66px 0 0;font-size:.93rem}
.site-footer h3,.site-footer h4{color:#fff}
.site-footer h4{font-size:1rem;margin-bottom:16px;letter-spacing:.02em}
.site-footer a{color:#a9bed4}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid;gap:36px;grid-template-columns:1.5fr 1fr 1fr 1.3fr;padding-bottom:48px}
.footer__grid ul{list-style:none;padding:0;margin:0}
.footer__grid li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.footer__grid address{font-style:normal;line-height:1.7;margin-bottom:14px}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;transition:background .18s ease;
}
.socials a:hover{background:var(--accent)}
.socials svg{width:17px;height:17px;fill:currentColor}
.footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:.86rem}
.footer__bar strong{color:#fff}

.to-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,background .2s ease;
  z-index:99;border:0;cursor:pointer;
}
.to-top.is-on{opacity:1;visibility:visible}
.to-top:hover{background:var(--accent-dk)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ==========================================================================
   12. Interior pages / blog
   ========================================================================== */
.page-hero{
  background:var(--ink);color:#fff;padding:calc(var(--header-h) + 52px) 0 52px;
}
.page-hero h1{color:#fff;margin:0}
.page-hero .crumbs{font-size:.88rem;color:#9db4cc;margin-top:10px}
.page-hero .crumbs a{color:#9db4cc}
.entry{max-width:74ch;margin-inline:auto}
.entry img{border-radius:var(--radius);margin:1.4em 0}
.entry blockquote{border-left:3px solid var(--signal);margin:1.5em 0;padding-left:20px;color:var(--ink);font-size:1.05rem}
.entry table{width:100%;border-collapse:collapse;margin:1.4em 0}
.entry th,.entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry th{background:var(--mist)}
.postlist{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card__body{padding:20px}
.card__meta{font-size:.8rem;color:var(--steel);margin-bottom:8px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pagination .page-numbers{
  padding:9px 15px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* WP core alignment classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:.85rem;color:var(--steel);text-align:center}
.sticky,.gallery-caption,.bypostauthor{}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .solutions__grid,.gallery,.products__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .postlist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:var(--ink);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav.is-open{max-height:75vh;overflow-y:auto;box-shadow:0 14px 30px rgba(0,0,0,.3)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gutter) 22px}
  .nav a{padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav .sub-menu{display:flex;position:static;background:none;box-shadow:none;padding:0 0 0 14px}
  .nav .sub-menu a{color:#d7e2ee}
  .nav .nav-cta>a{margin:14px 0 0;text-align:center}
  .hero .shell,.about .shell,.contact__grid{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--header-h) + 48px)}
  .about__media{order:2}
}
@media (max-width:640px){
  .section{padding:58px 0}
  .solutions__grid,.gallery,.products__grid,.postlist{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr}
  .form{padding:22px}
  .form .row{grid-template-columns:1fr}
}
@media (max-width:400px){
  .solutions__grid,.products__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .site-header,.to-top,.nav,.map,.form{display:none!important}
  body{color:#000}
}