/* 
Theme Name: Natural Stone Institute
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: AsCreative Services
Author URI: https://ascreativeservices.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: nsi
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =========================================================
   NSI hover effects & animations (matched to React build)
   Section classes (Elementor > Advanced > CSS Classes):
   .nsi-pathways .nsi-news .nsi-learning .nsi-silica
   .nsi-catalog .nsi-faq  (+ existing .nsi-sector .nsi-mega)
   ========================================================= */

@keyframes nsi-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes nsi-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Featured pathways: arrow bounces while card is hovered */
.nsi-pathways a.e-con:hover .elementor-widget-icon .elementor-icon {
  animation: nsi-arrow-bounce 1.2s ease-in-out infinite;
}

/* Sectors: "Learn More" arrow bounces continuously */
.nsi-sector-reveal .elementor-widget-icon .elementor-icon {
  animation: nsi-arrow-bounce 1.2s ease-in-out infinite;
}

/* News & events: titles and "View all" links turn bronze */
.nsi-news .elementor-heading-title,
.nsi-news .elementor-heading-title a,
.nsi-news .elementor-icon,
.nsi-news .elementor-icon svg {
  transition: color .15s, fill .15s;
}
.nsi-news .e-loop-item .elementor-widget-heading .elementor-heading-title a:hover,
.nsi-news a.e-con:hover .elementor-heading-title,
.nsi-news a.e-con:hover .elementor-widget-icon .elementor-icon {
  color: var(--e-global-color-secondary);
}
.nsi-news a.e-con:hover .elementor-widget-icon .elementor-icon svg {
  fill: var(--e-global-color-secondary);
}

/* Learning hub + mega menu image card: background zooms in */
.nsi-learning a.e-con,
.nsi-mega a.e-con {
  isolation: isolate;
  overflow: hidden;
}
.nsi-learning a.e-con::after,
.nsi-mega a.e-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  transition: transform .7s;
}
.nsi-learning a.e-con:hover::after,
.nsi-mega a.e-con:hover::after {
  transform: scale(1.05);
}

/* Learning hub + silica list: arrow slides right */
.nsi-learning .elementor-widget-icon .elementor-icon,
.nsi-silica .elementor-widget-icon .elementor-icon,
.nsi-mega .elementor-button-icon {
  transition: transform .3s;
}
.nsi-learning a.e-con:hover .elementor-widget-icon .elementor-icon,
.nsi-silica a.e-con:hover .elementor-widget-icon .elementor-icon {
  transform: translateX(8px);
}

/* Catalog: panel grows like React (ease-out 500ms) */
.nsi-catalog .eael-image-accordion-item {
  transition: flex .5s ease-out;
}

/* FAQ: question turns bronze on hover */
.nsi-faq .e-n-accordion-item-title-text {
  transition: color .15s;
}
.nsi-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
  color: var(--e-global-color-secondary);
}

/* Header mega menu: panel fades/slides in, links underline, button arrow nudges */
.nsi-mega .e-n-menu-content > .e-con.e-active {
  animation: nsi-drop .2s ease-out;
}
.nsi-mega .elementor-icon-list-item:hover .elementor-icon-list-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nsi-mega .elementor-button:hover .elementor-button-icon {
  transform: translateX(6px);
}

/* Footer: smooth link colour change */
.elementor-location-footer a {
  transition: color .15s;
}

