/*
Theme Name: Wrest Egypt Ship Services
Theme URI: https://Wrest-Eg.Net
Author: Wrest Development
Author URI: https://Wrest-Eg.Net
Description: A highly optimized, custom WordPress theme for Wrest Egypt Ship Services -- Maritime & Ship Chandlers B2B Agency operating across the Suez Canal and Egyptian Ports. Built with Tailwind CSS, ACF Pro (Pure PHP), and semantic HTML5 for maximum SEO performance and lead conversion.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wrest
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, theme-options, one-column, two-columns
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    height: auto;
    max-width: 100%;
}

a {
    text-decoration: none;
}

/* Custom Logo Styling */
.custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    max-height: 80px;
    width: auto;
    transition: transform 0.3s ease;
}

@media (min-width: 1024px) {
    .custom-logo {
        max-height: 100px;


    }
}

/* Safety Color Utilities (Fallback for Tailwind) */
.bg-safety-600 {
    background-color: #C2410C !important;
}

.hover\:bg-safety-700:hover {
    background-color: #9A3412 !important;
}

.text-safety-600 {
    color: #C2410C !important;
}

.bg-safety-100 {
    background-color: #FFEDD5 !important;
}

.custom-logo-link:hover .custom-logo {
    transform: scale(1.02);
}

.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;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.text-shadow-sm {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text-shadow-md {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3);
}

.drop-shadow-custom {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.bg-parallax {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .bg-parallax {
        background-attachment: scroll;
    }
}

.wp-block-image img {
    border-radius: 0.25rem;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: #94A3B8;
    text-align: center;
    margin-top: 0.5rem;
}

.gallery {
    display: grid;
    gap: 0.5rem;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.nav-links .page-numbers:not(.current):not(.dots) {
    background: #FFFFFF;
    color: #0B1B3D;
    border: 1px solid #E2E8F0;
}

.nav-links .page-numbers:not(.current):not(.dots):hover {
    background: #EA580C;
    color: #FFFFFF;
    border-color: #EA580C;
}

.nav-links .page-numbers.current {
    background: #0B1B3D;
    color: #FFFFFF;
    border: 1px solid #0B1B3D;
}

.nav-links .page-numbers.dots {
    color: #94A3B8;
}

.service-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.5rem 0.875rem;
    border: 1px solid #CBD5E1;
    border-radius: 0.25rem;
    background: #FFFFFF;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.service-filter:hover {
    border-color: #EA580C;
    color: #EA580C;
}

.service-filter.is-active {
    background: #0B1B3D;
    border-color: #0B1B3D;
    color: #FFFFFF;
}

.service-card.is-hidden {
    display: none;
}

.hero-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 10;
}

.hero-carousel .owl-nav button {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.25rem;
    backdrop-filter: blur(4px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-carousel .owl-nav button:hover {
    background: rgba(234, 88, 12, 0.8) !important;
    border-color: #EA580C !important;
}

.hero-carousel .owl-nav button span {
    display: none;
}

.owl-thumbs {
    display: flex;
}

.owl-thumb-item {
    opacity: 0.5;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}

.owl-thumb-item.active,
.owl-thumb-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08) !important;
}

.owl-thumb-item.active {
    border-bottom: 2px solid #EA580C;
}

@media (max-width: 768px) {
    .hero-carousel .owl-nav {
        display: none;
    }
}