/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Template: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ==========================================================================
   Global Variables
   ========================================================================== */
:root {
  --primary-color: #e64d25;
  --secondary-color: #283b82;
  --text-color: #3f3f3f;
  --text-muted: #666;
  --border-color: #eee;
  --background-light: #fff;
  --background-muted: #f9f9f9;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --transition: 0.2s ease;
  --max-width: 1200px;
  --border-radius: 8px;
  --font-primary: "Ubuntu", sans-serif;
  --font-condensed: "Ubuntu Condensed", sans-serif;
  --background: #fff;
  --foreground: #111;
  --primary: #e64d25;
  --secondary: #283b82;
  --muted: #f5f5f5;
  --muted-foreground: #666;
  --border: #e5e5e5;
  --font-sans: "Ubuntu", sans-serif;
    --primary-2: #cf3f1d;          /* darker shade for gradient */
    --on-primary: #ffffff;         /* text on orange */
    --ring: #ffffff;               /* focus ring on colored bg */
    --radius-pill: 9999px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: var(--text-color);
  transition: color var(--transition);
}

p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300 !important;
}

.pagination .page-numbers, .search-pagination .page-numbers, .videos-pagination .page-numbers{
  margin-right: 5px;
}
.post-article li,
.post-article ul,
.post-article span {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 300 !important;
}

.article-content a {
  color: var(--primary-color);
}

.article-content h4 {
  margin-bottom: 20px;
}
.article-content a:hover {
  text-decoration: underline;
}

.article-date,
.article-category {
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
}

.hero-content h1 {
  color: var(--background-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  font-family: var(--font-condensed);
  font-weight: 400;
  line-height: 1.2;
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--text-color);
  background: transparent;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color var(--transition);
}

button:hover {
  background-color: var(--secondary-color);
}

button.menu-toggle,
button.search-button {
  background-color: var(--background-muted);
}
/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background-color: var(--background-light);
  width: 100%;
  font-family: var(--font-condensed);
}

.navigation {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img,
.site-logo {
  height: 50px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.header-menu {
  display: flex;
  list-style: none;
  gap: 0.5rem;
}

.header-menu li {
  position: relative;
}

.header-menu li a {
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--transition);
}

.header-menu li a:hover,
.header-menu li.current-menu-item > a,
.header-menu li.current_page_item > a {
  color: var(--primary-color);
}

.header-menu > li > a {
  text-transform: uppercase;
}

.header-menu li ul li a {
  text-transform: none;
}

.header-menu li:hover > ul {
  display: block;
}

.header-menu ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--background-light);
  border: 1px solid #ccc;
  list-style: none;
  padding: 0.5rem 0;
  min-width: 150px;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.header-menu ul li a {
  display: block;
  white-space: nowrap;
}

.header-menu li.menu-item-has-children > a {
  padding-right: 1.25rem;
  position: relative;
}

.header-menu li.menu-item-has-children > a::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 18px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  transition: transform var(--transition), color var(--transition);
}

.header-menu li.menu-item-has-children:hover > a::after,
.header-menu li.menu-item-has-children:focus-within > a::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--primary-color);
}

@supports not (font-variation-settings: normal) {
  .header-menu li.menu-item-has-children > a::after {
    content: "▾";
    font-family: inherit;
  }
}

/* ==========================================================================
   Search Bar
   ========================================================================== */
.search-bar form {
  display: flex;
  gap: 5px;
  width: 100%;
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input::placeholder {
  color: #9aa0a6;
}

.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(230, 61, 37, 0.1);
}

.search-button {
  padding: 0 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--background-light);
  cursor: pointer;
  font-size: 1rem;
  color: #6b7280;
  transition: color var(--transition), border-color var(--transition);
}

