/* WordPress integration styles for the Serflex theme (menus, logo, CF7, generic pages). */

/* Menus rendered by wp_nav_menu() */
.navlinks .nav-menu{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.navlinks .nav-menu li{margin:0;padding:0}
.navlinks .current-menu-item > a,.navlinks .current_page_item > a{color:var(--gold)}
.custom-logo-link{display:inline-flex}
.custom-logo-link img,.logo{width:105px;height:78px;object-fit:contain}
.site-name{color:var(--gold);font-weight:bold;font-size:22px;letter-spacing:1px}
.foot-links ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot-links li{margin:0}

/* Pieces that used inline styles in the static build */
.hero-download-wrap{margin:20px 0 0}
.hero-download{color:var(--gold);font-size:13px;text-decoration:underline;text-underline-offset:4px}
.hero-note{margin:24px 0 0}
.cap-intro,.muted{color:var(--gray)}
.cap-table-title{color:var(--gold);margin-top:40px}
.location-map{margin:0}
.location-map img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.location-map figcaption{font-size:12px;color:var(--gold);margin-top:10px}
.return-instructions > div p{font-size:13px;color:#afb6ac;margin:0 0 5px}
.return-instructions > div p:last-child{grid-column:auto}
.onshore p a{color:var(--gold)}
.facility .wp-caption,.facility p sub{font-size:.7em}

/* Accessibility */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;background:var(--gold);color:#111;padding:10px 14px}

/* Generic pages, posts, archives */
.page-head{border-bottom:1px solid var(--line);padding:70px 0 40px}
.page-head h1{margin:0}
.entry{padding:60px 0 85px}
.entry-content{max-width:860px}
.entry-content p,.entry-content li{color:#c9c9be}
.entry-content a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.entry-content h2,.entry-content h3{margin-top:1.6em}
.entry-content img{max-width:100%;height:auto}
.entry-thumb{margin-bottom:30px}
.alignleft{float:left;margin:0 24px 16px 0}.alignright{float:right;margin:0 0 16px 24px}.aligncenter{display:block;margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:12px;color:var(--gray)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.post-card{background:#101310;border:1px solid var(--line);padding:18px}
.post-card img{width:100%;height:200px;object-fit:cover;margin-bottom:16px}
.post-card .num{font-size:11px;color:var(--gold);letter-spacing:1px}
.post-card-title{font-size:22px;margin:10px 0}
.post-card p{color:var(--gray);font-size:14px}
.nav-links{display:flex;gap:16px;margin-top:35px}
.nav-links a,.nav-links span{color:var(--gold)}
.search-form{display:flex;gap:10px;margin-bottom:30px}
.search-form input[type=search]{background:#20211c;border:1px solid #47473d;color:#f7f5ee;padding:11px 12px;font:inherit}
.search-form input[type=submit]{background:var(--gold);border:1px solid var(--gold);color:#111;padding:11px 18px;font-weight:bold;cursor:pointer}

/* Contact Form 7 (styled like the design's .rfq panel) */
.request-form{margin-top:26px}
.sfx-form .wpcf7-form{display:grid;gap:16px}
.sfx-form label{display:grid;gap:6px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#cfcfc4;font-weight:bold}
.sfx-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance){width:100%;font:15px/1.4 Arial,Helvetica,sans-serif;color:#f7f5ee;background:#20211c;border:1px solid #47473d;padding:11px 12px;border-radius:0;letter-spacing:0;text-transform:none;font-weight:normal}
.sfx-form textarea.wpcf7-form-control{min-height:110px;resize:vertical}
.sfx-form .wpcf7-form-control:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sfx-form .wpcf7-submit{display:inline-flex;background:var(--gold);color:#111;border:1px solid var(--gold);padding:13px 22px;font-size:13px;font-weight:bold;cursor:pointer;justify-self:start}
.sfx-form .wpcf7-not-valid-tip{color:#f0a37a;font-size:12px;text-transform:none;letter-spacing:0;margin-top:4px}
.sfx-form .wpcf7-response-output{margin:0!important;padding:12px 14px!important;border:0!important;border-left:3px solid var(--gold)!important;background:#20211c;font-size:14px}
.sfx-form .wpcf7-spinner{background:var(--gold)}
.sfx-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media(max-width:1000px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
	.navlinks .nav-menu{flex-direction:column;align-items:flex-start;width:100%;gap:14px;margin-bottom:14px}
	.navlinks.open{flex-direction:column;align-items:flex-start}
	.custom-logo-link img,.logo{height:62px;width:85px}
	.post-grid,.sfx-form .row2{grid-template-columns:1fr}
	.page-head{padding:45px 0 30px}
}

/* WordPress prints width/height attributes on images; let CSS aspect-ratios win. */
main img{max-width:100%;height:auto}

/* Button hover states (text must stay readable on gold) */
.btn{transition:background-color .2s,color .2s,border-color .2s}
.btn:hover,.navlinks a.btn:hover,footer a.btn:hover{background:#f3d39b;border-color:#f3d39b;color:#111}
.btn.outline:hover,.navlinks a.btn.outline:hover{background:var(--gold);border-color:var(--gold);color:#111}
.cta .btn:hover{background:#000;border-color:#000;color:var(--gold)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.consult-link:hover,.hero-download:hover,.download-link:hover,.text-link:hover,.market .more:hover{text-decoration:underline;text-underline-offset:4px}

/* SVG arrow icons (replace emoji-prone unicode arrows on iOS) */
.sfx-icon{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;flex:none;stroke:currentColor}
.btn .sfx-icon{width:12px;height:12px;vertical-align:middle}
.consult-link .sfx-icon{margin-left:6px}

/* Mobile: every content image at full width and its full natural (100%) height – no cropping or letterboxing.
   --sfx-ar (printed by sfx_img) keeps the real ratio while lazy images load; this also cancels
   WordPress' sizes=auto rule (contain-intrinsic-size:3000px 1500px) that left huge blank boxes. */
@media(max-width:700px){
	main img,
	.hero-image img,.product img,.market-photo,.select img,.uhdi-layout>img,.split-media img,
	.facility img,.facility-grid>.plant img,.location-map img,.post-card img,.entry-content img{
		width:100%;height:auto!important;max-height:none!important;
		aspect-ratio:auto var(--sfx-ar,16 / 9)!important;contain-intrinsic-size:none!important;object-fit:contain
	}
	.facility-grid>.plant{max-width:none;width:100%;justify-self:stretch}
	.hero .hero-image{padding:0}
	.product img{margin-bottom:16px}
}