/*
Theme Name: STEOIL Modern Gutenberg
Theme URI: https://audreyevan.com/steoil/modern/
Author: Audrey Evan / STEOIL
Description: Responsive Gutenberg-ready STEOIL theme. Page content is stored in WordPress Pages, not page-specific PHP templates.
Version: 2.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: steoil-modern
*/

:root{--red:#d5332a;--red-dark:#b8271f;--deep-navy:#0F2A4D;--dark-navy:#07111f;--steel-gray:#5F6B7A;--light-steel:#E6ECF2;--cool-slate:#3F4B57;--industrial-silver:#C9D3DD;--muted-blue:#4F78A6;--amber:#C77700;--off-white:#F7F9FC;--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--off-white);color:var(--deep-navy);overflow-x:hidden}a{text-decoration:none;color:inherit}.container{width:min(var(--max),calc(100% - 46px));margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid transparent;font-size:12px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}.btn-red{background:var(--red);color:#fff}.btn-dark{background:var(--deep-navy);color:#fff}.btn-light{background:#fff;color:var(--deep-navy);border-color:var(--industrial-silver)}.btn-outline{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.75);color:#fff}
.img-lab{background-image:linear-gradient(180deg,rgba(7,17,31,.05),rgba(7,17,31,.74)),url('assets/images/hero_pipette_lab.svg')}.img-cosmetic{background-image:linear-gradient(180deg,rgba(7,17,31,.05),rgba(7,17,31,.62)),url('assets/images/cosmetics.jpg')}.img-arena{background-image:linear-gradient(180deg,rgba(7,17,31,.16),rgba(7,17,31,.74)),url('assets/images/dust_control.jpg')}.img-arena1{background-image:linear-gradient(180deg,rgba(7,17,31,.16),rgba(7,17,31,.74)),url('https://mediumaquamarine-chamois-875779.hostingersite.com/wp-content/uploads/2026/10/arena_product.jpg')}.img-food{background-image:linear-gradient(180deg,rgba(7,17,31,.12),rgba(7,17,31,.72)),url('assets/images/food_processing.jpg')}.img-pharma{background-image:linear-gradient(180deg,rgba(7,17,31,.06),rgba(7,17,31,.68)),url('assets/images/pharmaceutical.jpg')}.img-industrial{background-image:linear-gradient(180deg,rgba(7,17,31,.10),rgba(7,17,31,.76)),url('assets/images/industrial.jpg')}.img-mineraloilpc{background-image:linear-gradient(180deg,rgba(7,17,31,.10),rgba(7,17,31,.76)),url('https://mediumaquamarine-chamois-875779.hostingersite.com/wp-content/uploads/2026/10/mineral_oil_submerged_pc.jpg')}.img-lapidary{background-image:linear-gradient(180deg,rgba(7,17,31,.10),rgba(7,17,31,.76)),url('https://mediumaquamarine-chamois-875779.hostingersite.com/wp-content/uploads/2026/10/mineral_oil_lapidary.jpg')}.img-ag{background-image:linear-gradient(180deg,rgba(7,17,31,.04),rgba(7,17,31,.66)),url('assets/images/agriculture.jpg')}.img-water{background-image:url('assets/images/product-food-grade.jpg')}.img-bubbles{background-image:url('assets/images/product-tech-grade.jpg')}.img-drums{background-image:url('assets/images/resource_drums_logistics.png')}.img-meeting{background-image:url('assets/images/resource_faq_meeting.png')}.img-sds{background-image:url('assets/images/resource_sds_lab.png')}.img-regulatory{background-image:url('assets/images/resource_regulatory_lab.png')}
header{position:fixed;left:0;right:0;top:0;z-index:80;color:#fff;background:rgba(7,17,31,.15);transition:.25s ease}header.scrolled,.subpage header{background:rgba(7,17,31,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}.nav{min-height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}.brand-logo{height:100px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}.menu{justify-self:center;display:flex;align-items:center;gap:24px;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.nav-actions{display:flex;gap:12px;align-items:center}.hamb{width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:32px}.mobile-menu{display:none;position:fixed;top:82px;left:18px;right:18px;z-index:99;background:rgba(7,17,31,.97);border:1px solid rgba(255,255,255,.14);padding:18px}.mobile-menu a{display:block;color:#fff;padding:13px 6px;text-transform:uppercase;font-size:13px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.1)}
.hero{position:relative;min-height:100vh;background:var(--dark-navy);overflow:hidden;color:#fff}.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .7s ease,transform 1.15s ease;display:flex;align-items:center;background-size:cover;background-position:center}.hero-slide.active{opacity:1;transform:scale(1);z-index:2}.hero-slide:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,.92),rgba(7,17,31,.55),rgba(7,17,31,.18));z-index:1}.hero-content{position:relative;z-index:3;width:min(760px,100%);padding-top:70px}.slide-count{position:absolute;z-index:6;right:clamp(24px,4vw,54px);top:50%;transform:translateY(-50%);display:grid;gap:22px;color:rgba(255,255,255,.48);font-size:17px;font-weight:800}.slide-count button{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}.slide-count button.active{color:var(--red)}.hero h1{margin:0 0 26px;font-family:"Roboto Condensed",Inter,sans-serif;font-size:clamp(54px,7vw,96px);line-height:.93;text-transform:uppercase;color:#fff}.hero p{margin:0;max-width:590px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.86)}.red-line{width:78px;height:4px;background:var(--red);margin:26px 0}.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}.hero-data{position:absolute;z-index:5;right:clamp(24px,5vw,70px);bottom:95px;width:min(420px,calc(100% - 48px));display:grid;gap:10px}.data-card{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;padding:16px 18px;background:rgba(7,17,31,.45);border:1px solid rgba(201,211,221,.22);backdrop-filter:blur(16px)}.data-card b{color:#fff;font-size:24px}.data-card span{color:rgba(255,255,255,.72);font-size:13px;line-height:1.45}
.applications{background:linear-gradient(180deg,var(--deep-navy),var(--steel-gray));color:#fff;text-align:center;padding:36px 0 0}.section-kicker{color:var(--red);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}.applications h2{margin:0 0 26px;font-size:30px;text-transform:uppercase}.app-grid{display:grid;grid-template-columns:repeat(6,1fr);min-height:410px}.app-tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:26px 18px;color:#fff;transition:.3s ease;border-right:1px solid rgba(255,255,255,.12);background-size:cover;background-position:center}.app-tile:hover{transform:translateY(-10px)}.app-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(7,17,31,.75));z-index:1}.app-content{position:relative;z-index:3}.app-icon{font-size:42px;line-height:1;margin-bottom:18px}.app-tile strong{display:block;text-transform:uppercase;font-weight:900;font-size:15px;line-height:1.25}.app-tile span{display:block;margin-top:8px;color:rgba(255,255,255,.72);font-size:12px;line-height:1.4;max-width:190px}
.products{background:var(--light-steel);padding:90px 0;color:var(--deep-navy)}.product-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}.eyebrow,.product-copy b{color:var(--red);font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:900}.section-title,.product-copy h2{margin:14px 0 18px;color:var(--deep-navy);font-size:42px;line-height:1.05;text-transform:uppercase}.product-copy p{color:var(--cool-slate);line-height:1.7;font-size:17px;margin:0 0 28px}.product-cards{display:grid;grid-template-columns:1fr 1fr;gap:36px}.product-card,.tile-card,.blog-card,.content-card{background:#fff;box-shadow:0 22px 50px rgba(15,42,77,.08);border:1px solid rgba(201,211,221,.7);overflow:hidden}.product-img,.tile-img{height:210px;background-size:cover;background-position:center}.product-body,.tile-body{padding:26px}.product-body h3,.tile-body h3{margin:0 0 10px;text-transform:uppercase;font-size:23px;line-height:1.1;color:var(--deep-navy)}.product-body p,.tile-body p{margin:0;color:var(--cool-slate);line-height:1.6}.arrow-link{display:inline-flex;margin-top:18px;color:var(--red);font-weight:900;font-size:22px}.grade-note{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border:1px solid var(--industrial-silver);background:#fff}.grade-note div{padding:16px;border-right:1px solid var(--industrial-silver)}.grade-note div:last-child{border-right:0}.grade-note strong{display:block;color:var(--deep-navy)}
.trust-strip{background:linear-gradient(90deg,var(--deep-navy),var(--muted-blue));color:#fff;padding:30px 0}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.trust-item{display:grid;grid-template-columns:50px 1fr;gap:18px;align-items:center;padding:0 28px;border-right:1px solid rgba(255,255,255,.18)}.trust-icon{font-size:34px;color:var(--industrial-silver)}.trust-item strong{display:block;text-transform:uppercase;font-size:13px;margin-bottom:5px}.trust-item span{display:block;color:rgba(255,255,255,.76);font-size:13px;line-height:1.45}
.resources{background:var(--industrial-silver);padding:58px 0 70px;color:var(--deep-navy)}.resource-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.resource-head b{color:var(--red);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.resource-track-wrap{overflow:hidden}.resource-track{display:flex;gap:24px;transition:.35s ease}.resource-card{min-width:305px;background:#fff;border:1px solid rgba(201,211,221,.8);box-shadow:0 14px 34px rgba(15,42,77,.06);display:grid;grid-template-columns:108px 1fr;overflow:hidden}.resource-img{min-height:132px;background-size:cover;background-position:center}.resource-info{padding:20px}.resource-info h3{margin:0 0 7px;font-size:13px;text-transform:uppercase}.resource-info p{margin:0;font-size:12px;line-height:1.45;color:var(--cool-slate)}.resource-info a{display:inline-flex;margin-top:12px;color:var(--red);font-size:20px;font-weight:900}.resource-arrows button{width:42px;height:42px;border:0;background:transparent;color:var(--deep-navy);font-size:34px;cursor:pointer}
.bottom-cta{position:relative;min-height:360px;background:linear-gradient(180deg,rgba(79,120,166,.25),rgba(7,17,31,.9)),url('assets/images/solution_bg.jpg');background-size:cover;background-position:center;display:grid;place-items:center;text-align:center;color:#fff;padding:60px 0}.bottom-cta h2{margin:0 0 10px;font-size:34px;text-transform:uppercase}.bottom-cta p{margin:0 0 24px;color:rgba(255,255,255,.78)}
.page-hero{/*padding:150px 0 70px;*/color:#fff;background:linear-gradient(90deg,rgba(7,17,31,.93),rgba(15,42,77,.82));background-size:cover;background-position:center}.page-hero h1{font-family:"Roboto Condensed";font-size:clamp(46px,6vw,78px);line-height:.95;text-transform:uppercase;margin:12px 0}.page-hero p{font-size:18px;line-height:1.65;max-width:760px;color:rgba(255,255,255,.82)}.page-main{padding:30px 0 30px}.content-grid{display:grid;grid-template-columns:1fr 230px;gap:30px}.content-card{padding:34px}.content-card h2{font-size:30px;color:var(--deep-navy);margin:0 0 14px;text-transform:uppercase}.content-card h3{font-size:22px;color:var(--deep-navy);margin:26px 0 10px}.content-card p,.content-card li{color:var(--cool-slate);line-height:1.75;font-size:16px}.side-card{background:var(--deep-navy);color:#fff;padding:26px;position:sticky;top:110px}.side-card p{color:rgba(255,255,255,.72);line-height:1.6}.side-card a{margin-top:12px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.blog-card{padding:24px}.blog-card small{color:var(--muted-blue);font-weight:800}.blog-card h3{color:var(--deep-navy)}.blog-card p{color:var(--cool-slate);line-height:1.6}.doc-list{display:grid;gap:12px}.doc-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--industrial-silver);background:#fff}.doc-row strong{color:var(--deep-navy)}.doc-row span{color:var(--cool-slate);font-size:14px}
footer{padding:28px 0;background:#07111f;color:rgba(255,255,255,.55);font-size:12px}footer .container{display:flex;justify-content:space-between;gap:20px}
@media(max-width:1100px){.menu{display:none}.app-grid{grid-template-columns:repeat(3,1fr)}.product-layout,.content-grid{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr 1fr;gap:20px}.slide-count,.hero-data{display:none}.card-grid,.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.container{width:min(var(--max),calc(100% - 28px))}.brand-logo{height:52px}.hero h1{font-size:46px}.hero-content{padding-top:100px}.app-grid,.product-cards,.grade-note,.trust-grid,.card-grid,.blog-grid{grid-template-columns:1fr}.app-tile{min-height:300px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.resource-card{min-width:260px}footer .container{flex-direction:column}.hero-actions{flex-direction:column;align-items:flex-start}}


/* =========================================================
   STEOIL EXPANDED BRAND SYSTEM — STRONGER SECONDARY COLOR USE
   ========================================================= */

body{
  background:
    linear-gradient(180deg, var(--off-white) 0%, var(--light-steel) 52%, var(--off-white) 100%);
}

/* Light Steel becomes the dominant product/detail canvas */
.products,
.page-main{
  background:
    linear-gradient(180deg, var(--light-steel) 0%, var(--off-white) 42%, var(--light-steel) 100%);
}

/* Steel Gray / Muted Blue drive section depth */
.applications{
  background:
    linear-gradient(135deg, var(--deep-navy) 0%, var(--steel-gray) 58%, var(--muted-blue) 100%) !important;
}

/* Industrial Silver becomes a true structural section color */
.resources{
  background:
    linear-gradient(180deg, var(--industrial-silver) 0%, var(--light-steel) 100%) !important;
}

/* Muted Blue strengthens interaction / authority areas */
.trust-strip{
  background:
    linear-gradient(90deg, var(--deep-navy) 0%, var(--muted-blue) 58%, var(--steel-gray) 100%) !important;
}

/* Content cards use the palette in a more visible way */
.content-card,
.product-card,
.tile-card,
.blog-card{
  border-color: var(--industrial-silver) !important;
  box-shadow: 0 18px 44px rgba(15,42,77,.10) !important;
}

.content-card h2,
.content-card h3,
.product-body h3,
.tile-body h3,
.blog-card h3{
  color: var(--deep-navy) !important;
}

.content-card{
  border-top: 6px solid var(--muted-blue) !important;
}

.blog-card:nth-child(3n+1),
.tile-card:nth-child(3n+1){
  border-top: 6px solid var(--muted-blue) !important;
}
.blog-card:nth-child(3n+2),
.tile-card:nth-child(3n+2){
  border-top: 6px solid var(--steel-gray) !important;
}
.blog-card:nth-child(3n+3),
.tile-card:nth-child(3n+3){
  border-top: 6px solid var(--industrial-silver) !important;
}

/* Utility colors reserved for signals, not broad branding */
.grade-note div:nth-child(1){
  border-top: 4px solid var(--muted-blue);
}
.grade-note div:nth-child(2){
  border-top: 4px solid var(--amber);
}
.grade-note div:nth-child(3){
  border-top: 4px solid var(--safety-green);
}

/* Sidebars now show the expanded system */
.side-card{
  background:
    linear-gradient(180deg, var(--deep-navy) 0%, var(--cool-slate) 100%) !important;
  border-left: 6px solid var(--muted-blue);
}

/* Page heroes use secondary brand depth */
.page-hero{
  background:
    linear-gradient(90deg, rgba(15,42,77,.96) 0%, rgba(63,75,87,.86) 48%, rgba(79,120,166,.62) 100%);
  background-size: cover !important;
  background-position: center !important;
}

/* =========================================================
   FULL FOOTER SYSTEM
   ========================================================= */

footer{
  background: var(--dark-navy) !important;
  color: rgba(255,255,255,.74) !important;
  padding: 0 !important;
  font-size: 14px !important;
}

.site-footer{
  background:
    linear-gradient(180deg, var(--deep-navy) 0%, var(--dark-navy) 100%);
  color: rgba(255,255,255,.76);
}

.footer-main{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap:42px;
  padding:58px 0 46px;
  border-bottom:1px solid rgba(201,211,221,.16);
}

.footer-logo{
  max-width:180px;
  margin-bottom:18px;
}

.footer-about p{
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.7;
  max-width:360px;
}

.footer-col h4{
  margin:0 0 16px;
  color:#fff;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
}

.footer-col a,
.footer-col span{
  display:block;
  color:rgba(255,255,255,.66);
  margin:0 0 10px;
  line-height:1.45;
}

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

.footer-accent{
  height:6px;
  display:grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
}

.footer-accent div:nth-child(1){background:var(--red);}
.footer-accent div:nth-child(2){background:var(--muted-blue);}
.footer-accent div:nth-child(3){background:var(--industrial-silver);}
.footer-accent div:nth-child(4){background:var(--amber);}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  color:rgba(255,255,255,.52);
  font-size:12px;
}

@media(max-width:900px){
  .footer-main{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .footer-main{
    grid-template-columns:1fr;
  }
  .footer-bottom{
    flex-direction:column;
  }
}



/* WordPress and Gutenberg integration */
.menu .menu-list,.mobile-menu .menu-list{list-style:none;margin:0;padding:0}
.menu .menu-list{display:flex;align-items:center;gap:24px}
.mobile-menu .menu-list li{display:block}
.custom-logo{height:100px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.alignwide{width:min(var(--max),calc(100% - 46px));margin-left:auto;margin-right:auto}.alignfull{width:100%}
.wp-caption,.wp-caption img,.entry-content img{max-width:100%;height:auto}
.admin-bar header{top:32px}.admin-bar .mobile-menu{top:114px}
/*.home .hero,.home .hero-slider,.home .hero-slide,.home .carousel-item{background-image:url('assets/images/hero_image.jpg')!important;background-size:cover;background-position:center;background-repeat:no-repeat}*/
/* Homepage hero background */
.home .hero {
    background-color: var(--dark-navy);
}
.widget{margin:0}.widget-title{color:#fff}.side-card .wp-block-button__link{background:var(--red);border-radius:0;color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;padding:15px 20px}
.side-card .wp-block-button{display:block;margin-top:12px}.side-card .wp-block-button__link{display:block}
.footer-col .widget,.footer-about .widget{margin:0}.footer-col ul{list-style:none;padding:0;margin:0}
.entry-content>p,.entry-content>h1,.entry-content>h2,.entry-content>h3,.entry-content>ul,.entry-content>ol{width:min(var(--max),calc(100% - 46px));margin-left:auto;margin-right:auto}
@media(max-width:1100px){.menu{display:none}}
@media(max-width:782px){.admin-bar header{top:46px}.admin-bar .mobile-menu{top:128px}}
@media(max-width:760px){.custom-logo{height:52px}}


/* =====================================================
   STE OIL BLOG PAGE
   Hero, blog listing, featured images and pagination
===================================================== */

/* Prevent padding from increasing element widths */
.blog-archive,
.blog-archive * {
    box-sizing: border-box;
}

/* =====================================================
   1. BLOG HERO SECTION
===================================================== */

.blog-hero {
    position: relative;
    width: 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    padding: 65px 25px;
    overflow: hidden;
    background: linear-gradient(
        110deg,
        #102f46 0%,
        #174b68 60%,
        #087c9e 100%
    );
    color: #ffffff;
}

.blog-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-hero h1 {
    margin: 0 0 18px;
    padding: 0;
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.blog-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
}

/* =====================================================
   2. BLOG CONTENT SECTION
===================================================== */

.blog-archive {
    width: 100%;
    padding: 65px 25px 75px;
    background: #ffffff;
}

.blog-archive > .container {
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* Introduction */

.blog-archive .ste-packaging-intro {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
}

.blog-archive .ste-packaging-intro h2 {
    margin: 0 0 15px;
    color: #18364d;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
}

.blog-archive .ste-packaging-intro p {
    margin: 0;
    color: #5d6b76;
    font-size: 16px;
    line-height: 1.8;
}

/* =====================================================
   3. BLOG GRID
===================================================== */

.blog-archive .blog-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    width: 100%;
}

/* =====================================================
   4. BLOG CARD
===================================================== */

.blog-archive .blog-post-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 25px;
    border: 1px solid #e2e8ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(16, 47, 70, 0.05);
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.blog-archive .blog-post-card:hover {
    transform: translateY(-3px);
    border-color: #c7d8e3;
    box-shadow: 0 10px 28px rgba(16, 47, 70, 0.10);
}

/* Number and image row */

.blog-archive .blog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

/* Number badge */

.blog-archive .ste-number {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf3f7;
    color: #18364d;
    font-size: 14px;
    font-weight: 700;
}

/* =====================================================
   5. FEATURED IMAGE — 100 x 100
===================================================== */

.blog-archive .blog-featured-image {
    display: block;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
    background: #f0f3f5;
    text-decoration: none;
}

.blog-archive .blog-thumb {
    display: block;
    width: 100px !important;
    min-width: 100px;
    max-width: none !important;
    height: 100px !important;
    min-height: 100px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.blog-archive .blog-featured-image:hover .blog-thumb {
    transform: scale(1.06);
}

/* Missing featured image */

.blog-archive .blog-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #edf2f5;
    color: #687985;
    font-size: 12px;
    text-align: center;
}

/* =====================================================
   6. BLOG TITLE
===================================================== */

.blog-archive .blog-post-card h3 {
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    color: #18364d;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.45;
}

.blog-archive .blog-post-card h3 a {
    color: #18364d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-archive .blog-post-card h3 a:hover {
    color: #087c9e;
}

/* =====================================================
   7. POST DATE
===================================================== */

.blog-archive .blog-date {
    width: 100%;
    margin: 0 0 12px;
    color: #7a8791;
    font-size: 13px;
    line-height: 1.6;
}

/* =====================================================
   8. POST EXCERPT
===================================================== */

.blog-archive .blog-excerpt {
    width: 100%;
    margin: 0 0 18px;
    color: #566570;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

/* =====================================================
   9. READ ARTICLE LINK
===================================================== */

.blog-archive .ste-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 5px;
    color: #087c9e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-archive .ste-link:hover {
    color: #18364d;
    text-decoration: underline;
}

/* =====================================================
   10. PAGINATION
===================================================== */

.blog-archive .blog-pagination {
    display: block;
    width: 100%;
    margin: 50px 0 0;
    text-align: center;
}

.blog-archive .blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-archive .blog-pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-archive .blog-pagination a,
.blog-archive .blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid #dce5eb;
    border-radius: 4px;
    background: #ffffff;
    color: #18364d;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.blog-archive .blog-pagination a:hover,
.blog-archive .blog-pagination .current {
    border-color: #18364d;
    background: #18364d;
    color: #ffffff;
}

.blog-archive .blog-pagination .dots {
    border-color: transparent;
    background: transparent;
    color: #687985;
}

/* =====================================================
   11. NO POSTS MESSAGE
===================================================== */

.blog-archive .blog-no-posts {
    padding: 40px 20px;
    border: 1px solid #e2e8ed;
    border-radius: 6px;
    background: #f8fafb;
    text-align: center;
}

.blog-archive .blog-no-posts h2 {
    margin: 0 0 12px;
    color: #18364d;
}

.blog-archive .blog-no-posts p {
    margin: 0;
    color: #5d6b76;
}

/* =====================================================
   12. TABLET
===================================================== */

@media (max-width: 1024px) {

    .blog-archive .blog-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .blog-hero {
        min-height: 230px;
        padding: 55px 25px;
    }

    .blog-hero h1 {
        font-size: 38px;
    }

    .blog-archive {
        padding: 50px 25px 60px;
    }

}

/* =====================================================
   13. MOBILE
===================================================== */

@media (max-width: 600px) {

    .blog-hero {
        min-height: 190px;
        padding: 40px 20px;
    }

    .blog-hero h1 {
        margin-bottom: 12px;
        font-size: 30px;
    }

    .blog-hero p {
        font-size: 15px;
        line-height: 1.7;
    }

    .blog-archive {
        padding: 35px 18px 45px;
    }

    .blog-archive .ste-packaging-intro {
        margin-bottom: 28px;
        text-align: left;
    }

    .blog-archive .ste-packaging-intro h2 {
        font-size: 26px;
    }

    .blog-archive .ste-packaging-intro p {
        font-size: 14px;
    }

    .blog-archive .blog-post-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .blog-archive .blog-post-card {
        padding: 20px;
    }

    .blog-archive .blog-post-card h3 {
        font-size: 19px;
    }

    .blog-archive .blog-excerpt {
        font-size: 14px;
        line-height: 1.7;
    }

    .blog-archive .blog-pagination {
        margin-top: 32px;
    }

    .blog-archive .blog-pagination ul {
        gap: 5px;
    }

    .blog-archive .blog-pagination a,
    .blog-archive .blog-pagination span {
        min-width: 35px;
        min-height: 35px;
        padding: 7px 9px;
        font-size: 12px;
    }

}



/* MOBILE NAVIGATION FIX */

.hamb {
    display: none;
    cursor: pointer;
    position: relative;
    z-index: 102;
    padding: 0;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 101;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    background: rgba(7, 17, 31, .98);
    padding: 18px 24px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu .menu-list {
    display: block;
}

.mobile-menu .menu-list li {
    display: block;
}

.mobile-menu .menu-list a,
.mobile-menu > a {
    display: block;
    padding: 15px 6px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 1100px) {
    .menu {
        display: none !important;
    }

    .hamb {
        display: block;
    }
}

@media (max-width: 782px) {
    .admin-bar .mobile-menu {
        top: 128px;
        max-height: calc(100vh - 128px);
    }
}

@media (max-width: 760px) {
    .mobile-menu {
        top: 82px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 82px);
    }
}



/* MOBILE ACCORDION MENU */

.mobile-menu .menu-list,
.mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu .menu-item {
    position: relative;
}

.mobile-menu .menu-item-has-children > a {
    padding-right: 45px;
}

/* Submenu hidden by default */
.mobile-menu .sub-menu {
    display: none;
    position: static;
    margin-left: 15px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.2);
    background: transparent;
    box-shadow: none;
}

/* Show only active submenu */
.mobile-menu .menu-item-has-children.submenu-open > .sub-menu {
    display: block;
}

/* Arrow button */
.mobile-menu .submenu-toggle {
    position: absolute;
    top: 3px;
    right: 0;
    width: 42px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 2;
}

/* Down arrow by default */
.mobile-menu .submenu-toggle::before {
    content: "⌄";
}

/* Right arrow when open */
.mobile-menu .menu-item-has-children.submenu-open > .submenu-toggle::before {
    content: "›";
}

.mobile-menu .sub-menu a {
    font-size: 12px;
    padding: 12px 8px;
    color: rgba(255,255,255,.78);
}

/* Hide arrows on desktop */
@media (min-width: 1101px) {
    .mobile-menu .submenu-toggle {
        display: none;
    }
}



/* =====================================
   STEOIL HEADER ALIGNMENT
===================================== */

#header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 100px;
}

/* LOGO */
#header .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#header .brand-logo,
#header .custom-logo {
    height: 105px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

/* RIGHT NAVIGATION */
#header .menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

#header .menu .menu-list {
    display: flex;
    align-items: center;
    gap: 22px;
}

#header .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* SHOP NOW */
#header .nav-actions .btn-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
}

/* HAMBURGER */
#header .hamb {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
}

/* TABLET AND MOBILE */
@media (max-width: 1100px) {

    #header .nav {
        min-height: 85px;
        gap: 15px;
    }

    #header .menu {
        display: none !important;
    }

    #header .brand-logo,
    #header .custom-logo {
        height: 75px;
        max-width: 220px;
    }

    #header .nav-actions {
        margin-left: auto;
        gap: 12px;
    }

    #header .nav-actions .btn-red {
        display: inline-flex;
    }

    #header .hamb {
        display: inline-flex;
    }

}

/* SMALL MOBILE */
@media (max-width: 480px) {

    #header .nav {
        min-height: 76px;
    }

    #header .brand-logo,
    #header .custom-logo {
        height: 62px;
        max-width: 185px;
    }

    #header .nav-actions {
        gap: 8px;
    }

    #header .nav-actions .btn-red {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
    }

    #header .hamb {
        width: 38px;
        height: 42px;
        font-size: 28px;
    }

}

/* LARGE DESKTOP */
@media (min-width: 1101px) {

    #header .hamb {
        display: none;
    }

}