.search-button:hover,
.search-button:focus {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */
.menu-toggle,
.mobile-nav {
  display: none;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.scroll-lock {
  position: fixed;
  width: 100%;
  overflow: hidden; /* harmless here, but position:fixed is the key */
}

@supports (-webkit-touch-callout: none) {
  .mobile-nav { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 992px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    background: var(--background-light);
    color: var(--text-color);
    font-family: var(--font-condensed);
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition),
      border-color var(--transition), color var(--transition);
  }

  .menu-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
  }

  .menu-toggle .icon-close {
    display: none;
  }

  body.nav-open .menu-toggle .icon-open {
    display: none;
  }

  body.nav-open .menu-toggle .icon-close {
    display: inline-block;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--background-light);
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    box-shadow: var(--shadow);
    overflow: hidden;
    color: var(--text-color);
    font-family: var(--font-primary);
  }

  body.nav-open .mobile-nav {
    transform: translateX(0);
  }

  .mobile-nav-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-light);
  }

  .mobile-nav-header .mobile-nav-brand img {
    height: 38px;
    width: auto;
    display: block;
  }

  .mobile-close {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition),
      background-color var(--transition);
    line-height: 1;
  }

  .mobile-close:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--background-muted);
  }

  .mobile-close .material-symbols-outlined {
    display: block;
    line-height: 1;
    font-size: 28px;
    transform: translateY(-0.5px);
  }

  #mobile-menu-panel > .mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: calc(100% - 57px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu > li {
    position: relative;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-menu > li > a {
    display: block;
    width: 100%;
    padding: 1rem 3rem 1rem 0.25rem;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-condensed);
    letter-spacing: 0.02em;
    border-radius: 10px;
    transition: color var(--transition), background-color var(--transition);
  }

  .mobile-menu > li > a:hover,
  .mobile-menu > li.current-menu-item > a,
  .mobile-menu > li.current_page_item > a {
    color: var(--primary-color);
    background: #fafafa;
  }

  .submenu-toggle {
    appearance: none;
    border: none;
    background: transparent;
    position: absolute;
    right: 0.25rem;
    top: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
  }

  .submenu-toggle .material-symbols-outlined {
    font-size: 24px;
    color: var(--text-color);
    transition: transform var(--transition), color var(--transition);
  }

  .mobile-menu > li:hover > .submenu-toggle .material-symbols-outlined {
    color: var(--primary-color);
  }

  .mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.75rem 0.5rem;
    border-left: 2px solid var(--border-color);
    transition: max-height 0.28s ease;
    overflow: hidden;
  }

  .mobile-menu .sub-menu li a {
    display: block;
    padding: 0.6rem 0.5rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    font-family: var(--font-primary);
    border-radius: var(--border-radius);
    transition: color var(--transition), background-color var(--transition);
  }

  .mobile-menu .sub-menu li a:hover {
    color: var(--primary-color);
    background: #f6f6f6;
  }

  .mobile-menu li.open > .submenu-toggle .material-symbols-outlined {
    transform: rotate(180deg);
  }
}

/* Hard Overrides for Mobile Menu */
@media (max-width: 992px) {
  .mobile-nav {
    opacity: 1 !important;
    max-height: none !important;
  }
  body.nav-open #mobile-menu-panel {
    opacity: 1 !important;
    max-height: none !important;
  }
}

/* ==========================================================================
   Main Content
   ========================================================================== */
/* .main-content {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
} */

.latest-articles,
.category-section,
.value-proposition,
.events-series,
.content-page,
.value-proposition {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 30px;
  width: 100%;
}

.partners{
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}
.value-proposition{
    display: flex;
  flex-direction: column;
  justify-content: center;      /* vertical center */
  align-items: center;          /* horizontal center */
  text-align: center;
}

.hero-section,
.event-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 2rem;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 100%;
}

.event-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: center;
}

.articles-grid,
.category-grid,
.value-grid,
.events-list,
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.article-card,
.value-card {
  grid-template-rows: auto auto 1fr auto;
  gap: 0.5rem;
  padding: 1rem 0;
}

.article-image {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid var(--border-color);
  background-color: var(--background-muted);
}

.event-item,
.partner-logo {
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px solid #ddd;
}

.partner-logo {
  height: 80px;
  background-color: var(--background-muted);
}

/* Smart Manufacturing */
.manufacturing-top-row {
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.featured-article-large {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1rem;
  padding: 1rem;
}

.featured-image-large {
  position: relative;
  height: 400px; /* your desired box height */
  overflow: hidden; /* hide any overflow */
  border: 1px solid var(--border-color);
  background-color: var(--background-muted);
}

/* Make the actual <img> fill the box and crop nicely */
.featured-image-large img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* keep aspect, crop excess */
  object-position: center;
  display: block;
}

