/**
 * arshipping/modern.css
 * Non-destructive modernization layer — loaded LAST so cascade overrides legacy.
 */

/* ---------- 0. Web fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* ---------- 1. CSS custom properties ---------- */
:root {
  --ar-navy:        #0d2c54;
  --ar-navy-2:      #143a6b;
  --ar-navy-deep:   #081d3a;
  --ar-gold:        #c9a14a;
  --ar-gold-soft:   #e6c97a;
  --ar-gray-50:     #f6f8fb;
  --ar-gray-100:    #eef2f7;
  --ar-gray-200:    #d9e0ea;
  --ar-gray-500:    #6b7a90;
  --ar-gray-700:    #2f3b50;
  --ar-text:        #213149;
  --ar-white:       #ffffff;
  --ar-shadow-sm:   0 2px 6px rgba(13,44,84,.08);
  --ar-shadow-md:   0 8px 24px rgba(13,44,84,.12);
  --ar-shadow-lg:   0 18px 40px rgba(13,44,84,.18);
  --ar-radius:      10px;
  --ar-radius-sm:   6px;
  --ar-trans:       .25s cubic-bezier(.4,.0,.2,1);
  --ar-trans-slow:  .45s cubic-bezier(.4,.0,.2,1);
  --ar-font-sans:   'Inter', 'Titillium-Rg', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ar-font-ar:     'Cairo', 'Arabic', 'Tahoma', sans-serif;
}

/* ---------- 2. Typography ---------- */
body, body p, body li, body td {
  font-family: var(--ar-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-footer, .site-footer p, .site-footer li, .site-footer td, .site-footer span, .site-footer a, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer div { font-family: var(--ar-font-sans); }
/* Do NOT override font-family on FontAwesome icon elements */
main, main p, main li, main td { color: var(--ar-text); }
html:lang(ar) body, html:lang(ar) body p, html:lang(ar) body li, html:lang(ar) body td {
  font-family: var(--ar-font-ar);
}
h1, h2, h3, h4, h5 {
  font-family: var(--ar-font-sans);
  font-weight: 700;
  letter-spacing: -.01em;
}
main h1, main h2, main h3, main h4, main h5 { color: var(--ar-navy-deep); }
/* Sections with dark backgrounds: keep headings white */
.block-views-blocktestimonials-view-block-1 h1,
.block-views-blocktestimonials-view-block-1 h2,
.block-views-blocktestimonials-view-block-1 h3,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--ar-white) !important; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) h4, html:lang(ar) h5 {
  font-family: var(--ar-font-ar);
  letter-spacing: 0;
}

/* ---------- 3. Buttons ---------- */
.button, .form-submit, button.button--primary, input.button--primary {
  background: linear-gradient(135deg, var(--ar-navy) 0%, var(--ar-navy-2) 100%);
  color: var(--ar-white) !important;
  border: 0;
  border-radius: var(--ar-radius-sm);
  padding: 12px 26px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: var(--ar-shadow-sm);
  transition: transform var(--ar-trans), box-shadow var(--ar-trans), background var(--ar-trans);
  cursor: pointer;
}
.button:hover, .form-submit:hover, button.button--primary:hover, input.button--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ar-shadow-md);
  background: linear-gradient(135deg, var(--ar-navy-2) 0%, var(--ar-gold) 140%);
}
.button:focus-visible, .form-submit:focus-visible {
  outline: 3px solid var(--ar-gold-soft);
  outline-offset: 2px;
}

/* ---------- 4. Forms ---------- */
.form-text, .form-email, .form-textarea, .form-select, .form-autocomplete,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select {
  border: 1.5px solid var(--ar-gray-200);
  border-radius: var(--ar-radius-sm);
  padding: 11px 14px;
  font: inherit;
  background: var(--ar-white);
  color: var(--ar-text);
  transition: border-color var(--ar-trans), box-shadow var(--ar-trans);
}
.form-text:focus, .form-email:focus, .form-textarea:focus, .form-select:focus, .form-autocomplete:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ar-navy);
  box-shadow: 0 0 0 4px rgba(13,44,84,.12);
}
.js-form-item.error input, .js-form-item.error textarea, input.error, textarea.error {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 4px rgba(192,57,43,.10);
}
label, .form-required { font-weight: 600; color: var(--ar-gray-700); }

