/* ============================================================
   Hilinkworld -> profence.com.au inspired skin  (v2.0)
   Visual design ONLY. All content stays Hilinkworld's own.
   Tokens extracted from profence.com.au (Divi) on 2026-08-26/27:
     paper #fff | body ink #666 / lh 1.7 | Poppins
     red #C60315 | red-dark #a00210 | yellow #EACE2C
     header bar = RED #C60315, white nav links (hover/active = yellow)
     hero/CTA charcoal #151817, white heading
     light-section heading #444444 | dark-section heading #fff/#AAA
     footer = DARK grey #444444, white text/headings/links
     buttons: red fill, 3px radius, hover darken
     cards: white, 1px border, hover translateY(-3px)+shadow 0 15px 30px
     section titles: 60px / 2px red underline accent
   Targets Hilinkworld's actual Elementor DOM (.e-con / .elementor-*).
   ============================================================ */
:root{
  --pf-paper:#ffffff; --pf-ink:#666666; --pf-head:#444444;
  --pf-red:#C60315; --pf-red-d:#a00210; --pf-yellow:#EACE2C;
  --pf-line:rgba(0,0,0,.12); --pf-dark:#151817; --pf-dark-txt:#EDEDED;
  --pf-shadow:0 15px 30px rgba(0,0,0,.30);
  --pf-pad: clamp(48px, 7vw, 96px);
}
/* override Elementor GLOBAL colors (Leo set a gold accent during the Dark Luxe
   era; Elementor buttons/links inherit it). Reset to profence tokens. */
:root{
  --e-global-color-primary:#151817 !important;
  --e-global-color-secondary:#C60315 !important;
  --e-global-color-accent:#C60315 !important;
  --e-global-color-text:#666666 !important;
}
html{background:var(--pf-paper) !important;}
body{
  font-family:'Poppins',Helvetica,Arial,sans-serif !important;
  background:var(--pf-paper) !important;color:var(--pf-ink) !important;
  font-size:16px !important;line-height:1.7 !important;
  -webkit-font-smoothing:antialiased;
}

/* ---------- headings ---------- */
h1,h2,h3,h4,h5,h6,
.site-title,.elementor-heading-title{
  font-family:'Poppins',Helvetica,Arial,sans-serif !important;
  color:var(--pf-head) !important;line-height:1.2;margin:0 0 .4em;
}
h1{font-size:33px !important;font-weight:600 !important;}
h2{font-size:clamp(30px,4.4vw,46px) !important;font-weight:600 !important;letter-spacing:-.5px;}
h3{font-size:24px !important;font-weight:500 !important;}
h4{font-size:18px !important;font-weight:600 !important;}
/* section-title red underline accent (profence signature) */
#content .elementor-heading-title,
.entry-content .elementor-heading-title,
.elementor-location-footer .elementor-heading-title{position:relative;}
#content h2.elementor-heading-title:after,
.entry-content h2.elementor-heading-title:after,
#content h3.elementor-heading-title:after,
.entry-content h3.elementor-heading-title:after{
  content:"";display:block;width:60px;height:2px;background:var(--pf-red);
  margin-top:14px;
}

/* ---------- links ---------- */
a{color:var(--pf-red) !important;transition:color .25s ease;}
a:hover{color:var(--pf-red-d) !important;}

/* hide Dark Luxe liquid-glow leftovers (plugin deactivated, belt & braces) */
.hl-blobs,.hl-glow,.hl-progress{display:none !important;}

/* ---------- HEADER (profence = RED bar #C60315, white links) ---------- */
.elementor-location-header,[data-elementor-type="header"],
.site-header,.ast-primary-header-bar,.main-header-bar,header{
  background:var(--pf-red) !important;color:#fff !important;
  transition:box-shadow .3s ease, background .3s ease;
}
/* nav links white on the red bar */
.elementor-nav-menu a,.elementor-item,.elementor-sub-item,
.ast-nav-menu a,.main-navigation a,.ast-builder-menu .menu-link{
  color:#ffffff !important;font-weight:500;font-size:16px;
  transition:color .25s ease;
}
.elementor-nav-menu a:hover,.elementor-item:hover,.elementor-sub-item:hover,
.main-navigation a:hover{color:var(--pf-yellow) !important;}
.elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown a{color:var(--pf-yellow) !important;}
/* solid-on-scroll shadow */
.pf-nav-solid{box-shadow:0 2px 18px rgba(0,0,0,.08) !important;}
/* kill any stray coloured header inner block (e.g. old teal bar) */
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .elementor-section,
[data-elementor-type="header"] .elementor-column,
[data-elementor-type="header"] .elementor-widget-wrap,
.elementor-element-f5e853e,
.elementor-element-f5e853e .elementor-widget-wrap{
  background:transparent !important;background-color:transparent !important;
}