.manufacturing-bottom-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Sidebar */
.sidebar-content {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

.mobile-sidebar-content {
  display: none;
  grid-template-columns: 1fr;
  gap: 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
}

.newsletter-section,
.events-section {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}

.social-section {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
}

.social-icons {
  margin: 15px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.social-icons span {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 1px solid #ddd;
  background-color: var(--background-muted);
}

.newsletter-box {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1rem;
  padding: 1rem;
  background-color: #f0f4ff;
  border: 1px solid #ddd;
}

/* ===========================
   Read More – 2025 Minimal
   =========================== */
.read-more {
  width: 100%; /* span full width */
  margin: 0;
  padding: 0 0 1.25rem 0;
  display: grid;
  justify-items: center; /* <-- this centers the child */
  align-items: center; /* vertical centering */
  text-align: center;
  place-items: center;
  border-top: none;
  border-bottom: 1px solid var(--border-color); /* divider now at bottom */
}

/* link styling stays the same */
.read-more .read-more__link {
  --btn-h: 44px;
  --btn-pad-x: 16px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);

  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  color: var(--text-color);
  text-decoration: none;

  font-family: var(--font-condensed);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-weight: 600;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition), background-color var(--transition),
    color var(--transition);
}

/* chevron icon */
.read-more .read-more__icon {
  inline-size: 18px;
  block-size: 18px;
  display: inline-block;
  position: relative;
}
.read-more .read-more__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0.85;
}

/* hover / focus */
.read-more .read-more__link:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.read-more .read-more__link:hover .read-more__icon::before {
  transform: translateX(2px) rotate(-45deg);
  opacity: 1;
}
.read-more .read-more__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.read-more .read-more__link:focus-visible {
  outline: 3px solid rgba(230, 61, 37, 0.35); /* matches your theme focus */
  outline-offset: 2px;
}

/* compact variant for mobile */
@media (max-width: 640px) {
  .read-more {
    padding-top: 1rem;
  }
  .read-more .read-more__link {
    --btn-h: 42px;
    gap: 8px;
    font-size: 0.92rem;
    padding: 0 14px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .read-more .read-more__link,
  .read-more .read-more__icon::before {
    transition: none;
  }
}

/* Optional: section footer layout if you want left-aligned inside grid sections */
.category-section .read-more {
  justify-items: start; /* align left under the grid */
  padding-top: 1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #1f1f1f;
  color: #f0f0f0;
  font-family: var(--font-primary);
}

.site-footer a {
  color: #f0f0f0;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1rem 2.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 2rem 3rem;
}

.footer-col {
  min-width: 0;
}

.footer-eyebrow {
  font-family: var(--font-condensed);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  color: #ffffff;
}

.footer-brand .footer-logo {
  width: 260px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.75rem 0 1.25rem;
}

.footer-address {
  font-size: 14px;
  color: #cfcfcf;
  line-height: 1.6;
}

.footer-address em {
  color: #a8a8a8;
}

.footer-menu {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.footer-menu li + li {
  margin-top: 0.9rem;
}

.footer-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0;
  color: #d8d8d8;
  position: relative;
}

.footer-menu > li > a::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted #6b6b6b;
  margin-left: 12px;
  transform: translateY(-2px);
  opacity: 0.7;
}

.footer-menu > li > a:hover {
  color: #ffffff;
}

.footer-contact-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.footer-contact-form input,
.footer-contact-form textarea {
  width: 100%;
  background: #1f1f1f;
  color: #f0f0f0;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  outline: none;
}

.footer-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder {
  color: #c8c8c8;
}

.footer-contact-form input:focus,
.footer-contact-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(230, 61, 37, 0.15);
}

.footer-send {
  width: 100%;
  background: var(--primary-color);
  border: none;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9rem 1rem;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.02s ease-in-out;
}

.footer-send:hover {
  filter: brightness(1.05);
}

.footer-send:active {
  transform: translateY(1px);
}

.footer-bottom {
  background: #3a3a3a;
  padding: 1.25rem 1rem;
  width: 100%;
}

.footer-bottom-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom .footer-copy {
  flex: 1;
  color: #d0d0d0;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 4px;
  transition: background var(--transition), transform var(--transition);
}

.footer-social a svg {
  width: 24px;
  height: 24px;
  color: var(--primary-color);
}

.footer-social a:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}