/* ---------- 5. Service / company / port cards ---------- */
.block-views-blockhomepage-shipping-services-carousel-block-1 .slick__slide,
.block-views-blocklogistics-services-carousel-block-1 .slick__slide,
.view-id-subsidiary_companies .views-row,
.view-id-port_information .slick__slide {
  border-radius: var(--ar-radius);
  overflow: hidden;
  background: var(--ar-white);
  box-shadow: var(--ar-shadow-sm);
  transition: transform var(--ar-trans), box-shadow var(--ar-trans);
  margin: 10px;
}
.block-views-blockhomepage-shipping-services-carousel-block-1 .slick__slide:hover,
.block-views-blocklogistics-services-carousel-block-1 .slick__slide:hover,
.view-id-subsidiary_companies .views-row:hover,
.view-id-port_information .slick__slide:hover {
  transform: translateY(-6px);
  box-shadow: var(--ar-shadow-lg);
}
.block-views-blockhomepage-shipping-services-carousel-block-1 .slick__slide img,
.block-views-blocklogistics-services-carousel-block-1 .slick__slide img,
.view-id-port_information .slick__slide img {
  transition: transform var(--ar-trans-slow);
  display: block;
  width: 100%;
  height: auto;
}
.block-views-blockhomepage-shipping-services-carousel-block-1 .slick__slide:hover img,
.block-views-blocklogistics-services-carousel-block-1 .slick__slide:hover img,
.view-id-port_information .slick__slide:hover img {
  transform: scale(1.06);
}

/* ---------- 6. Slick arrows + dots ---------- */
.slick-prev, .slick-next {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.92) !important;
  border-radius: 50%;
  box-shadow: var(--ar-shadow-md);
  z-index: 5;
  transition: background var(--ar-trans), transform var(--ar-trans);
}
.slick-prev:hover, .slick-next:hover {
  background: var(--ar-navy) !important;
  transform: scale(1.08);
}
.slick-prev:before, .slick-next:before {
  color: var(--ar-navy) !important;
  font-size: 22px !important;
  opacity: 1 !important;
  transition: color var(--ar-trans);
}
.slick-prev:hover:before, .slick-next:hover:before { color: var(--ar-gold) !important; }
.slick-dots li button:before {
  font-size: 12px !important;
  color: var(--ar-gray-200) !important;
  opacity: 1 !important;
  transition: color var(--ar-trans), transform var(--ar-trans);
}
.slick-dots li.slick-active button:before { color: var(--ar-gold) !important; transform: scale(1.3); }

/* ---------- 7. Testimonials ---------- */
.testimonial-wrapper {
  background: var(--ar-white);
  border-radius: var(--ar-radius);
  padding: 28px 26px 24px;
  box-shadow: var(--ar-shadow-sm);
  position: relative;
  margin: 14px 12px;
  transition: box-shadow var(--ar-trans), transform var(--ar-trans);
}
.testimonial-wrapper:hover { box-shadow: var(--ar-shadow-md); transform: translateY(-3px); }
.testimonial-wrapper:before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 18px;
  font-size: 80px; line-height: 1;
  color: var(--ar-gold);
  font-family: Georgia, serif;
  opacity: .35;
}
.testimonial-body { color: var(--ar-gray-700); font-style: italic; }
.testimonial-name  { color: var(--ar-navy); font-weight: 700; margin-top: 12px; }
.testimonial-title, .testimonial-company { color: var(--ar-gray-500); font-size: .92em; }

/* ---------- 8. Header / nav (sticky removed) ---------- */
.region-primary-menu .menu .menu-item > a,
.region-secondary-menu .menu .menu-item > a {
  font-weight: 500;
  color: var(--ar-navy-deep);
  transition: color var(--ar-trans);
  white-space: nowrap;
}
#header .section .region-header nav.menu--main .content > ul.menu > li > a {
  font-weight: 500;
  color: var(--ar-navy-deep);
  transition: color var(--ar-trans);
  white-space: nowrap;
}
.region-primary-menu .menu .menu-item > a:hover,
.region-secondary-menu .menu .menu-item > a:hover,
#header .section .region-header nav.menu--main .content > ul.menu > li > a:hover {
  color: var(--ar-gold);
}

/* Logo / site branding — don't clip the tagline */
#block-arshipping-branding,
.site-branding,
.site-branding img,
.site-branding a {
  max-width: none !important;
  overflow: visible !important;
}
#block-arshipping-branding img { width: auto; height: auto; max-width: 100%; }