/* ---------- BUTTONS (profence: red fill, 3px, hover darken) ---------- */
.elementor-button,a.elementor-button,.elementor-button-link,
button,input[type=submit],.wpcf7-submit,.wpforms-submit,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-proceed-to-checkout a.checkout-button,
.ast-btn,.btn,.wp-block-button__link,.ast-custom-button{
  display:inline-block;background:var(--pf-red) !important;color:#fff !important;
  border:2px solid var(--pf-red) !important;border-radius:3px !important;
  padding:12px 30px !important;font-family:'Poppins',sans-serif !important;
  font-weight:600 !important;font-size:15px !important;letter-spacing:.3px;
  text-transform:uppercase;cursor:pointer;transition:all .3s ease !important;
}
.elementor-button:hover,a.elementor-button:hover,.elementor-button-link:hover,
button:hover,input[type=submit]:hover,.wpcf7-submit:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.ast-btn:hover,.wp-block-button__link:hover{
  background:var(--pf-red-d) !important;border-color:var(--pf-red-d) !important;
  color:#fff !important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,3,21,.25);
}
/* outline / secondary variant */
.pf-btn-outline,.elementor-button-link{
  background:transparent !important;color:var(--pf-red) !important;
  border:2px solid var(--pf-red) !important;
}
.pf-btn-outline:hover,.elementor-button-link:hover{
  background:var(--pf-red) !important;color:#fff !important;
}

/* ---------- CARDS / surfaces (white, border, hover lift) ---------- */
.elementor-post,.elementor-post__card,
.woocommerce ul.products li.product,.products li.product,.wc-block-grid__product,
.elementor-icon-box,.ast-article-post,.ast-card,.wp-block-group,.wp-block-column{
  background:#fff !important;border:1px solid var(--pf-line) !important;
  color:var(--pf-ink) !important;border-radius:4px !important;overflow:hidden;
  transition:transform .4s ease-in-out, box-shadow .4s ease-in-out !important;
}
.elementor-post:hover,.elementor-post__card:hover,
.woocommerce ul.products li.product:hover,.products li.product:hover,
.elementor-icon-box:hover,.ast-article-post:hover{
  transform:translateY(-3px) !important;box-shadow:var(--pf-shadow) !important;
}
.elementor-post .elementor-post__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.ast-article-post .entry-title{color:var(--pf-head) !important;}
.elementor-post .elementor-post__title a:hover{color:var(--pf-red) !important;}