/* ---------- Image overlays (exact React gradients) ---------- */
/* Elementor overlays are 2-stop at 50% opacity; React uses 3 stops at full opacity */
.elementor .nsi-pathways a.e-con::before,
.elementor a.nsi-sector.e-con::before,
.elementor .nsi-learning a.e-con::before,
.elementor .nsi-silica.e-con.e-parent::before,
.elementor a.nsi-cta.e-con::before,
.elementor .nsi-mega a.e-con::before {
  opacity: 1;
  background-color: transparent;
  transition: opacity .5s;
}
.elementor .nsi-pathways a.e-con::before {
  background-image: linear-gradient(to top, rgb(44,62,88) 0%, rgba(44,62,88,.3) 50%, transparent 100%);
  backdrop-filter: saturate(1.5);
}
.elementor a.nsi-sector.e-con::before,
.elementor .nsi-learning a.e-con::before {
  background-image: linear-gradient(to top, rgba(44,62,88,.9) 0%, rgba(44,62,88,.2) 50%, transparent 100%);
}
.elementor a.nsi-cta.e-con::before {
  background-image: linear-gradient(to top, rgba(44,62,88,.8) 0%, rgba(44,62,88,.2) 50%, transparent 100%);
}
.elementor .nsi-silica.e-con.e-parent::before {
  background-image: linear-gradient(to left, rgba(59,44,30,.95) 0%, rgba(59,44,30,.45) 50%, rgba(59,44,30,.1) 100%);
}
.elementor .nsi-mega a.e-con::before {
  background-image: linear-gradient(to top, rgba(44,62,88,.95) 0%, rgba(44,62,88,.4) 50%, rgba(44,62,88,.1) 100%);
}

/* Sectors + CTA tiles: gradient fades out, solid navy 85% fades in */
.nsi-sector,
.nsi-cta {
  isolation: isolate;
}
.nsi-sector::after,
.nsi-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(44,62,88,.85);
  opacity: 0;
  transition: opacity .5s;
}
.elementor a.nsi-sector.e-con:is(:hover, :focus-visible)::before,
.elementor a.nsi-cta.e-con:is(:hover, :focus-visible)::before {
  opacity: 0;
}
.nsi-sector:is(:hover, :focus-visible)::after,
.nsi-cta:is(:hover, :focus-visible)::after {
  opacity: 1;
}

/* Sectors: keep "Learn More" row visible; text clamps to the lines that fit (set in functions.php) */
.nsi-sector-reveal .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}
.nsi-sector-reveal .elementor-widget-text-editor p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--nsi-lines, 5);
  overflow: hidden;
}

/* =========================================================
   Header — pixel match to React (lucide icons, sizes, colours)
   ========================================================= */
.nsi-header {
  --nsi-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --nsi-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  --nsi-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20a6 6 0 0 0-12 0'/%3E%3Ccircle cx='12' cy='10' r='4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
  --nsi-hdr-text: rgba(44,62,88,.8);
  --nsi-hdr-strong: #2C3E58;
}
/* Cream bar once scrolled / on inner pages (React --cream) */
body:not(.home) .elementor .nsi-header.e-con,
.elementor .nsi-header.e-con.elementor-sticky--effects {
  background-color: rgb(243,238,229);
}
/* On the home hero (before scroll): light text */
body.home .nsi-header:not(.elementor-sticky--effects) {
  --nsi-hdr-text: rgba(253,252,248,.9);
  --nsi-hdr-strong: #FDFCF8;
}

/* Logo: 173 x 76 like React */
.elementor .nsi-header :is(.nsi-logo-light, .nsi-logo-dark).elementor-widget img {
  width: 173px;
  height: 76px;
  max-width: none;
  object-fit: contain;
}