.footer-social a:hover svg {
  color: #fff;
}

.footer-links ul {
  font-size: 16px;
  font-weight: 300;
}

/* ==========================================================================
   Back to Top
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  z-index: 999;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

.back-to-top.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Sticky Sidebar
   ========================================================================== */
.sidebar {
  position: sticky;
  top: 25px;
  align-self: start;
  height: max-content;
  z-index: 2;
}

.sidebar .stay-connected {
  position: static;
  top: auto;
}

/* ==========================================================================
   Social Icons
   ========================================================================== */
.sidebar .social-icons {
  display: grid;
  grid-template-columns: repeat(4, 0.17fr);
  gap: 0.5rem;
}

.sidebar .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 4px;
  transition: background var(--transition), transform var(--transition);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  text-decoration: none;
  outline: none;
  will-change: transform;
}

.sidebar .social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

.sidebar .social-icon:hover {
  transform: translateY(-2px);
}

.sidebar .social-icon.twitter:hover,
.sidebar .social-icon.facebook:hover,
.sidebar .social-icon.linkedin:hover,
.sidebar .social-icon.youtube:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.sidebar .social-icon:focus-visible {
  outline: 3px solid rgba(230, 61, 37, 0.35);
  outline-offset: 2px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumb {
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  gap: 10px;
}

.breadcrumb a {
  color: #767880 !important;
  transition: color 0.2s ease-out;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  margin: 0 3px;
  color: #999;
}

.page-header {
  padding-top: 15px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-header-full-width {
  padding: 0.5rem;
  background-color: #ededed;
  border-bottom: 1px solid var(--primary-color);
}

.page-header h1 {
  color: #1a1a1a;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

.sponsored-label {
  color: var(--primary-color);
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */
/* ---- Hero base (reuses your variables) ---- */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: 100vh; /* stable LCP box */
  overflow: hidden;
  font-family: var(--font-primary);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  content-visibility: auto;
  contain-intrinsic-size: 100vh 100vw; /* avoid layout cost for hidden slides */
}
.hero-slide.active { opacity: 1; }

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  aspect-ratio: 16/9;
}

/* Solid gradient background for newsletter slide */
.hero-bg.hero-bg-solid {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* Overlays */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.45));
  z-index: 2;
}
.hero-overlay-strong {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.55));
}

/* Content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
  color: #fff;
}
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  margin-bottom: 2rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: .375rem;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-primary);
}
.hero-title {
  font-family: var(--font-condensed);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  letter-spacing: .01em;
  color: #fff;
}
.hero-subtitle { color: var(--on-primary, #fff); }
.hero-description {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.7;
  margin: 0 auto 2rem;
  color: rgba(255,255,255,.9);
  max-width: 48rem;
}
.hero-cta { margin-bottom: 2.25rem; }

/* Button */
.hero-button {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: .375rem;
  font-weight: 600;
  font-size: 1.125rem;
  font-family: var(--font-primary);
  transition: background-color .2s ease, transform .02s ease-in-out, color .2s ease, border-color .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  letter-spacing: .02em;
}
.hero-button:hover { background: #d63e1e; filter: brightness(1.05); }
.hero-button:active { transform: translateY(1px); }

/* Outline variant for dark/gradient backgrounds */
.hero-button--outline {
  background: transparent;
  border: 2px solid #fff;
}
.hero-button--outline:hover {
  background: #fff;
  color: var(--primary-color);
  filter: none;
}

/* Highlights */
.hero-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  max-width: 42rem;
  margin: 0 auto;
}
.hero-highlight {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .375rem;
  padding: 1.25rem;
  text-align: center;
}
.hero-highlight-number {
  font-family: var(--font-condensed);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: .5rem;
  line-height: 1;
}
.hero-highlight-label {
  font-family: var(--font-primary);
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* Newsletter feature pills */
.newsletter-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1rem;
  margin: 1rem auto 1.5rem;
  max-width: 48rem;
}
.newsletter-feature {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.newsletter-feature:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}

/* Newsletter icons using Material Symbols */
.newsletter-icon {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Progress */
.hero-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,.2);
  z-index: 10;
}
.hero-progress-bar {
  height: 100%;
  background: var(--primary-color);
  width: 0%;
  transition: width .1s linear;
  will-change: width;
}