/* ---------- CHARCOAL HERO / CTA band (profence #151817) ---------- */
.pf-dark{
  background:var(--pf-dark) !important;color:var(--pf-dark-txt) !important;
  padding-top:var(--pf-pad) !important;padding-bottom:var(--pf-pad) !important;
}
.pf-dark .elementor-heading-title,
.pf-dark h1,.pf-dark h2,.pf-dark h3,.pf-dark h4{color:#fff !important;}
.pf-dark .elementor-heading-title:after,
.pf-dark h2:after,.pf-dark h3:after{background:var(--pf-red) !important;}
.pf-dark a{color:var(--pf-yellow) !important;}
.pf-dark p{color:var(--pf-dark-txt) !important;}
.pf-dark .elementor-button,.pf-dark a.elementor-button{
  background:#fff !important;color:var(--pf-dark) !important;border-color:#fff !important;
}
.pf-dark .elementor-button:hover{background:var(--pf-yellow) !important;border-color:var(--pf-yellow) !important;color:var(--pf-dark) !important;}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product .price{color:var(--pf-red) !important;}
.woocommerce ul.products li.product .price del{color:var(--pf-ink) !important;}
.woocommerce ul.products li.product .price ins{color:var(--pf-red) !important;}
.woocommerce span.onsale,.wc-block-grid__product-onsale{background:var(--pf-red) !important;color:#fff !important;}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  background:#fff !important;color:var(--pf-ink) !important;
  border:1px solid var(--pf-line) !important;border-left:3px solid var(--pf-red) !important;
}
.woocommerce .star-rating span:before{color:var(--pf-yellow) !important;}

/* ---------- forms ---------- */
input,textarea,select,.wpcf7-form input,.wpcf7-form textarea,
.wpforms-form input,.wpforms-form textarea,
.woocommerce input.input-text,.woocommerce textarea.input-text,
.comment-form input,.comment-form textarea{
  background:#fff !important;color:var(--pf-ink) !important;
  border:1px solid var(--pf-line) !important;border-radius:3px !important;
  font-family:'Poppins',sans-serif !important;
}
input:focus,textarea:focus,select:focus{border-color:var(--pf-red) !important;outline:none;box-shadow:0 0 0 2px rgba(198,3,21,.15);}
input::placeholder,textarea::placeholder{color:#999 !important;}

/* ---------- scroll reveal (JS adds .in; only active when JS ran) ---------- */
html.pf-reveal-on .pf-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
html.pf-reveal-on .pf-reveal.in{opacity:1;transform:none;}

::selection{background:var(--pf-red);color:#fff;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html.pf-reveal-on .pf-reveal{opacity:1 !important;transform:none !important;}
}

/* ============================================================
   HOMEPAGE PROFENCE HELPER CLASSES (self-contained, v4)
   Power the rebuilt homepage HTML written via REST. They do NOT
   depend on Elementor's structural CSS, so the layout is stable
   whether the page is served from post_content or re-rendered.
   ============================================================ */
.pf-hero{
  position:relative;
  background-color:var(--pf-dark);
  background-image:linear-gradient(rgba(21,24,23,.74),rgba(21,24,23,.74)),
                   url('https://hilinkworld.net/wp-content/uploads/2026/02/grating.jpg');
  background-size:cover;background-position:center center;
  color:#fff !important;text-align:center;
  padding:clamp(80px,12vw,170px) 24px;
}
.pf-hero .elementor-heading-title,
.pf-hero h1{color:#fff !important;font-size:clamp(32px,6vw,60px) !important;margin:0 0 .25em;line-height:1.1;}
.pf-hero-sub{font-size:clamp(15px,2vw,22px);color:#EDEDED !important;margin:0 0 30px;}
.pf-hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
/* hero CTAs = white outline (profence signature); skin JS skips these from forced-red */
.pf-hero .elementor-button,
.pf-hero .elementor-button-link{
  background:transparent !important;color:#fff !important;border:2px solid #fff !important;
}
.pf-hero .elementor-button:hover{
  background:#fff !important;color:var(--pf-dark) !important;border-color:#fff !important;
}
/* never let scroll-reveal hide the hero */
html.pf-reveal-on .pf-hero{opacity:1 !important;transform:none !important;}

/* content wrapper (replaces Elementor container for custom home) */
.pf-wrap{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,96px) 24px;}
.pf-section-title{text-align:center;margin:0 0 48px !important;}

/* product grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pf-card{
  display:block;background:#fff;border:1px solid var(--pf-line);border-radius:6px;overflow:hidden;
  color:var(--pf-ink);text-decoration:none;
  transition:transform .4s ease,box-shadow .4s ease;
}
.pf-card:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow);}
.pf-card img{width:100%;height:210px;object-fit:cover;display:block;}
.pf-card .elementor-heading-title,
.pf-card h3{color:var(--pf-head) !important;padding:16px 18px 22px;margin:0;font-size:20px !important;}

/* why-us feature cards */
.pf-feature{
  background:#fff;border:1px solid var(--pf-line);border-radius:6px;padding:30px;
  transition:transform .4s ease,box-shadow .4s ease;
}
.pf-feature:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow);}
.pf-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;background:var(--pf-red);color:#fff;
  font-size:24px;font-weight:700;margin-bottom:16px;line-height:1;
}
.pf-feature h4{margin:0 0 .35em;color:var(--pf-head) !important;font-size:18px !important;}
.pf-feature p{margin:0;color:var(--pf-ink);}

