/*
Theme Name: SEAROAD Logistics
Theme URI: https://searoadco.com/
Description: Custom theme for SEAROAD Logistics. Eighteen pages in Persian, English and Turkish are built in: home, nine services, quote form, load calculator, tracking, training, news, about, memberships and certificates, and contact.
Version: 2.8.2
Requires at least: 5.8
Requires PHP: 7.2
Text Domain: searoad
*/

body { margin: 0; }
a { color: #253166; }
a:hover { color: #E30613; }
img { max-width: 100%; height: auto; }
summary::-webkit-details-marker { display: none; }

/* Phones and tablets: the menu and the two header buttons fold behind one button */
.sr-nav-toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sr-burger{display:none}
.sr-menu{display:contents}
@media (max-width:1099px){
.sr-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.6);border-radius:14px;background:rgba(255,255,255,.14);cursor:pointer}
.sr-nav-toggle:focus-visible + .sr-burger{outline:2px solid #FFFFFF;outline-offset:2px}
.sr-menu{display:none;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:10px;padding:6px 0 4px;max-height:calc(100vh - 120px);overflow-y:auto}
.sr-nav-toggle:checked ~ .sr-menu{display:flex}
.sr-menu nav{flex-direction:column !important;align-items:stretch !important;gap:0 !important;font-size:17px !important;white-space:normal !important}
.sr-menu nav > a,.sr-menu nav > details > summary{min-height:50px !important;border-top:1px solid rgba(255,255,255,.16);display:flex !important}
.sr-menu nav details > div{position:static !important;min-width:0 !important;margin:0 0 10px !important;box-shadow:none !important}
.sr-menu .sr-cta{flex-wrap:wrap !important;padding-top:6px}
.sr-menu .sr-cta a{flex:1 1 140px;justify-content:center;min-height:50px !important;font-size:16px !important}
}
@media (max-width:700px){.sr-top-extra{display:none !important}}

/* Lessons are for reading online only: no selecting, dragging or printing; blurred while the window is not in front */
.sr-protect, .sr-protect * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sr-protect img { pointer-events: none; -webkit-user-drag: none; }
.sr-protect { transition: filter 0.15s ease; }
html.sr-away .sr-protect { filter: blur(22px); }
.sr-print-note { display: none; }
@media print {
  .sr-protect { display: none !important; }
  .sr-print-note { display: block !important; }
}
[hidden] { display: none !important; }

/* Pins on the map of customs representatives: the tooltip opens on hover, keyboard focus or tap */
.sr-pin { position: absolute; transform: translate(-50%, -100%); width: 22px; height: 30px; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; z-index: 1; }
.sr-pin:hover, .sr-pin:focus { z-index: 6; outline: none; }
.sr-pin:focus-visible { outline: 2px solid #253166; outline-offset: 2px; border-radius: 6px; }
.sr-tip { display: none; }
.sr-pin:hover .sr-tip, .sr-pin:focus .sr-tip { display: block; }
details a:hover { background: #F2F4F9; }

@media (max-width: 1100px) {
  .hero-art { opacity: .3; }
}

/* Article and ordinary page content */
.sr-content { font-size: 17px; line-height: 1.95; color: #1B2140; }
html[dir="ltr"] .sr-content { line-height: 1.7; }
.sr-content h2 { margin: 40px 0 12px; font-size: 26px; font-weight: 900; color: #253166; line-height: 1.4; }
.sr-content h3 { margin: 32px 0 10px; font-size: 21px; font-weight: 700; color: #253166; line-height: 1.5; }
.sr-content p { margin: 0 0 18px; }
.sr-content ul, .sr-content ol { margin: 0 0 18px; padding-inline-start: 24px; }
.sr-content li { margin-bottom: 6px; }
.sr-content a { text-underline-offset: 5px; }
.sr-content blockquote { margin: 24px 0; padding: 4px 20px; border-inline-start: 5px solid #E30613; color: #3A4160; }
.sr-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.sr-content th, .sr-content td { border: 1px solid #D8DCE8; padding: 10px 12px; text-align: start; }
.sr-content th { background: #F2F4F9; }
.sr-content figure { margin: 24px 0; }
.sr-content figcaption { font-size: 14px; color: #4A5170; }