/* Responsiveness */
@media (max-width: 768px) {
  .hero-content { padding: 0 1rem; }
  .hero-highlights { grid-template-columns: 1fr; gap: 1rem; }
  .hero-highlight { padding: 1rem; }
  .newsletter-features { gap: .5rem; }
  .newsletter-feature { font-size: .9rem; padding: .45rem .75rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-button,
  .hero-progress-bar { transition: none; }
}


/* Newsletter hero text sizing */

/* Main title */
#slide-newsletter .hero-title {
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); /* bigger than before */
  line-height: 1.15;
}

/* Subtitle inside title */
#slide-newsletter .hero-subtitle {
  font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); /* bigger than before */
}

/* Description text */
#slide-newsletter .hero-description {
  font-size: clamp(1.2rem, 2.8vw, 1.45rem); /* was ~1.125–1.35rem */
  line-height: 1.7;
  max-width: 46rem;
  margin: 0 auto 2rem;
}

/* Feature pills text */
#slide-newsletter .newsletter-feature {
  font-size: 1rem; /* bump slightly from 0.95rem */
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    order: 1;
  }

  .footer-links {
    order: 2;
  }

  .footer-contact {
    order: 3;
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }

  .navigation {
    padding: 0.5rem;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    order: 3;
  }

  .header-menu {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .header-menu li a {
    padding: 0.75rem;
    display: block;
    text-align: center;
  }

  .header-menu ul {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--background-muted);
    margin-left: 1rem;
  }

  .category-grid,
  .articles-grid,
  .value-grid,
  .events-list,
  .manufacturing-top-row,
  .manufacturing-bottom-row {
    grid-template-columns: 1fr;
  }

  .manufacturing-top-row,
  .manufacturing-bottom-row {
    max-width: 100%;
    margin: 0;
  }

  .sidebar-content {
    display: none;
  }

  .mobile-sidebar-content {
    display: grid;
  }

  .footer-social a {
    width: 40px;
    height: 40px;
  }

  .footer-social a svg {
    width: 20px;
    height: 20px;
  }

  .hero-content {
    padding: 0 1rem;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-highlight {
    padding: 1rem;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .hero-meta {
    margin-bottom: 1.5rem;
  }

  .hero-cta {
    margin-bottom: 2rem;
  }

  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.5)
    );
  }

  .sidebar {
    position: static;
  }

  .sidebar .social-icon {
    width: 40px;
    height: 40px;
  }

  .sidebar .social-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-logo {
    width: 220px;
  }

  .footer-bottom {
    text-align: left;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-social a svg {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 480px) {
  .logo img {
    height: 40px;
  }

  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .footer-social a {
    width: 32px;
    height: 32px;
  }

  .footer-social a svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   Miscellaneous
   ========================================================================== */
.article-meta {
  font-size: 0.5em;
  color: var(--text-muted);
}

.article-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-button,
  .hero-progress-bar,
  .sidebar .social-icon {
    transition: none;
  }
}

/* ==========================================================================
   Loading States
   ========================================================================== */
.hero-bg[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.hero-bg[loading="lazy"].loaded {
  opacity: 1;
}

/* Neutralize inline font-weight */
.entry-content p[style*="font-weight: 400"],
.entry-content p[style*="font-weight: normal"],
.entry-content span[style*="font-weight: 400"],
.entry-content span[style*="font-weight: normal"] {
  font-weight: inherit !important;
}

/* ===========================
   Article / Featured Cards – 2025 minimal
   Image zoom on hover + tidy layout
   =========================== */

/* Neutralize old container chrome to avoid double borders/padding */
.article-card,
.featured-article-large {
  position: relative;
  border: 0;
}

/* The link is the visual card (full clickable area) */
.article-card .card-link,
.featured-article-large .card-link {
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* image, title, excerpt grows, date at bottom */
  gap: 0.65rem;
  padding: 1rem;

  background: var(--background-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: inherit;
  text-decoration: none;

  transition: box-shadow var(--transition), border-color var(--transition);
}

/* Hover/focus polish (no vertical movement) */
.article-card .card-link:hover,
.featured-article-large .card-link:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}
.article-card .card-link:focus-visible,
.featured-article-large .card-link:focus-visible {
  outline: 3px solid rgba(230, 61, 37, 0.35);
  outline-offset: 2px;
  border-radius: var(--border-radius);
}

/* Image containers (clip the zoom) */
.article-image,
.featured-image-large {
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius);
  background-color: var(--background-muted);
}

/* Heights (adjust as you like) */
.article-image {
  height: 220px;
}
.featured-image-large {
  height: 400px;
}

/* Make images cover their boxes */
.article-image img,
.featured-image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transition: transform 0.35s ease;
  will-change: transform;
}