@media (max-width: 991px) {
  .menu-toggle, .menu-toggle-target {
    background: var(--ar-navy) !important;
    color: var(--ar-white) !important;
    border-radius: var(--ar-radius-sm);
    padding: 10px 14px;
    transition: background var(--ar-trans);
  }
  .menu-toggle:hover { background: var(--ar-gold) !important; }
}

/* ---------- 9. Hero overlay (removed - was covering content) ---------- */

/* ---------- 10. Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--ar-navy-deep) 0%, #050f24 100%);
  color: #d8e1ef;
  padding-top: 56px;
}
.site-footer,
.site-footer p,
.site-footer li,
.site-footer td,
.site-footer span,
.site-footer div { color: #d8e1ef; }
.site-footer a { color: var(--ar-gold-soft); transition: color var(--ar-trans); }
.site-footer a:hover { color: var(--ar-white); text-decoration: none; }
.site-footer h2,
.site-footer h3,
.site-footer .block-title {
  color: var(--ar-white);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.site-footer__bottom {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: .9em;
  text-align: center;
  color: #aebcd4;
}
.site-footer__bottom * { color: #aebcd4; }

/* ---------- 10b. Footer social icons (visible on dark bg) ---------- */
footer.site-footer .layout-container .site-footer__top .region .social-icons,
.site-footer .social-icons {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
footer.site-footer .layout-container .site-footer__top .region .social-icons a,
.site-footer .social-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: var(--ar-white) !important;
  border: 1px solid rgba(255,255,255,.22);
  transition: background var(--ar-trans), color var(--ar-trans), transform var(--ar-trans);
  text-decoration: none;
}
footer.site-footer .layout-container .site-footer__top .region .social-icons a:hover,
.site-footer .social-icons a:hover {
  background: var(--ar-gold) !important;
  color: var(--ar-navy-deep) !important;
  transform: translateY(-2px);
}
/* Force FontAwesome font on icons (was killed by .site-footer * font-family: inherit) */
.site-footer .social-icons i,
.site-footer .social-icons .fab,
.site-footer .social-icons .fa,
.site-footer .social-icons .fas,
.site-footer .social-icons .far {
  font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free', 'FontAwesome' !important;
  color: inherit !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.site-footer .social-icons .fab { font-family: 'Font Awesome 5 Brands' !important; }

/* ---------- 13. Port Info section (dark bg) — make slide pop ---------- */
.block-views-blockhomepage-port-carousel-block-1 {
  padding: 30px 0;
}
.block-views-blockhomepage-port-carousel-block-1 .slick__slide {
  border-radius: var(--ar-radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: var(--ar-navy-deep);
  margin: 10px;
  position: relative;
}
.block-views-blockhomepage-port-carousel-block-1 .port-slide-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--ar-trans-slow);
}
.block-views-blockhomepage-port-carousel-block-1 .slick__slide:hover .port-slide-image img {
  transform: scale(1.04);
}
.block-views-blockhomepage-port-carousel-block-1 .port-slide-title-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 70px;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(8,29,58,0) 0%, rgba(8,29,58,.85) 100%);
}
.block-views-blockhomepage-port-carousel-block-1 .port-slide-title {
  color: var(--ar-white) !important;
  margin: 0;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.block-views-blockhomepage-port-carousel-block-1 .port-slide-readmore-wrap a,
.block-views-blockhomepage-port-carousel-block-1 a.port-slide-readmore,
.block-views-blockhomepage-port-carousel-block-1 .port-slide-readmore a {
  display: inline-block;
  background: var(--ar-gold);
  color: var(--ar-navy-deep) !important;
  padding: 10px 22px;
  border-radius: var(--ar-radius-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  text-decoration: none;
  transition: background var(--ar-trans), transform var(--ar-trans);
  margin: 16px 22px 22px;
}
.block-views-blockhomepage-port-carousel-block-1 .port-slide-readmore-wrap a:hover,
.block-views-blockhomepage-port-carousel-block-1 a.port-slide-readmore:hover,
.block-views-blockhomepage-port-carousel-block-1 .port-slide-readmore a:hover {
  background: var(--ar-navy) !important;
  color: var(--ar-white) !important;
  transform: translateY(-2px);
}
/* Section heading (PORT / INFO) — INFO appears dark on dark, force light */
.block-views-blockhomepage-port-carousel-block-1 h1,
.block-views-blockhomepage-port-carousel-block-1 h2 { color: var(--ar-white) !important; }

/* ---------- 14. Divisions / Subsidiary Companies — fix invisible h2 ---------- */
.block-views-blockhomepage-subsidiary-companies-carousel-block-1 h1,
.block-views-blockhomepage-subsidiary-companies-carousel-block-1 h2,
.view-homepage-subsidiary-companies-carousel h1,
.view-homepage-subsidiary-companies-carousel h2 {
  color: var(--ar-navy-deep) !important;
}
/* If section sits over dark image, force white via wrapper detection */
.dark-bg .block-views-blockhomepage-subsidiary-companies-carousel-block-1 h1,
.dark-bg .block-views-blockhomepage-subsidiary-companies-carousel-block-1 h2 { color: var(--ar-white) !important; }

/* Generic fallback: any h2 directly following an h1 in a homepage block stays readable */
section h1 + h2, .block h1 + h2 {
  color: inherit;
}

/* ---------- 15. Slick arrows — minimal white chevrons, gold on hover/active ---------- */
.slick-prev, .slick-next {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}
.slick-prev:before, .slick-next:before {
  font-family: 'Arial', sans-serif !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  opacity: .9 !important;
  display: block;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.slick-prev:before { content: "\2039" !important; }   /* ‹ */
.slick-next:before { content: "\203A" !important; }   /* › */

/* Beat home.css PNG arrow rules (very specific selectors) */
.block-views-blocktestimonials-view-block-1 .content .view-content .slick--view--testimonials-view .slick__arrow .slick-prev:before,
.block-views-blocktestimonials-view-block-1 .content .view-content .slick--view--testimonials-view .slick__arrow .slick-next:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-prev:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-next:before {
  background-image: none !important;
  background: transparent !important;
  height: auto !important;
  font-family: 'Arial', sans-serif !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  opacity: .9 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.block-views-blocktestimonials-view-block-1 .content .view-content .slick--view--testimonials-view .slick__arrow .slick-prev:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-prev:before { content: "\2039" !important; }
.block-views-blocktestimonials-view-block-1 .content .view-content .slick--view--testimonials-view .slick__arrow .slick-next:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-next:before { content: "\203A" !important; }
.block-views-blocktestimonials-view-block-1 .slick__arrow .slick-prev,
.block-views-blocktestimonials-view-block-1 .slick__arrow .slick-next,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-prev,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-next {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.block-views-blocktestimonials-view-block-1 .slick__arrow .slick-prev:hover:before,
.block-views-blocktestimonials-view-block-1 .slick__arrow .slick-next:hover:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-prev:hover:before,
.block-views-blockhomepage-port-carousel-block-1 .slick__arrow .slick-next:hover:before {
  color: var(--ar-gold) !important;
  opacity: 1 !important;
  transform: scale(1.1);
}
.slick-prev:hover, .slick-next:hover,
.slick-prev:focus, .slick-next:focus,
.slick-prev:active, .slick-next:active {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
}
.slick-prev:hover:before, .slick-next:hover:before,
.slick-prev:focus:before, .slick-next:focus:before,
.slick-prev:active:before, .slick-next:active:before {
  color: var(--ar-gold) !important;
  opacity: 1 !important;
  transform: scale(1.1);
}

/* ---------- 16. Subsidiary view-header (bare "DIVISIONS" text) ---------- */
.view-homepage-subsidiary-companies-carousel .view-header {
  text-align: left;
  padding: 10px 0 0;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--ar-white) !important;
  text-transform: uppercase;
  line-height: 1.1;
}
.view-homepage-subsidiary-companies-carousel .view-header h2 {
  display: block;
  margin: 4px 0 18px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ar-white) !important;
}
/* The subsidiary section background is dark/gray-blue — keep both lines white */
.block-views-blockhomepage-subsidiary-companies-carousel-block-1 h2,
.block-views-blockhomepage-subsidiary-companies-carousel-block-1 .view-header { color: var(--ar-white) !important; }

/* ---------- 11. (scroll-reveal removed — was hiding content) ---------- */

/* ---------- 12. Misc ---------- */
a { transition: color var(--ar-trans); }
::selection { background: var(--ar-gold); color: var(--ar-navy-deep); }
html { scroll-behavior: smooth; }