/*
Theme Name: OTT Railway
Author: On-Track Technology
Description: Approved seven-page OTT railway website. Installation alone does not activate, import pages, or change site settings.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.0
Text Domain: ott-railway
*/
:root{--ink:#20272a;
--muted:#555e62;
--paper:#fff;
--soft:#f2f1ed;
--line:#d4d2cc;
--accent:#a94a1b;
--bright:#d86a2c;
color-scheme:light;
font-family:Arial,Helvetica,sans-serif;
color:var(--ink);
background:var(--paper)}

*{box-sizing:border-box}
body{margin:0;
font-size:17px;
line-height:1.65}
a{color:var(--accent);
text-underline-offset:.2em}
button{font:inherit;
cursor:pointer}
img{display:block;
max-width:100%;
height:auto}
figure{margin:0;
min-width:0}
figcaption{font-size:14px;
line-height:1.55;
color:var(--muted);
margin-top:10px}
p{margin:14px 0 0;
max-width:78ch}
h1,h2,h3{line-height:1.15;
letter-spacing:-.025em;
margin:0;
font-weight:500}
h1{font-size:clamp(34px,4.2vw,60px);
max-width:20ch}
h2{font-size:clamp(28px,3vw,40px);
max-width:32ch}
h3{font-size:23px;
letter-spacing:-.015em}
h3:not(:first-child){margin-top:30px}
address{font-style:normal}
.container{max-width:1160px;
margin:auto;
padding-inline:32px}
.section{padding:68px 0;
border-bottom:1px solid var(--line)}
.section:last-child{border:0}
.soft{background:var(--soft)}
.dark{background:var(--ink);
color:#f7f5ef}
.dark p{color:#d7dbdc}
.kicker{color:var(--accent);
font-size:13px;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:700;
margin:0 0 16px}
.dark .kicker{color:#f2a06f}
.dark a{color:#ffbd95}
.review-strip{background:#f2e5d9;
text-align:center;
font-size:13px;
padding:7px 16px;
color:#603013}
.site-header{background:var(--paper);
color:var(--ink);
border-bottom:1px solid var(--line)}
.header-inner{max-width:1360px;
padding:25px 32px;
display:flex;
gap:30px;
align-items:center;
margin:auto}
.brand{color:var(--ink);
text-decoration:none;
flex-shrink:0;
display:block}
.brand-logo{width:220px;
height:auto;
object-fit:contain}
nav{display:flex;
gap:18px;
align-items:center;
margin-left:auto}
nav a{color:var(--ink);
text-decoration:none;
font-size:14px;
padding:10px 0;
white-space:nowrap}
nav a[aria-current]{border-bottom:2px solid var(--bright);
color:var(--accent)}
nav a:hover{color:var(--accent);
text-decoration:underline}
.menu-toggle{display:none;
background:transparent;
border:1px solid var(--muted);
color:var(--ink);
padding:7px 15px;
border-radius:3px}
.menu-toggle:hover,.menu-toggle[aria-expanded="true"]{background:var(--soft);
border-color:var(--accent);
color:var(--ink)}
.hero{background:#f2f1ed}
.hero-inner{display:grid;
grid-template-columns:1.05fr .95fr;
max-width:1360px;
margin:auto;
align-items:center}
.hero-copy{padding:66px 50px 66px 6vw}
.hero-copy p{
max-width:64ch}
.hero-media{padding:35px 32px 35px 0}
.hero-media img{width:100%;
aspect-ratio:16/9;
object-fit:contain}
.intro{padding:64px 0}
.intro .hero-copy{padding:0}
.intro h1{max-width:26ch}
.intro p{max-width:85ch}
.actions{display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:26px}
.button{display:inline-flex;
align-items:center;
justify-content:center;
padding:11px 18px;
line-height:1.4;
min-height:46px;
text-align:center;
text-decoration:none;
border:1px solid var(--ink);
border-radius:3px;
font-size:15px;
font-weight:600;
color:var(--ink);
background:transparent}
.button.primary{background:var(--accent);
border-color:var(--accent);
color:#fff}
.button:hover{background:#e9e6e1;
color:var(--ink)}
.button.primary:hover{background:#873811;
color:#fff}
.dark .button{border-color:#b5bec2;
color:#f7f5ef}
.dark .button.primary{border-color:var(--accent);
background:var(--accent)}
.dark .button:hover{color:var(--ink)}
.dark .button.primary:hover{color:#fff}
.grid{display:grid;
gap:28px;
margin-top:32px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{border-top:3px solid var(--line);
padding-top:22px;
min-width:0}
.tile p{font-size:16px}
.tile h3{margin:0}
.text-link{display:inline-block;
margin-top:18px;
font-weight:600}
.split{display:grid;
grid-template-columns:1fr 1fr;
gap:42px;
align-items:start;
margin-top:32px}
.split>div>p:first-child{margin-top:0}
.split>figure img{width:100%;
max-height:510px;
object-fit:contain}
.split h3{margin-bottom:12px}
.flow{list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
margin:32px 0 24px;
background:var(--line)}
.flow li{background:var(--paper);
padding:23px;
min-width:0}
.flow h3{font-size:20px;
margin:0}
.flow p{font-size:15px}
.step-number{display:block;
color:var(--accent);
font-size:14px;
font-weight:700;
margin-bottom:16px}
.table-scroll{overflow-x:auto;
margin:30px 0 20px;
max-width:100%}
table{border-collapse:collapse;
width:100%;
font-size:16px;
min-width:600px}
caption{text-align:left;
font-size:14px;
color:var(--muted);
padding-bottom:12px}
th,td{text-align:left;
padding:16px 18px;
border-bottom:1px solid var(--line);
vertical-align:top}
thead th{background:var(--ink);
color:#fff}
tbody th{font-weight:600;
width:36%}
tbody tr:nth-child(even){background:#f6f5f2}
.feature-list{columns:2;
column-gap:44px;
padding-left:22px;
margin-top:24px}
.feature-list li{break-inside:avoid;
margin-bottom:12px;
padding-left:4px}
.screen{margin-top:28px}
/* Mask captured window-corner backing only; preserve screenshot bytes and full bounds.
   Percentages follow the image itself, including the horizontally scrollable enlargement. */
img[src*="cwrm-"][src$="-anonymised.png"]{border-radius:1% / 1.8%}
.screen img{width:100%;
border:1px solid #c7cecf}
.screen figcaption a{margin-left:10px}
blockquote{margin:35px 0 0;
border-left:4px solid var(--bright);
padding:0 0 0 24px;
max-width:85ch}
blockquote p{font-size:23px;
line-height:1.5}
blockquote footer{font-size:14px;
margin-top:15px;
text-transform:uppercase;
letter-spacing:.08em}
.note{font-size:14px;
color:var(--muted)}
.product-pair{display:grid;
grid-template-columns:.85fr 1.15fr;
gap:42px;
margin-top:40px;
align-items:center;
padding-bottom:40px;
border-bottom:1px solid var(--line)}
.product-pair:last-child{border-bottom:0;
padding-bottom:0}
.product-pair figure img{max-height:370px;
width:100%;
object-fit:contain}
.product-name{font-size:15px;
color:var(--accent);
font-weight:600}
.hmavr{margin-top:55px}
.hmavr figure img{max-height:280px}
.routes article{scroll-margin-top:20px}
.contact-details{margin:0}
.contact-details dt{font-size:15px;
color:var(--muted);
margin-top:22px}
.contact-details dt:first-child{margin-top:0}
.contact-details dd{margin:5px 0 0;
font-size:22px;
overflow-wrap:anywhere}
.site-footer{padding:45px 0;
background:#192023;
color:#e5e9eb}
.footer-grid{display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:35px}
.site-footer p,.site-footer address{font-size:15px}
.site-footer h2{font-size:18px}
.site-footer a{color:#ffbd95;
display:inline-block;
font-size:15px}
.site-footer .footer-grid>div:last-child a{display:block;
margin-top:6px}
.skip-link{position:absolute;
top:8px;
left:8px;
padding:12px;
background:#fff;
transform:translateY(-200%);
z-index:10}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #176a9d;
outline-offset:4px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:#9fd8ff}
.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}
dialog{border:0;
border-radius:4px;
padding:24px;
max-width:95vw;
width:1400px;
max-height:92vh;
box-shadow:0 12px 80px #0008}
dialog::backdrop{background:#10171bd9}
.dialog-bar{display:flex;
gap:24px;
align-items:center;
justify-content:space-between;
margin-bottom:18px}
.dialog-bar h2{font-size:24px}
.image-scroll{overflow:auto}
.image-scroll img{max-width:none;
width:auto;
max-height:65vh;
height:auto}
.image-scroll:focus-visible{outline-offset:-3px}
#image-caption{font-size:14px}
html{scroll-behavior:smooth}

@media(max-width:1250px){.header-inner{flex-wrap:wrap;
gap:12px}
nav{margin:0;
width:100%;
justify-content:space-between}
.hero-copy{padding:50px 32px}
.cols-4,.flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){body{font-size:16px}
.container{padding-inline:24px}
.section{padding:44px 0}
.header-inner{padding:18px 24px;
justify-content:space-between}
.brand-logo{width:164px}
.js .menu-toggle{display:block}
.js nav:not(.is-open){display:none}
nav{flex-direction:column;
align-items:stretch;
gap:0}
nav a{padding:12px 0;
white-space:normal}
.hero-inner,.split,.product-pair,.footer-grid{grid-template-columns:1fr}
.hero-copy{padding:40px 24px}
.hero-media{padding:26px 24px 0;
grid-row:1}
.hero-media figcaption{font-size:12px}
.intro{padding:45px 0}
.cols-2,.cols-3,.cols-4,.flow{grid-template-columns:1fr}
.split,.product-pair{gap:24px}
.grid{gap:27px}
.feature-list{columns:1}
.flow li{padding:22px}
.product-pair{padding-bottom:30px}
.actions{gap:10px}
.button{max-width:100%}
blockquote{padding-left:18px}
blockquote p{font-size:20px}
.contact-details dd{font-size:19px}
.dialog-bar h2{font-size:20px}
dialog{padding:18px}
.image-scroll img{max-height:60vh}
.review-strip{font-size:12px}
table{font-size:15px}
th,td{padding:13px 15px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}

/* WordPress editor block wrappers must not change the approved section widths. */
.ott-html-block{max-width:none}