/*
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: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — built for Sirtica Maritime
Text Domain: sirtica
*/

/* ===========================================================================
   Built to the "Website Layout Option" mockup (Oct 2026).
   Colours are sampled from the approved logo and the mockup itself, not guessed.
   =========================================================================== */

:root{
  --navy:#1f2a7a;          /* headings, nav, footer type */
  --navy-deep:#161e5c;
  --blue:#2f6fd0;
  --green:#12b886;         /* the brand green: buttons, card heads, icons */
  --green-dark:#0ea97a;
  --ink:#394150;           /* body copy */
  --muted:#6b7280;
  --line:#e3e8f0;
  --panel:#dbeafe;         /* the pale blue "What we believe" panel */
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --wrap:1180px;
  --shadow:0 10px 30px rgba(31,42,122,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Poppins","Century Gothic",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:0 0 .5em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;
  background:var(--white);padding:10px 16px;border-radius:8px;z-index:100}

/* Section headings — the mockup sets them in heavy navy caps. */
.sec-title{font-size:clamp(22px,3vw,30px);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 22px}

/* ---------------------------------------------------------------- header */
.site-nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid transparent}
.site-nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(31,42,122,.06)}
.site-nav .wrap{display:flex;align-items:center;gap:20px;min-height:84px}
.logo img{height:46px;width:auto}
.menu-main{margin-left:auto;display:flex;align-items:center;gap:26px}
.menu-main ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu-main a{color:var(--navy);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.menu-main a:hover{color:var(--green);text-decoration:none}
.btn-quote{background:var(--green);color:#fff!important;border-radius:999px;
  padding:9px 20px;font-size:12.5px;font-weight:600;white-space:nowrap}
.btn-quote:hover{background:var(--green-dark);text-decoration:none}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;width:42px}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------------ hero */
.hero{padding:0 0 10px}
.hero-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1774/887;background:var(--navy)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,6vw,76px)}
.hero-copy h1{color:#fff;margin:0;max-width:min(560px,60%);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-copy em{display:block;font-style:italic;font-weight:600;font-size:clamp(26px,4.6vw,52px);line-height:1.05}
.hero-copy span{display:block;font-weight:500;font-size:clamp(16px,2.4vw,27px);margin-top:.25em}
.hero-copy span::first-line{font-weight:400}

/* ----------------------------------------------------------------- about */
.about{padding:52px 0 10px}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,4vw,56px);align-items:center}
.about-copy h2{font-size:clamp(26px,3.4vw,34px);font-weight:800}
.about-copy p{margin:0 0 14px;max-width:46ch}
.about-art img{margin-inline:auto}

/* -------------------------------------------------------------- believe */
.believe{padding:34px 0}
.believe-panel{background:var(--panel);border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(18px,3.5vw,38px);align-items:center}
.believe-img{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.believe-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.believe-copy h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin-bottom:.6em}
.believe-copy ul{list-style:none;margin:0;padding:0}
.believe-copy li{font-size:13.5px;margin-bottom:9px;color:var(--ink)}
.believe-copy li b{color:var(--navy)}

/* ----------------------------------------------------- mission & vision */
.mv{padding:46px 0}
.mv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,64px);align-items:center}
.mv-img{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.mv-img img{width:100%;aspect-ratio:1100/1375;object-fit:cover}
.mv-copy article+article{margin-top:34px}
.mv-copy h3{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.6vw,27px);font-weight:800;margin-bottom:.45em}
.mv-copy h3 img{width:34px;height:34px;flex:none}
.mv-copy p{margin:0;max-width:40ch;font-size:13.5px}
.mv-tag{display:inline-block;margin-top:6px;color:var(--navy);font-weight:600}

/* ----------------------------------------------------------- why choose */
.why{padding:30px 0 10px}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.why-card{border:1px solid var(--green);border-radius:var(--radius);overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.why-card h3{background:var(--green);color:#fff;margin:0;padding:12px 16px;
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;min-height:58px;
  display:flex;align-items:center}
.why-card p{margin:0;padding:14px 16px 18px;font-size:13px;color:var(--ink)}

/* -------------------------------------------------------------- services */
.services{padding:44px 0}
.svc-rail{position:relative;display:flex;align-items:center;gap:10px}
.svc-track{list-style:none;margin:0;padding:4px;display:grid;
  grid-auto-flow:column;
  /* exactly three across, however many services the client adds — 1fr would divide the
     track between all of them and give six slivers instead of a row of three. */
  grid-auto-columns:calc((100% - 2*22px)/3);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;flex:1}
.svc-track::-webkit-scrollbar{display:none}
.svc-card{scroll-snap-align:start}
.svc-card a{display:block;position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.svc-card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .35s ease}
.svc-card a:hover img{transform:scale(1.04)}
.svc-card a:hover{text-decoration:none}
.svc-label{position:absolute;left:14px;right:14px;bottom:14px;
  background:linear-gradient(180deg,var(--blue),var(--navy));color:#fff;
  border-radius:10px;padding:11px 10px;text-align:center;
  font-size:15px;font-weight:600;box-shadow:0 8px 18px rgba(22,30,92,.3)}
.rail-btn{flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--blue);font-size:30px;line-height:1;
  display:grid;place-items:center}
