/*
Theme Name: Sirtica Maritime
Theme URI: https://sirticamaritime.com
Author: Dinani Tech (Aditya Sharma)
Author URI: https://dinani.tech
Description: A lightweight, fast, SEO-ready custom WordPress theme for Sirtica Maritime — a corporate ship-management website. Built-in SEO (meta tags, Open Graph, JSON-LD schema) and a built-in contact form, so no premium plugins are required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — built for Sirtica Maritime
Text Domain: sirtica
*/

:root{
  --navy:#0A2540; --ocean:#0e3a63; --blue:#1C6FD8; --teal:#00A6C0;
  --light:#F4F8FB; --ink:#1c2b3a; --muted:#5a6b7b; --line:#e2e9f0; --amber:#F2A63B;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.55;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.ph{background:linear-gradient(135deg,#dbe6f0,#c3d4e4);display:flex;align-items:center;justify-content:center;color:#6d8299;font-size:13px;letter-spacing:.5px;text-transform:uppercase;min-height:120px}
.btn{display:inline-block;padding:12px 24px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;border:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-amber{background:var(--amber);color:#1a1200}
.btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.eyebrow{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
h2.sec{font-size:32px;color:var(--navy);margin:0 0 14px;line-height:1.2}
.lead{color:var(--muted);font-size:16px;max-width:720px}
section{padding:70px 0}

/* top bar */
.topbar{background:var(--navy);color:#cfe0f0;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar a{color:#cfe0f0;margin-left:16px}
.topbar .langs span{margin-left:10px;opacity:.8;cursor:pointer}
.topbar .langs span.active{color:#fff;font-weight:700;opacity:1}

/* header */
header.site-nav{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 2px 14px rgba(10,37,64,.08)}
header.site-nav .wrap{display:flex;align-items:center;height:74px;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:22px}
.logo img{max-height:44px;width:auto}
.logo .mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.logo small{display:block;font-size:10px;letter-spacing:2px;color:var(--teal);font-weight:700}
.menu-main{margin-left:auto}
.menu-main ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;font-weight:600;font-size:15px}
.menu-main a{color:var(--ink)}
.menu-main a:hover{color:var(--blue)}
.menu-main .menu-item-has-children>a:after{content:" \25BE";color:var(--muted);font-size:11px}
.menu-main li{position:relative}
.menu-main li ul{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 12px 30px rgba(10,37,64,.14);border-radius:8px;padding:10px 0;min-width:230px;flex-direction:column;gap:0}
.menu-main li:hover>ul{display:flex}
.menu-main li ul a{display:block;padding:9px 20px;font-weight:500}
.menu-main li ul a:hover{background:var(--light)}
.nav-toggle{display:none;margin-left:auto;font-size:26px;background:none;border:none;color:var(--navy);cursor:pointer}

/* hero */
.hero{position:relative;color:#fff;background:linear-gradient(120deg,rgba(10,37,64,.92),rgba(14,58,99,.78)),linear-gradient(135deg,#16324f,#0a2540);background-size:cover;background-position:center}
.hero .wrap{padding:96px 24px 104px}
.hero .tag{display:inline-block;background:rgba(255,255,255,.12);padding:6px 14px;border-radius:20px;font-size:13px;letter-spacing:1px;margin-bottom:22px}
.hero h1{font-size:52px;line-height:1.08;max-width:820px;margin:0 0 20px}
.hero p{font-size:19px;color:#cfe0f0;max-width:620px;margin:0 0 30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* stats */
.stats{background:var(--ocean);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 24px}
.stats .num{font-size:40px;font-weight:800}
.stats .lbl{font-size:14px;color:#bcd3ea;margin-top:4px}
.stats .st{border-left:3px solid var(--teal);padding-left:16px}

/* two-col */
.two .grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.two .ph,.two img{height:340px;border-radius:12px;object-fit:cover;width:100%}

/* services */
.services{background:var(--light)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;transition:.2s}
.card:hover{box-shadow:0 12px 30px rgba(10,37,64,.10);transform:translateY(-3px)}
.card .ic{width:52px;height:52px;border-radius:12px;background:#e8f1fb;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.card h3{color:var(--navy);font-size:18px;margin:0 0 8px}
.card p{color:var(--muted);font-size:14.5px;margin:0}
.card a.more{color:var(--blue);font-weight:600;font-size:14px;display:inline-block;margin-top:12px}

/* split */
.split .grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split .ph,.split img{height:320px;border-radius:12px;object-fit:cover;width:100%}
.ticks{list-style:none;margin:16px 0 0;padding:0}
.ticks li{padding:7px 0 7px 30px;position:relative}
.ticks li:before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:800}

/* presence */
.presence{background:var(--navy);color:#fff;text-align:center}
.presence h2.sec{color:#fff}
.offices{display:flex;gap:26px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.office{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:24px 34px;min-width:240px}
.office h4{font-size:20px;margin:0 0 6px}
.office p{color:#bcd3ea;font-size:14px;margin:0}

/* news */
.news .card{padding:0;overflow:hidden}
.news .ph,.news .thumb{height:170px;width:100%;object-fit:cover}
.news .body{padding:20px}
.news .date{color:var(--teal);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.news h3{font-size:17px;margin:8px 0}

/* cta band */
.ctaband{background:linear-gradient(120deg,var(--blue),var(--teal));color:#fff;text-align:center}
.ctaband h2.sec{color:#fff;font-size:30px;margin-bottom:10px}
.ctaband p{color:#eaf6ff;margin:0 0 24px}

/* page content */
.page-hero{background:var(--navy);color:#fff;padding:60px 0}
.page-hero h1{margin:0;font-size:40px}
.page-hero .crumbs{color:#9fb3c8;font-size:14px;margin-top:8px}
.content{padding:60px 0;max-width:820px}
.content h2{color:var(--navy)}
.content img{border-radius:10px;margin:14px 0}

/* contact form */
.sirtica-form{max-width:640px;margin-top:10px}
.sirtica-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sirtica-form label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px;color:var(--navy)}
.sirtica-form input,.sirtica-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:15px;font-family:inherit}
.sirtica-form textarea{min-height:130px;resize:vertical}
.sirtica-form .hp{position:absolute;left:-9999px}
.sirtica-note{padding:12px 16px;border-radius:6px;margin-bottom:14px;font-size:14px}
.sirtica-note.ok{background:#e3f2e8;color:#1f6b39;border:1px solid #b7ddc4}
.sirtica-note.err{background:#fbe3e3;color:#a12a2a;border:1px solid #edbcbc}

/* footer */
footer.site-foot{background:#07182b;color:#9fb3c8;font-size:14px;padding:56px 0 26px}
footer.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:34px}
footer.site-foot h5{color:#fff;font-size:15px;margin:0 0 14px}
footer.site-foot a{display:block;color:#9fb3c8;padding:5px 0}
footer.site-foot a:hover{color:#fff}
footer.site-foot .brand{font-size:22px;font-weight:800;color:#fff;margin-bottom:10px}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;color:#6f8299;font-size:13px;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .two .grid,.split .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  footer.site-foot .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px}
  .menu-main{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.1)}
  .menu-main.open{display:block}
  .menu-main ul{flex-direction:column;gap:0;padding:10px 0}
  .menu-main a{display:block;padding:12px 24px}
  .menu-main li ul{position:static;box-shadow:none;padding-left:16px}
  .menu-main li:hover>ul{display:none}
  .nav-toggle{display:block}
}
@media(max-width:560px){.cards,.sirtica-form .row{grid-template-columns:1fr}}

/* =====================================================
   v1.1 — Mobile fixes, animations & language switcher
   ===================================================== */

/* logo: never wrap, tidy fallback */
.logo{white-space:nowrap}
.logo>div{line-height:1.05}

/* Google Translate cleanup (free translation, no plugin) */
body{top:0 !important}
.skiptranslate iframe{display:none !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
font[style]{background:transparent !important;box-shadow:none !important}
/* language dropdown with flags */
.langdd{position:relative;white-space:nowrap}
.langdd-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 13px/1 inherit;padding:5px 10px;border-radius:6px;cursor:pointer}
.langdd-btn:hover{background:rgba(255,255,255,.16)}
.langdd-caret{font-size:10px;opacity:.8;transition:transform .2s ease}
.langdd.open .langdd-caret{transform:rotate(180deg)}
.langdd-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;margin:0;padding:6px 0;list-style:none;background:#fff;color:var(--ink);min-width:150px;border-radius:8px;box-shadow:0 14px 34px rgba(10,37,64,.22);text-align:left}
.langdd.open .langdd-menu{display:block;animation:fadeDown .18s ease both}
.langdd-menu .lang-btn{display:flex;align-items:center;gap:9px;padding:8px 14px;cursor:pointer;font-size:14px;font-weight:500}
.langdd-menu .lang-btn:hover{background:var(--light)}
.langdd-menu .lang-btn.active{background:#e8f1fb;color:var(--blue);font-weight:700}
.flag{display:inline-block;width:20px;height:14px;border-radius:2.5px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30 M60,0 0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.flag-el{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E%3Crect width='27' height='18' fill='%230D5EAF'/%3E%3Cpath d='M0,3 H27 M0,7 H27 M0,11 H27 M0,15 H27' stroke='%23fff' stroke-width='2'/%3E%3Crect width='10' height='10' fill='%230D5EAF'/%3E%3Cpath d='M5,0 V10 M0,5 H10' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")}
.flag-zh{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23EE1C25'/%3E%3Cpath d='M5 3 L6.2 6.7 L10 6.7 L6.9 9 L8.1 12.7 L5 10.4 L1.9 12.7 L3.1 9 L0 6.7 L3.8 6.7 Z' fill='%23FFDE00' transform='translate(1.5,0) scale(.9)'/%3E%3C/svg%3E")}

/* ---- motion: scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---- motion: cards, buttons, icons ---- */
.card{transition:box-shadow .25s ease,transform .25s ease}
.card .ic{transition:transform .3s ease}
.card:hover .ic{transform:scale(1.12) rotate(-4deg)}
.btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,37,64,.18);filter:brightness(1.05)}
.office{transition:transform .25s ease,background .25s ease}
.office:hover{transform:translateY(-4px);background:rgba(255,255,255,.10)}

/* ---- motion: hero animated gradient + drifting wave ---- */
.hero{background:linear-gradient(120deg,rgba(10,37,64,.94),rgba(14,58,99,.80)),linear-gradient(135deg,#16324f,#0a2540,#0e3a63,#16324f);background-size:100% 100%,300% 300%;animation:heroShift 16s ease-in-out infinite alternate;overflow:hidden}
@keyframes heroShift{0%{background-position:0 0,0% 50%}100%{background-position:0 0,100% 50%}}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:70px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70'%3E%3Cpath d='M0 40 C150 70 300 10 450 35 C600 60 750 15 900 35 C1050 55 1150 30 1200 40 V70 H0 Z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E") repeat-x bottom/1200px 70px;animation:waveDrift 14s linear infinite}
@keyframes waveDrift{to{background-position-x:1200px}}
.hero .tag{animation:fadeDown .8s ease both}
.hero h1{animation:fadeUp .8s .1s ease both}
.hero p{animation:fadeUp .8s .25s ease both}
.hero .cta{animation:fadeUp .8s .4s ease both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- mobile fixes (per client screenshot) ---- */
@media(max-width:900px){
  .topbar .wrap{height:auto;min-height:0;padding:6px 16px;flex-wrap:wrap;gap:2px 10px;justify-content:center;text-align:center;font-size:12px}
  header.site-nav .wrap{height:60px;gap:10px}
  .logo{font-size:17px}
  .logo .mark{width:28px;height:28px;font-size:14px;border-radius:6px}
  .logo small{font-size:9px;letter-spacing:1.5px}
  .menu-main{top:60px}
}
@media(max-width:700px){
  header.site-nav .wrap>a.btn-primary{display:none} /* Contact stays in the menu */
  .topbar .hide-sm{display:none}
}
@media(max-width:560px){
  .hero .wrap{padding:64px 20px 84px}
  .hero h1{font-size:30px}
  .hero p{font-size:16px}
  section{padding:50px 0}
  h2.sec{font-size:26px}
  .stats .num{font-size:30px}
}

/* ---- accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hero,.hero:after,.hero .tag,.hero h1,.hero p,.hero .cta{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.btn,.office,.card .ic{transition:none}
}