/* charcoal CTA band */
.pf-cta-band{text-align:center;background:var(--pf-dark) !important;color:#fff !important;padding:clamp(48px,7vw,96px) 24px;}
.pf-cta-band .elementor-heading-title,
.pf-cta-band h2{color:#fff !important;margin:0 0 26px !important;}

@media (max-width:900px){ .pf-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pf-grid{grid-template-columns:1fr;} }

/* ============================================================
   v7 GLOBAL ENFORCEMENT (一劳永逸)
   Apply the profence design language site-wide via the skin so
   EVERY page (existing + any newly added later) is consistent
   automatically — no per-page manual restyling required.
   ============================================================ */

/* ---------- FOOTER (profence = DARK #444444, WHITE text) ---------- */
/* profence.com.au footer is a dark charcoal-grey band with white text/headings/
   links. Override the Elementor footer (and any leftover white text) to match. */
.elementor-location-footer{background:#444444 !important;color:#fff !important;}
/* neutralise any white/coloured inner container baked into the footer
   template (e.g. the old blue-block container) so the dark band shows */
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner,
.elementor-location-footer .elementor-column,
.elementor-location-footer .elementor-widget-wrap,
.elementor-location-footer .elementor-widget{background:transparent !important;background-color:transparent !important;}
.elementor-location-footer *{color:#fff !important;}
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer h1,.elementor-location-footer h2,
.elementor-location-footer h3,.elementor-location-footer h4,
.elementor-location-footer h5{color:#fff !important;}
.elementor-location-footer a{color:#fff !important;}
.elementor-location-footer a:hover{color:var(--pf-yellow) !important;}
/* brand-red top edge keeps the profence identity */
.elementor-location-footer{border-top:3px solid var(--pf-red) !important;}
/* kill any remaining brand-blue social icons in the footer -> profence red */
.elementor-location-footer .elementor-social-icon{background-color:#C60315 !important;color:#fff !important;}
.elementor-location-footer .elementor-social-icon:hover{background-color:#a00210 !important;}

/* ---------- CONTENT TEXT (kill leftover Dark Luxe cream #EDE6D6) ----------
   The homepage _elementor_data still carries old Dark-Luxe cream text on
   light containers (#EDE6D6 ~ invisible on white). Force readable ink on
   text nodes; headings are handled by the HEADINGS block below. Dark bands
   keep white text. */
#content,.entry-content,.elementor-post__content,
.elementor-section,.e-con,.e-con-full,.e-flex,.e-con-inner,.elementor-column,
.elementor-widget-text-editor,.elementor-widget-icon-box,
.elementor-widget-theme-post-content,.elementor-text-editor{
  color:var(--pf-ink) !important;
}
.elementor-section p,.elementor-section span,.elementor-section li,
.elementor-section a:not(.elementor-button):not(.wp-block-button__link),
.e-con p,.e-con span,.e-con li,
.e-con-full p,.e-con-full span,.e-con-full li,
.e-flex p,.e-flex span,.e-flex li,
.elementor-column p,.elementor-column span,.elementor-column li,
.elementor-widget-text-editor,.elementor-widget-icon-box{
  color:var(--pf-ink) !important;
}
/* dark bands keep light text (placed AFTER so they win on equal specificity) */
.pf-hero,.pf-cta-band,.pf-dark{color:#fff !important;}
.pf-hero *,.pf-cta-band *,.pf-dark *{color:#fff !important;}
.pf-hero a,.pf-cta-band a,.pf-dark a{color:#fff !important;}

/* ---------- HEADINGS ----------
   Light backgrounds: profence uses #444444 (dark grey).
   Dark bands (.pf-hero/.pf-cta-band/.pf-dark): white.  */
#content h1,#content h2,#content h3,#content h4,#content h5,
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,
.elementor-section h1,.elementor-section h2,.elementor-section h3,.elementor-section h4,.elementor-section h5,
.e-con h1,.e-con h2,.e-con h3,.e-con h4,.e-con h5,
.e-con-full h1,.e-con-full h2,.e-con-full h3,.e-con-full h4,.e-con-full h5,
.elementor-widget-heading .elementor-heading-title{color:#444444 !important;}
/* prefixed with #content so (1,2,1)/(1,3,1) beats the generic
   '#content h1..h5{color:#444444 !important}' which is (1,1,1) */
#content .pf-hero .elementor-widget-heading .elementor-heading-title,
#content .pf-cta-band .elementor-widget-heading .elementor-heading-title,
#content .pf-dark .elementor-widget-heading .elementor-heading-title,
.entry-content .pf-hero .elementor-widget-heading .elementor-heading-title,
.entry-content .pf-cta-band .elementor-widget-heading .elementor-heading-title,
.entry-content .pf-dark .elementor-widget-heading .elementor-heading-title,
#content .pf-hero h1,#content .pf-hero h2,#content .pf-hero h3,#content .pf-hero h4,#content .pf-hero h5,
#content .pf-cta-band h1,#content .pf-cta-band h2,#content .pf-cta-band h3,#content .pf-cta-band h4,#content .pf-cta-band h5,
#content .pf-dark h1,#content .pf-dark h2,#content .pf-dark h3,#content .pf-dark h4,#content .pf-dark h5,
.entry-content .pf-hero h1,.entry-content .pf-hero h2,.entry-content .pf-hero h3,.entry-content .pf-hero h4,.entry-content .pf-hero h5,
.entry-content .pf-cta-band h1,.entry-content .pf-cta-band h2,.entry-content .pf-cta-band h3,.entry-content .pf-cta-band h4,.entry-content .pf-cta-band h5,
.entry-content .pf-dark h1,.entry-content .pf-dark h2,.entry-content .pf-dark h3,.entry-content .pf-dark h4,.entry-content .pf-dark h5{color:#fff !important;}

/* Global typography: Poppins + readable ink on every page */
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;color:#666 !important;}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',system-ui,sans-serif !important;}
.elementor-widget-heading .elementor-heading-title{color:#444444 !important;}
#content .pf-hero .elementor-heading-title,#content .pf-cta-band .elementor-heading-title,
.entry-content .pf-hero .elementor-heading-title,.entry-content .pf-cta-band .elementor-heading-title{color:#fff !important;}

/* Primary buttons = profence red everywhere (consistency for new pages) */
.elementor-button,.elementor-button-link,a.elementor-button,
.elementor-button.elementor-size-md{background-color:#C60315 !important;border-color:#C60315 !important;color:#fff !important;}
.elementor-button:hover{background-color:#a00210 !important;border-color:#a00210 !important;}
.pf-hero a,.pf-cta-band a{color:#fff !important;}

/* ============================================================
   MEGA MENU (profence-style hover panel with product images)
   Injected by assets/mega.js into the PRODUCTS nav item. Pure
   CSS hover reveal. Global -> works on every page automatically.
   ============================================================ */
.elementor-nav-menu li{position:relative;}
.pf-mega{
  position:absolute; top:100%; left:0;
  width:760px; max-width:92vw;
  background:#fff; border-top:3px solid #C60315;
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  padding:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease; z-index:9999;
}
.elementor-nav-menu li:hover > .pf-mega,
.elementor-nav-menu li:focus-within > .pf-mega{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* When a product category shows the image panel, suppress its plain-text
   dropdown so only the profence-style image grid appears on hover. */
.elementor-nav-menu li.pf-mega-owner > .sub-menu,
.elementor-nav-menu li.pf-mega-owner:hover > .sub-menu{display:none !important;}
.pf-mega a{display:block; text-align:center; text-decoration:none; color:#151817; padding:8px 6px; border-radius:6px;}
.pf-mega a:hover{background:#faf2f3;}
.pf-mega img{width:100%; height:120px; object-fit:contain; margin-bottom:8px; background:#f6f6f6; border-radius:4px;}
.pf-mega span{display:block; font-weight:600; font-size:14px;}
.pf-mega a:hover span{color:#C60315;}
@media (max-width:768px){ .pf-mega{position:static; width:100%; box-shadow:none; opacity:1; visibility:visible; transform:none; grid-template-columns:repeat(2,1fr);} }