/* KEIFA Tools | Jordan × Saudi Terracotta identity layer
   Reuses the existing accessible responsive directory; no CSS framework. */
:root {
  --brand:#9f3529;
  --brand-hover:#852a20;
  --brand-active:#74221b;
  --brand-subtle:#fbebe5;
  --brand-glow:rgba(159,53,41,.15);
  --brand-border:rgba(159,53,41,.26);
  --accent-gold:#ad7648;
  --accent-gold-soft:#fff3e9;
  --accent-emerald:#176346;
  --bg-page:#fcfaf7;
  --surface-card:#fff;
  --surface-card-hover:#fffdfa;
  --surface-elevated:#fff;
  --surface-subtle:#f8f3ef;
  --surface-glass:rgba(255,252,248,.97);
  --border-subtle:#eadfd8;
  --border-medium:#d9c9be;
  --border-focus:#9f3529;
  --text-main:#232829;
  --text-muted:#68625e;
  --text-faint:#8b817b;
  --text-on-brand:#fff;
  --shadow-xs:0 1px 3px rgba(79,43,28,.045);
  --shadow-sm:0 3px 9px rgba(79,43,28,.05);
  --shadow-md:0 9px 26px rgba(79,43,28,.09);
  --shadow-lg:0 20px 48px rgba(79,43,28,.14);
  --radius-sm:10px;
  --radius-md:13px;
  --radius-lg:18px;
  --container-max:1190px;
}
[data-theme="dark"] {
  --brand:#e39a7d;
  --brand-hover:#f6b297;
  --brand-active:#d67b5f;
  --brand-subtle:rgba(227,154,125,.14);
  --brand-glow:rgba(227,154,125,.2);
  --brand-border:rgba(227,154,125,.37);
  --accent-gold:#e4b181;
  --accent-gold-soft:rgba(202,136,85,.11);
  --accent-emerald:#8ac6ab;
  --bg-page:#171b19;
  --surface-card:#212622;
  --surface-card-hover:#2a2e29;
  --surface-elevated:#2c302b;
  --surface-subtle:#2c2926;
  --surface-glass:rgba(27,30,27,.98);
  --border-subtle:rgba(244,222,202,.13);
  --border-medium:rgba(244,222,202,.22);
  --border-focus:#e39a7d;
  --text-main:#faf0e6;
  --text-muted:#c0afa2;
  --text-faint:#9f9185;
  --text-on-brand:#33170f;
  --shadow-xs:0 1px 3px rgba(0,0,0,.14);
  --shadow-sm:0 3px 8px rgba(0,0,0,.18);
  --shadow-md:0 10px 25px rgba(0,0,0,.2);
  --shadow-lg:0 20px 48px rgba(0,0,0,.35);
}
html { scroll-padding-top:80px; }
body { background-image:radial-gradient(circle at 50% 0,rgba(210,160,117,.035),transparent 52%); }
.site-header { background:var(--surface-glass); border-bottom:1px solid var(--border-subtle); }
.site-header.scrolled { box-shadow:0 5px 18px rgba(50,28,23,.055); }
.nav { height:70px; }
.brand { gap:8px; }
.brand-wordmark { font-size:2.05rem; font-weight:800; line-height:1.2; letter-spacing:-.07em; color:var(--brand); }
.brand-app-pill { font-size:.7rem; font-weight:700; padding:4px 9px; color:#fff; background:linear-gradient(130deg,#b64b39,#84281f); border-radius:6px; }
.nav-links { gap:1.85rem; }
.nav-link { font-size:.82rem; font-weight:650; position:relative; }
.nav-link.is-current { color:var(--brand); }
.nav-link.is-current::after {content:""; position:absolute; bottom:-17px; right:0; left:0; height:2px; background:var(--brand); border-radius:4px; }
.btn-portal-main { background:var(--brand); border-radius:8px; }
.header-search-btn,.theme-toggle-btn,.lang-toggle-btn { background:transparent; }
.theme-toggle-btn { min-width:37px; }
.hero-compact { border-bottom:1px solid #e4d2c3; background:linear-gradient(180deg,#faf2ea 0%,#fffaf5 63%,#f7eee7 100%); padding:1.38rem 0 1.05rem; min-height:275px; overflow:hidden; isolation:isolate; }
.hero-compact::before,.hero-compact::after {content:""; position:absolute; top:0; bottom:0; width:34%; max-width:490px; pointer-events:none; background-repeat:no-repeat; background-size:auto 100%; z-index:-1; }
.hero-compact::before { left:0; background-image:url('../images/jordan-petra.webp'); background-position: left center; }
.hero-compact::after { right:0; background-image:url('../images/saudi-skyline.webp'); background-position: right center; }
.hero-container { position:relative; z-index:1; max-width:910px; }
.hero-kicker-pill { font-size:.73rem; background:rgba(255,255,255,.78); color:#7d4d37; border-color:#eee0d5; padding:.25rem .8rem; margin-bottom:.75rem; box-shadow:none; }
.hero-kicker-pill .brand-badge-dot { background:#a66e3a; }
.hero-kicker-pill .hero-separator { color:#c3a18b; }
.hero-title { font-size:2.05rem; line-height:1.38; color:var(--brand); letter-spacing:-.03em; margin-bottom:.28rem; text-wrap:balance; }
.hero-title-accent { color:#105440; }
.hero-desc { font-size:.90rem; line-height:1.75; max-width:630px; margin-bottom:1rem; color:#525152; text-wrap:pretty; }
.hero-search-wrapper { max-width:650px; margin-bottom:.65rem; }
.hero-search-box { padding:.23rem .35rem .23rem .7rem; border:1px solid #e4d8cf; border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 4px 20px rgba(108,68,46,.10); gap:6px; }
.hero-search-input { font-size:.85rem; padding:.47rem .3rem; min-width:0; }
.hero-search-input::placeholder { font-size:.78rem; }
.search-kbd-hint { font-size:.68rem; }
.hero-search-cta { flex-shrink:0; background:var(--brand); border-radius:8px; color:#fff; padding:.58rem 1.15rem; min-width:86px; display:inline-flex; justify-content:center; align-items:center; gap:.4rem; font-size:.83rem; font-weight:700; transition:background .15s; }
.hero-search-cta:hover { background:var(--brand-hover); }
.hero-search-cta svg { width:15px; height:15px; }
.trending-searches { margin:0 auto; display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap; max-width:650px; }
.trending-label { color:#72655e; font-size:.76rem; font-weight:650; }
.trending-term { border:1px solid #e9dcd3; color:#806153; background:rgba(255,253,251,.73); font-size:.72rem; border-radius:99px; padding:.17rem .6rem; transition:all .15s; }
.trending-term:hover,.trending-term:focus-visible { background:#fff; border-color:var(--brand); color:var(--brand); }
/* LTR Layout Corrections: Petra on the right, Saudi skyline on the left */
[dir="ltr"] .hero-compact::before {
  left: auto;
  right: 0;
  background-position: left center;
  transform: scaleX(-1);
}
[dir="ltr"] .hero-compact::after {
  right: auto;
  left: 0;
  background-position: right center;
  transform: scaleX(-1);
}
[dir="ltr"] .btn-portal-main svg {
  transform: scaleX(-1);
}
[dir="ltr"] .whats-new-link svg {
  transform: scaleX(-1);
}
[dir="ltr"] .btn-launch-tool svg {
  transform: scaleX(-1);
}
[dir="ltr"] .btn-launch-tool:hover svg {
  transform: scaleX(-1) translateX(-3px);
}
[dir="ltr"] .hero-search-box {
  padding: .23rem .7rem .23rem .35rem;
}
[dir="ltr"] .search-icon-box {
  margin-left: 0;
  margin-right: 0.35rem;
}
.tools-section { padding:1.35rem 0 2rem; }
.section-header-compact { margin-bottom:.95rem; }
.section-kicker {font-size:.72rem; color:#936249; letter-spacing:0; }
.section-title {font-size:1.23rem; }
.tools-controls-bar { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:13px; padding:.7rem .85rem; gap:.6rem; margin-bottom:.7rem; box-shadow:var(--shadow-xs); }
.filter-pills-wrap { gap:.43rem; }
.filter-pill { padding:.42rem .75rem; border-radius:9px; font-weight:600; font-size:.75rem; color:#514b47; background:#fbf8f6; border-color:#eee8e3; }
.filter-pill.active { color:#fff; background:var(--brand); border-color:var(--brand); box-shadow:none; }
.filter-pill .pill-count {font-size:.64rem; padding:0 .25rem; }
.filter-pill.active .pill-count {background:rgba(255,255,255,.23);color:white;}
.controls-secondary { gap:.6rem; }
.sort-select { font-size:.76rem; background:var(--surface-card); }
.sort-select-wrap {font-size:.76rem;}
.results-status-bar { margin-bottom:.65rem; font-size:.73rem; color:var(--text-faint); }
.tools-grid { gap:.8rem; }
.tool-card { padding:1rem; border-radius:12px; border-color:#eadfda; box-shadow:0 2px 10px rgba(74,47,36,.043); background:var(--surface-card); min-width:0; }
.tool-card:hover { transform:translateY(-2px); border-color:#d3b2a3; box-shadow:0 7px 20px rgba(74,47,36,.075); }
.tool-card > div:first-child { display:grid; grid-template-columns:50px minmax(0,1fr); column-gap:.75rem; align-items:center; }
.tool-card-header { display:contents; }
.tool-icon-wrap { grid-column:1; grid-row:1 / span 2; width:50px; height:50px; border-radius:10px; color:#a43e2e !important; background:#fcf0eb !important; }
.tool-icon-wrap svg { width:25px; height:25px; }
.tool-card[data-tool-id="soil-classification"] .tool-icon-wrap,
.tool-card[data-tool-id="fuel-atlas"] .tool-icon-wrap,
.tool-card[data-tool-id="engineering-codes"] .tool-icon-wrap,
.tool-card[data-tool-id="tareka-calculator"] .tool-icon-wrap,
.tool-card[data-tool-id="rebar-weight-calc"] .tool-icon-wrap {color:#0e6245 !important; background:#e9f3ed !important; }
.tool-card-title-group { grid-column:2; grid-row:1; margin-bottom:0; }
.tool-title { font-size:.97rem; font-weight:750; line-height:1.5; margin-bottom:.18rem; }
.tool-kicker { color:var(--text-muted); font-size:.69rem; line-height:1.5; font-weight:400; }
.tool-badge-pill { grid-column:2; grid-row:2; justify-self:start; margin-top:.4rem; border-radius:6px; font-size:.65rem; background:#fff4ec; border-color:transparent; color:#ad5a2b; padding:.1rem .4rem; }
.tool-badge-pill.badge-highlight {color:#ad5a2b; background:#fff4ec; border:0;}
.tool-badge-pill.badge-upcoming {color:#95694b;background:#f6eee5;border:0;}
.tool-card-body { margin-top:.55rem; margin-bottom:.7rem; }
.tool-desc { font-size:.77rem; line-height:1.7; margin-bottom:.6rem; -webkit-line-clamp:2; }
.tool-features { gap:.3rem; }
.feature-pill {font-size:.65rem;border-radius:6px; padding:.2rem .4rem; border:0;background:#f7f4f0; }
.feature-pill svg {display:none;}
.feature-pill:nth-child(n+3) {display:none;}
.tool-card-actions { margin-top:auto; padding-top:.7rem; gap:.55rem; }
.btn-launch-tool { background:var(--brand); font-size:.75rem; min-height:35px; border-radius:7px; padding:.4rem .7rem; }
.btn-spec-details { border:1px solid #e6d5ca; font-size:.72rem; min-height:35px; border-radius:7px; padding:.4rem .65rem; background:var(--surface-card); }
.btn-coming-soon {font-size:.75rem; min-height:35px; }
.tool-card[data-upcoming="true"] { opacity:.9; border-style:dashed; }
.tool-card[data-upcoming="true"] .tool-icon-wrap { color:#977b69 !important; background:#f1e9e1 !important; }
.whats-new-section { background:#fbf6f1; padding:1.7rem 0; border-color:#eee0d4; }
.whats-new-header { margin-bottom:1rem; }
.whats-new-heading {font-size:1.14rem;}
.whats-new-badge {background:#a43b2b;}
.whats-new-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.whats-new-card {border-radius:11px; padding:.82rem; }
.whats-new-card-title {font-size:.83rem;}
.whats-new-card-desc {font-size:.73rem;}
.whats-new-version {font-size:.64rem;}
.supporting-seo-section { padding:2rem 0; }
.seo-content-grid { gap:1.1rem; margin-bottom:1.6rem; }
.seo-text-card { padding:1.25rem; }
.standards-grid {margin-bottom:1.7rem;}
.faq-wrap {max-width:none;}
.faq-header {text-align:start; margin-bottom:1rem;}
.faq-title {font-size:1.2rem;}
.faq-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; align-items:start;}
.faq-question {font-size:.81rem; padding:.78rem 1rem;}
.faq-answer {font-size:.76rem; padding:0 1rem .85rem;}
.site-footer { background:linear-gradient(115deg,#fff9f3,#fdf8f3); border-top:1px solid #e9d6c7; padding:1.85rem 0 1rem; position:relative; overflow:hidden; }
.site-footer:before {content:"";position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(159,53,41,.018) 20px 21px,transparent 21px 41px); pointer-events:none;}
.site-footer .container {position:relative;}
.footer-grid {gap:1.7rem; margin-bottom:1.7rem;}
.footer-bio .brand-wordmark {font-size:1.8rem;}
.footer-bio p {font-size:.79rem;}
.footer-col-title {font-size:.82rem;}
.footer-links a {font-size:.76rem;}
.footer-bottom {font-size:.7rem;}
.spec-modal-card { border-radius:16px; }
[data-theme="dark"] .hero-compact {background:linear-gradient(180deg,#28231e,#221f1d);border-bottom-color:var(--border-subtle);}
[data-theme="dark"] .hero-compact::before,[data-theme="dark"] .hero-compact::after {opacity:.28;}
[data-theme="dark"] .hero-title-accent {color:#8cc9a7;}
[data-theme="dark"] .hero-desc {color:var(--text-muted);}
[data-theme="dark"] .hero-kicker-pill {background:#2c2925; color:var(--text-muted);border-color:var(--border-subtle);}
[data-theme="dark"] .hero-search-box {background:#272925;border-color:var(--border-medium);}
[data-theme="dark"] .hero-search-cta {background:#a94534;color:#fff;}
[data-theme="dark"] .trending-label {color:var(--text-muted);}
[data-theme="dark"] .trending-term {background:#312c28; border-color:var(--border-subtle); color:var(--text-muted);}
[data-theme="dark"] .tools-controls-bar,[data-theme="dark"] .tool-card {border-color:var(--border-subtle);}
[data-theme="dark"] .filter-pill,[data-theme="dark"] .feature-pill {color:var(--text-muted);background:var(--surface-subtle);border-color:var(--border-subtle);}
[data-theme="dark"] .filter-pill.active {color:#fff;background:#a94534;}
[data-theme="dark"] .tool-icon-wrap {background:rgba(227,154,125,.13) !important;color:#e39a7d !important;}
[data-theme="dark"] .tool-card[data-tool-id="soil-classification"] .tool-icon-wrap,
[data-theme="dark"] .tool-card[data-tool-id="fuel-atlas"] .tool-icon-wrap,
[data-theme="dark"] .tool-card[data-tool-id="engineering-codes"] .tool-icon-wrap,
[data-theme="dark"] .tool-card[data-tool-id="tareka-calculator"] .tool-icon-wrap,
[data-theme="dark"] .tool-card[data-tool-id="rebar-weight-calc"] .tool-icon-wrap {background:rgba(83,158,121,.16) !important;color:#9bd3b2 !important;}
[data-theme="dark"] .tool-badge-pill,[data-theme="dark"] .tool-badge-pill.badge-highlight,[data-theme="dark"] .tool-badge-pill.badge-upcoming {background:#3b302a;color:#e6b68b;}
[data-theme="dark"] .whats-new-section {background:#201d1a;border-color:var(--border-subtle);}
[data-theme="dark"] .site-footer {background:linear-gradient(115deg,#1c211e,#25211e);border-color:var(--border-subtle);}
[data-theme="dark"] .btn-launch-tool {background:#a94534;color:#fff;}
[data-theme="dark"] .btn-portal-main {background:#a94534;color:#fff;}
[data-theme="dark"] .btn-spec-details {background:var(--surface-subtle);border-color:var(--border-subtle);}
@media(max-width:1150px){
 .hero-compact::before,.hero-compact::after {width:30%;opacity:.78;}
 .tools-controls-bar {align-items:flex-start;}
 .filter-pills-wrap {max-width:100%;}
}
@media(max-width:1024px){
 .whats-new-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .tools-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:768px){
 .nav {height:60px;}
 .brand-wordmark {font-size:1.66rem;}
 .brand-app-pill {font-size:.62rem;}
 .hero-compact {min-height:0; padding:1.4rem 0 1.1rem;}
 .hero-compact::before,.hero-compact::after {width:36%;opacity:.22;}
 .hero-title {font-size:1.72rem;}
 .hero-desc {font-size:.82rem;}
 .tools-section {padding:1rem 0 2rem;}
 .tools-controls-bar {padding:.72rem;}
 .filter-pills-wrap {overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:.2rem;}
 .filter-pill {flex-shrink:0;}
 .seo-content-grid {grid-template-columns:1fr;}
 .faq-list {grid-template-columns:1fr;}
 .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
 .container {padding-left:1rem; padding-right:1rem;}
 .nav {height:58px;padding:0;}
 .btn-portal-main,.header-search-btn {display:none;}
 .brand-wordmark {font-size:1.55rem;}
 .hero-compact {padding:1.25rem 0 1.1rem;}
 .hero-compact::before,.hero-compact::after {width:50%;opacity:.16;}
 .hero-kicker-pill {font-size:.66rem; margin-bottom:.7rem; flex-wrap:wrap;justify-content:center;max-width:100%;}
 .hero-title {font-size:1.47rem; margin-bottom:.5rem;}
 .hero-desc {font-size:.78rem;max-width:360px;margin-bottom:.9rem;}
 .hero-search-box {padding:.25rem;}
 .hero-search-cta {padding:.55rem .75rem;min-width:58px;}
 .hero-search-cta span {display:none;}
 .search-icon-box {width:19px;margin-left:.1rem;}
 .hero-search-input {font-size:.75rem;padding:.4rem .1rem;}
 .hero-search-input::placeholder {font-size:.71rem;}
 .trending-searches {gap:.35rem;}
 .trending-term {font-size:.66rem;}
 .section-title {font-size:1.07rem;}
 .tools-controls-bar {gap:.6rem;}
 .tools-grid {grid-template-columns:1fr;gap:.65rem;}
 .tool-card {padding:.9rem;}
 .tool-card-body {margin-top:.52rem;}
 .whats-new-grid {grid-template-columns:1fr;}
 .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
 .footer-grid>div:first-child {grid-column:1/-1;}
 .standards-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:380px){.brand-app-pill{display:none}.lang-toggle-btn{padding:.3rem}.footer-grid{grid-template-columns:1fr}.standards-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tool-card:hover{transform:none}}

/* Collapsible navigation on phones and tablets */
.mobile-nav-btn { display:none; width:37px; height:37px; align-items:center; justify-content:center; border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-main);background:var(--surface-card); }
@media(max-width:992px) {
  .nav {position:relative;}
  .mobile-nav-btn {display:inline-flex;}
  .nav-links {display:none;position:absolute;inset-inline:1rem;top:calc(100% - 1px);z-index:120;padding:.75rem;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:0 0 13px 13px;box-shadow:var(--shadow-md);gap:.2rem;}
  .nav-links.is-open {display:flex;flex-direction:column;align-items:stretch;}
  .nav-links .nav-link {display:block;padding:.72rem .9rem;border-radius:8px;}
  .nav-links .nav-link:hover {background:var(--brand-subtle);}
  .nav-link.is-current::after {display:none;}
}
@media(max-width:640px) {
  .tools-grid.list-view .tool-card {grid-template-columns:minmax(0,1fr);gap:.4rem;}
  .tools-grid.list-view .tool-card-actions {width:100%;flex-direction:row;border-top:1px solid var(--border-subtle);padding-top:.7rem;margin-top:.25rem;}
  .mobile-nav-btn {width:34px;height:34px;}
}