/* Zoom the image on hover (card or link) */
.article-card:hover .article-image img,
.article-card .card-link:hover .article-image img,
.featured-article-large:hover .featured-image-large img,
.featured-article-large .card-link:hover .featured-image-large img {
  transform: scale(1.05);
}

/* Typography + spacing */
.article-title,
.featured-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-color);
}

.article-title {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}
.featured-title {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}

.article-excerpt,
.featured-excerpt {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Date pinned to the bottom row */
.article-meta {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  align-self: end; /* stick to the last grid row */
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Read More (keeps your new style; centered with full-width bottom divider) */

.read-more .read-more__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  color: var(--text-color);
  text-decoration: none;
  font-family: var(--font-condensed);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--transition), border-color var(--transition),
    color var(--transition);
}
.read-more .read-more__link:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}
.read-more .read-more__icon {
  inline-size: 18px;
  block-size: 18px;
  position: relative;
}
.read-more .read-more__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0.85;
}
.read-more .read-more__link:hover .read-more__icon::before {
  transform: translateX(2px) rotate(-45deg);
  opacity: 1;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .article-image {
    height: 180px;
  }
  .featured-image-large {
    height: 280px;
  }
  .article-title {
    font-size: 1rem;
  }
  .featured-title {
    font-size: 1.25rem;
  }
  .read-more .read-more__link {
    height: 42px;
    padding: 0 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .article-image img,
  .featured-image-large img {
    transition: none;
  }
}

/* ---------------------------
   Fallback if you did NOT wrap with .card-link
   (Modern browsers support :has. Remove if not needed.)
   --------------------------- */
.article-card:not(:has(.card-link)) {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.65rem;
  padding: 1rem;
  background: var(--background-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.article-card:not(:has(.card-link)):hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}
.article-card:not(:has(.card-link)) .article-meta {
  align-self: end;
}
.article-card:not(:has(.card-link)):hover .article-image img {
  transform: scale(1.05);
}

/* Make every grid item stretch and give the card a full height box */
.articles-grid,
.category-grid,
.manufacturing-bottom-row {
  align-items: stretch;
}

.article-card {
  height: 100%;
} /* the grid item */
.article-card .card-link {
  /* the clickable wrapper */
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* image, title, excerpt, date */
  height: 100%; /* << critical */
}

/* Same idea for the featured card */
.featured-article-large {
  height: 100%;
}
.featured-article-large .card-link {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
}

/* Ensure content can shrink without overflow */
.article-card .card-link > *,
.featured-article-large .card-link > * {
  min-height: 0;
}

/* Keep the date pinned to the bottom row */
.article-meta {
  align-self: end;
}

/* If some cards don't use .card-link (title-only link), keep them aligned too */
.article-card:not(:has(.card-link)) {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
}
.article-card:not(:has(.card-link)) .article-meta {
  align-self: end;
}

/* Desktop ↔ Mobile placement for Stay Connected */
.stay-connected-desktop {
  display: block;
}
.stay-connected-mobile {
  display: none;
}

/* When the mobile menu breakpoint kicks in (same as your mobile nav: 992px) */
@media (max-width: 992px) {
  /* Move Stay Connected to the bottom, hide the desktop slot */
  .stay-connected-desktop {
    display: none;
  }
  .stay-connected-mobile {
    display: block;
    margin-top: 1rem;
  }

  /* Put all article lists on a single column line */
  .articles-grid,
  .category-grid,
  .manufacturing-top-row,
  .manufacturing-bottom-row {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   home page reach out us
   ========================================================================== */


    p.lead {
      max-width: 48rem;
      margin: 0 auto 3rem;
      text-align: center;
      font-size: 1.125rem;
      color: var(--muted-foreground);
      line-height: 1.6;
    }

    .grid {
      display: grid;
      gap: 2rem;
    }

    @media (min-width: 1024px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      transition: box-shadow 0.2s ease;
    }

    .card:hover {
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

    .icon {
      width: 4rem;
      height: 4rem;
      margin: 0 auto 1.5rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to bottom right, var(--primary), var(--secondary));
      color: #fff;
    }

    .card h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .card p {
      font-size: 1rem;
      color: var(--muted-foreground);
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    .btn {
      display: inline-block;
      background: var(--primary);
      color: #fff;
      padding: 0.75rem 1.5rem;
      border-radius: 0.375rem;
      text-transform: uppercase;
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

    .btn:hover {
      opacity: 0.9;
    }

    /*home page iiot world days*/
    .days {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: var(--on-primary);
    padding: clamp(3rem, 6vw, 6rem) 1rem;
    text-align: center;
    width: 100%;
  }

  .days h2 {
    color:#fff;
    font-family: "Ubuntu Condensed", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font-size: clamp(1.5rem, 2.2vw + 1rem, 2.75rem);
  }

  .days__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(.5rem, 1vw, 1rem);
    justify-content: center;
  }

  .days__link {
    --border: rgba(255, 255, 255, 0.6);
    display: inline-block;
    text-decoration: none;
    color: var(--on-primary);
    font-size: clamp(1rem, .7vw + .9rem, 1.375rem);
    padding: .9rem 1.25rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
      0 1px 0 rgba(255,255,255,.25) inset,
      0 10px 20px rgba(0,0,0,.08);
    transition: all .2s ease;
    outline: none;
    position: relative;
  }

  .days__link::after {
    content: "→";
    position: relative;
    left: .25rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: transform .2s ease, opacity .2s ease;
  }

  .days__link:hover,
  .days__link:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.10);
    border-color: #fff;
    box-shadow:
      0 2px 0 rgba(255,255,255,.25) inset,
      0 14px 28px rgba(0,0,0,.12);
    letter-spacing: .015em;
  }

  .days__link:hover::after,
  .days__link:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
  }

  .days__link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .days__link,
    .days__link::after {
      transition: none;
      transform: none;
    }
  }


  /* ======================================================
   Search 2025 — Full-width stacked list (low height)
   Keeps existing behavior/design; layout changes only.
   ====================================================== */

/* 0) Page + container: no outer padding, truly full width */
.search-2025 .container-1100 {
  max-width: 1200px;
  width: 100%;
  padding: 0;
  margin:0 auto;
}

.container-1100{
   padding: 0.5rem 0 !important;
}

.result-card__thumb{
  padding:1rem !important;
  height: none !important;
}
/* 1) One-under-one list */
.search-2025 .results-grid {
  display: block;          /* no grid masonry */
  margin: 0;               /* no side gaps */
}

/* Spacing between rows */
.search-2025 .result-card {
  margin: 0;               /* no outer padding */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--background-light);
  transition: box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;

  /* media object layout: small thumb, body full width */
  display: grid;
  grid-template-columns: 240px 1fr;   /* thumbnail width */
  grid-template-rows: 1fr;
  gap: 14px;
}