.rail-btn:hover{color:var(--navy)}
.rail-btn[disabled]{opacity:.25;cursor:default}

/* ----------------------------------------------------------- core values */
.values{padding:30px 0 52px}
.values-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.value-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff}
.value-card img{width:62px;height:62px}
.value-card h3{font-size:16px;font-weight:700;margin:0 0 4px}
.value-card p{margin:0;font-size:12.5px;color:var(--ink)}

/* ----------------------------------------------------------------- quote */
.quote{padding:10px 0 60px}
.quote-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy)}
.quote-bg{width:100%;aspect-ratio:1600/1016;object-fit:cover;max-height:520px}
.quote-panel{position:absolute;top:50%;right:clamp(16px,5%,58px);transform:translateY(-50%);
  width:min(440px,54%);background:var(--green);border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,28px);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.quote-panel h2{color:#fff;font-size:clamp(18px,2.4vw,26px);font-weight:800;
  text-transform:uppercase;margin:0 0 16px}
.quote-form .q-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.quote-form input,.quote-form textarea{
  width:100%;border:0;border-radius:9px;padding:11px 14px;font:inherit;font-size:13.5px;
  color:var(--ink);background:#fff}
.quote-form textarea{resize:vertical;min-height:74px;margin-bottom:14px}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#9aa3b2}
.quote-form input:focus,.quote-form textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
.q-send{background:#fff;color:var(--navy);border:0;border-radius:9px;
  padding:10px 26px;font:inherit;font-size:13.5px;font-weight:700;text-transform:uppercase;cursor:pointer}
.q-send:hover{background:#eef4ff}
.q-note{border-radius:9px;padding:9px 12px;font-size:13px;margin:0 0 12px}
.q-note.ok{background:#e9fbf3;color:#0b6b4a}
.q-note.err{background:#fde8e8;color:#8a1c1c}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line);padding:46px 0 0;margin-top:10px}
.foot-grid{display:grid;grid-template-columns:1.1fr .8fr 1.1fr 1fr;gap:clamp(20px,3vw,40px)}
.foot-brand img{width:min(200px,70%)}
.foot-col h3{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--navy);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:7px}
.foot-col a{color:var(--ink);font-size:12.5px}
.foot-col a:hover{color:var(--green);text-decoration:none}
.foot-contact address{font-style:normal;font-size:12.5px;color:var(--ink);margin:0 0 8px}
.foot-contact p{margin:0 0 5px;font-size:12.5px}
.foot-base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);margin-top:34px;padding-top:16px;padding-bottom:22px}
.foot-base small,.foot-base a{font-size:11.5px;color:var(--muted)}
.foot-base nav{display:flex;gap:18px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .mv-grid{gap:28px}
  .svc-track{grid-auto-columns:calc((100% - 22px)/2)}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .menu-main{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 18px;display:none;
    box-shadow:0 14px 24px rgba(31,42,122,.08)}
  .menu-main.open{display:flex}
  .menu-main ul{flex-direction:column;align-items:stretch;gap:0}
  .menu-main li{border-bottom:1px solid var(--line)}
  .menu-main a{display:block;padding:12px 0}
  .btn-quote{margin-top:12px;text-align:center}

  .about-grid,.believe-panel,.mv-grid{grid-template-columns:minmax(0,1fr)}
  .about-art{order:-1}
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .values-grid{grid-template-columns:minmax(0,1fr)}
  .svc-track{grid-auto-columns:minmax(230px,78%)}
  .svc-card img{aspect-ratio:3/4}

  /* The form sits over the photo on desktop; on a phone that is unreadable, so the
     picture becomes a header and the panel sits beneath it. */
  .quote-card{background:transparent}
  .quote-bg{aspect-ratio:16/10;border-radius:var(--radius-lg)}
  .quote-panel{position:static;transform:none;width:auto;margin-top:-28px}
  .quote-form .q-row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero-card{aspect-ratio:4/5}
  .hero-copy h1{max-width:100%}
  .foot-grid{grid-template-columns:1fr}
  .value-card{grid-template-columns:54px minmax(0,1fr);gap:12px;padding:16px}
  .value-card img{width:48px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ===========================================================================
   Inner pages (About, Services, Contact, posts) — page.php, single.php,
   archive.php and template-contact.php were written against the previous
   stylesheet. Rewriting the sheet for the new homepage would have left every
   one of them unstyled, so their rules are carried over here, remapped onto the
   new palette. Worth folding into the sections above when those pages are next
   redesigned to the same layout.
   =========================================================================== */
.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(--green);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}
/* 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%}
.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}
.presence h2.sec{color:#fff}
/* news */
.news .card{padding:0;overflow:hidden}
.ctaband h2.sec{color:#fff;font-size:30px;margin-bottom:10px}
/* 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}
.two .grid,.split .grid{grid-template-columns:1fr}
.cards{grid-template-columns:1fr 1fr}
.cards,.sirtica-form .row{grid-template-columns:1fr}
/* ---- 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)}
header.site-nav .wrap>a.btn-primary{display:none}
h2.sec{font-size:26px}
.card,.btn,.office,.card .ic{transition:none}