/* Menu titles: 13px / 1.3px tracking, 6px to a 12px chevron, 2px underline when open */
body .elementor .nsi-header .nsi-mega.elementor-widget.elementor-element {
  --n-menu-title-color-normal: var(--nsi-hdr-text) !important;
  --n-menu-title-color-hover: var(--nsi-hdr-strong) !important;
  --n-menu-title-color-active: var(--nsi-hdr-strong) !important;
  --n-menu-dropdown-indicator-color-normal: var(--nsi-hdr-text) !important;
  --n-menu-dropdown-indicator-color-hover: var(--nsi-hdr-strong) !important;
  --n-menu-dropdown-indicator-color-active: var(--nsi-hdr-strong) !important;
}
@media (min-width: 1280px) {
  .elementor .nsi-header .nsi-mega .e-n-menu-heading .e-n-menu-title {
    gap: 6px;
    padding: 0 0 4px;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-heading .e-n-menu-title:has([aria-expanded="true"]) {
    border-bottom-color: var(--nsi-hdr-strong) !important;
  }
  /* Contact has no chevron in React but keeps its 6px + 12px slot */
  .elementor .nsi-header .nsi-mega .e-n-menu-heading .e-n-menu-title:not(:has(.e-n-menu-dropdown-icon)) {
    padding-right: 18px;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-title-container,
  .elementor .nsi-header .nsi-mega .e-n-menu-title-text {
    line-height: 1;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-dropdown-icon {
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-dropdown-icon-opened {
    display: none !important;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-dropdown-icon-closed {
    display: block !important;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--nsi-ico-chevron) center / 12px 12px no-repeat;
    mask: var(--nsi-ico-chevron) center / 12px 12px no-repeat;
    transition: transform .2s;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-dropdown-icon-closed svg {
    display: none;
  }
  .elementor .nsi-header .nsi-mega .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed {
    transform: rotate(180deg);
  }
}

/* Right group: Join Now · search · account, 20px apart */
.elementor .nsi-header .e-con:has(> .nsi-join) {
  --gap: 20px 20px;
  --column-gap: 20px;
  gap: 20px;
}
.elementor .nsi-header .nsi-join .elementor-button {
  margin-bottom: 4px; /* centre matches React's Join Now (y 50) */
  padding: 0 0 4px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1.3px;
  color: var(--nsi-hdr-strong) !important;
  background: none;
}
body .elementor .nsi-header.e-con :is(.nsi-search .elementor-search-form__toggle.elementor-search-form__toggle, .nsi-user .elementor-icon.elementor-icon) {
  --e-search-form-toggle-size: 16px;
  margin-bottom: 4px; /* React icons sit in a 20px button with pb-1 */
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 16px;
  background: none;
  color: var(--nsi-hdr-strong) !important;
  opacity: .9;
  transition: opacity .15s;
}
body .elementor .nsi-header.e-con :is(.nsi-search .elementor-search-form__toggle.elementor-search-form__toggle, .nsi-user .elementor-icon.elementor-icon):hover {
  opacity: 1;
}
.elementor .nsi-header :is(.nsi-search .elementor-search-form__toggle, .nsi-user .elementor-icon) :is(svg, i, .e-font-icon-svg-container) {
  display: none;
}
.elementor .nsi-header :is(.nsi-search .elementor-search-form__toggle, .nsi-user .elementor-icon)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nsi-hdr-strong);
  -webkit-mask: var(--nsi-ico-search) center / 16px 16px no-repeat;
  mask: var(--nsi-ico-search) center / 16px 16px no-repeat;
}
.elementor .nsi-header .nsi-user .elementor-icon::before {
  -webkit-mask-image: var(--nsi-ico-user);
  mask-image: var(--nsi-ico-user);
}

/* =========================================================
   Layout parity with React
   ========================================================= */
/* Tailwind preflight: paragraphs have no bottom margin */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}
/* Hero sits under the 124px header; content capped at 1440px like React */
body.home .elementor .nsi-hero.e-con {
  margin-top: -124px;
}
.nsi-hero > .e-con {
  width: 100%;
  max-width: 1344px;
  margin-inline: auto;
}

/* Typography parity: React uses 1.5 line-height for the accent/eyebrow style */
body.elementor-kit-5 {
  --e-global-typography-accent-line-height: 1.5em;
}
/* Home outline buttons (About NSI / Mission / Board / View Catalog): tracking 0.08em */
.elementor-13 .elementor-widget-button .elementor-button {
  letter-spacing: .08em;
}
/* Pathway card eyebrows: text-xs (12px / 16px) */
.nsi-pathways a.e-con .elementor-widget-heading:first-child .elementor-heading-title {
  line-height: 16px;
}
/* Learning Hub card label: leading-none */
.nsi-learning a.e-con .e-con .e-con .elementor-widget-heading:first-child .elementor-heading-title {
  line-height: 1;
}
/* News: featured image 16:9, event date row 20px tall */
.elementor .nsi-news .elementor-widget-image.elementor-widget img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
.nsi-news .e-loop-item span.elementor-heading-title {
  display: block;
}

/* ---------- Footer ---------- */
.elementor .nsi-footer .elementor-widget-image.elementor-widget img {
  width: 173px;
  height: 76px;
  max-width: none;
  object-fit: contain;
}
/* "Contact Us" and copyright are text-xs (12px / 16px) */
.nsi-footer .elementor-widget-heading p.elementor-heading-title {
  line-height: 16px;
}
/* Social icons: React's 20px SVGs, 16px apart */
.elementor .nsi-footer .elementor-social-icons-wrapper {
  gap: 16px;
}
.elementor .nsi-footer .elementor-social-icon {
  --icon-size: 20px;
  --icon-padding: 0;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  background: none;
}
.elementor .nsi-footer .elementor-social-icon svg {
  visibility: hidden;
}
.elementor .nsi-footer .elementor-social-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--nsi-social) center / contain no-repeat;
  mask: var(--nsi-social) center / contain no-repeat;
}
.nsi-footer .elementor-social-icon-facebook-f { --nsi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill='currentColor' d='M12 2c5.523 0 10 4.477 10 10 0 5.013-3.689 9.163-8.5 9.887V15h1a1.5 1.5 0 0 0 0-3h-1v-2a.5.5 0 0 1 .5-.5h.5a1.5 1.5 0 0 0 0-3H14a3.5 3.5 0 0 0-3.5 3.5v2h-1a1.5 1.5 0 0 0 0 3h1v6.887C5.689 21.163 2 17.013 2 12 2 6.477 6.477 2 12 2' data-tsd-source='/src/components/site/SiteFooter.tsx:25:18'%3E%3C/path%3E%3C/svg%3E"); }
.nsi-footer .elementor-social-icon-instagram { --nsi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill='currentColor' d='M16 3a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm-4 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8m0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4m4.5-3.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2' data-tsd-source='/src/components/site/SiteFooter.tsx:25:18'%3E%3C/path%3E%3C/svg%3E"); }
.nsi-footer .elementor-social-icon-linkedin-in { --nsi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4 2a1 1 0 0 1 1-1h.002a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1m7.503 3.191a1.9 1.9 0 0 0-1.307-.21c-.246.05-.566.253-.855.577a2.2 2.2 0 0 0-.297.418 1 1 0 0 0-.044.092V16a1 1 0 1 1-2 0v-6a1 1 0 0 1 1.812-.584c.296-.18.63-.324.992-.396a3.9 3.9 0 0 1 2.729.457C16.356 9.972 17 10.84 17 12v4a1 1 0 1 1-2 0v-4q0-.51-.497-.809M8 10a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1' clip-rule='evenodd' data-tsd-source='/src/components/site/SiteFooter.tsx:25:18'%3E%3C/path%3E%3C/svg%3E"); }
.nsi-footer .elementor-social-icon-youtube { --nsi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath fill='currentColor' d='M12 4.25c2.214 0 4.571.151 6.248.287a3.55 3.55 0 0 1 3.267 3.198c.12 1.234.235 2.803.235 4.265s-.116 3.03-.235 4.265a3.55 3.55 0 0 1-3.267 3.198c-1.677.136-4.034.287-6.248.287s-4.571-.151-6.248-.287a3.55 3.55 0 0 1-3.267-3.198C2.365 15.03 2.25 13.462 2.25 12s.116-3.03.235-4.265a3.55 3.55 0 0 1 3.267-3.198C7.429 4.401 9.786 4.25 12 4.25m-1.1 4.806a.6.6 0 0 0-.9.52v4.849c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04z' data-tsd-source='/src/components/site/SiteFooter.tsx:25:18'%3E%3C/path%3E%3C/svg%3E"); }
.nsi-footer .elementor-social-icon-houzz { --nsi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23000'%3E%3Cpath d='M275.9 330.7H171.3V480H17V32h109.5v104.5l305.1 85.6V480H275.9z' data-tsd-source='/src/components/site/SiteFooter.tsx:36:7'%3E%3C/path%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .nsi-pathways *, .nsi-sector-reveal *, .nsi-mega .e-con { animation: none !important; }
}