/* compact vertical spacing between cards */
.search-2025 .result-card + .result-card {
  margin-top: 10px;
}

/* hover behavior (same as cards) */
.search-2025 .result-card:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.10);
}

/* 2) Smaller thumbnail (keeps zoom on hover) */
.search-2025 .result-card__thumb {
  display: block;
  overflow: hidden;
  background: var(--background-muted);
  align-self: stretch;
}
.search-2025 .result-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
  will-change: transform;
}
.search-2025 .result-card:hover .result-card__thumb img {
  transform: scale(1.05);
}

/* 3) Compact body (keeps titles/meta/excerpt styling) */
.search-2025 .result-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto; /* meta, title, excerpt, cta */
  gap: .4rem;
  padding: .75rem .75rem .75rem 0;        /* minimal interior padding; no outer padding overall */
  min-height: 0;
}

/* Meta + title keep the same look; no changes needed besides spacing */
.search-2025 .result-card__meta {
  font-size: .85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Title */
.search-2025 .result-card__title {
  font-family: var(--font-condensed);
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  margin: 0;
}
.search-2025 .result-card__title a {
  color: var(--text-color);
  text-decoration: none;
}
.search-2025 .result-card__title a:hover { color: var(--primary-color); }

/* Excerpt: tighter (2 lines) for lower row height */
.search-2025 .result-card__excerpt {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* CTA pill (unchanged behavior; slightly shorter) */
.search-2025 .result-card__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;                   /* shorter button */
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  color: var(--text-color);
  font-family: var(--font-condensed);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.search-2025 .result-card__cta::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateX(-2px);
  transition: transform var(--transition), opacity var(--transition);
  opacity: .9;
}
.search-2025 .result-card__cta:hover {
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.search-2025 .result-card__cta:hover::after {
  transform: rotate(-45deg) translateX(0);
}

/* 4) Focus-visible parity */
.search-2025 .result-card:focus-within {
  outline: 3px solid rgba(230, 61, 37, .35);
  outline-offset: 2px;
}

/* 5) Breadcrumb/header keep existing look; remove extra top/bottom padding if any */
.search-2025 .search-results { padding: 0; }
.search-2025 .page-header-full-width { padding: 0; }

/* 6) Pagination spacing stays tight under list */
.search-2025 .search-pagination {
  margin: 16px 0 32px;
}

/* 7) Mobile: stack image above text, still compact */
@media (max-width: 768px){
  .search-2025 .result-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .search-2025 .result-card__thumb {
    height: 180px;      /* a bit taller on mobile for clarity */
  }
  .search-2025 .result-card__body {
    padding: .75rem;
  }
}

/* 8) Reduced motion */
@media (prefers-reduced-motion: reduce){
  .search-2025 .result-card,
  .search-2025 .result-card__thumb img,
  .search-2025 .result-card__cta { transition: none; }
}



/*MODAL*/
/* ===== Entry Modal (overlay + dialog) ===== */

.entry-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above mobile nav */
  display: grid;
  place-items: center;
}

.entry-modal[hidden] {
  display: none !important;
}

.entry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* "full overlay, no full opacity" */
  backdrop-filter: blur(1.5px);
}

.entry-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 750px);
  background: var(--background-light, #fff);
  color: var(--text-color, #3f3f3f);
  border: 1px solid var(--border-color, #eee);
  border-radius: calc(var(--border-radius, 8px) + 2px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  outline: none;
}

.entry-modal__dialog {
  position: relative;
  padding: 1.5rem;
  padding-right: 4rem; /* reserve space for the close button */
}

.entry-modal__title {
  font-family: var(--font-condensed, "Ubuntu Condensed", sans-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--secondary-color, #283b82);
  font-weight: 700;
}

.entry-modal__desc {
  margin: 0 0 1.25rem;
  color: var(--text-muted, #666);
  font-size: 1rem;
  line-height: 1.6;
}

.entry-modal__actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.entry-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  background: var(--primary, var(--primary-color, #e64d25));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: filter var(--transition, .2s ease), transform .02s ease-in-out;
}
.entry-modal__cta:hover { filter: brightness(1.05); }
.entry-modal__cta:active { transform: translateY(1px); }

.entry-modal__secondary {
  appearance: none;
  border: 1px solid var(--border-color, #e5e5e5);
  background: #fff;
  color: var(--text-color, #3f3f3f);
  padding: .8rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition, .2s), box-shadow var(--transition, .2s);
}
.entry-modal__secondary:hover {
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.entry-modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e5e5e5);
  background: #fff;
  color: var(--text-color, #3f3f3f);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--transition, .2s), color var(--transition, .2s), background var(--transition, .2s);
}

.entry-modal__close{
  padding:0 !important;
}
.entry-modal__close:hover {
  border-color: var(--primary, #e64d25);
  color: var(--primary, #e64d25);
  background: var(--muted, #f5f5f5);
}

/* Focus styles */
.entry-modal__dialog:focus-visible,
.entry-modal__cta:focus-visible,
.entry-modal__secondary:focus-visible,
.entry-modal__close:focus-visible {
  outline: 3px solid rgba(230,61,37,.35);
  outline-offset: 2px;
}

/* Mobile polish */
@media (max-width: 480px){
  .entry-modal__dialog { padding: 1rem; }
  .entry-modal__actions { gap: .5rem; }
  .entry-modal__cta, .entry-modal__secondary { width: 100%; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .entry-modal__cta,
  .entry-modal__secondary { transition: none; }
}