/*!
 * BOATPRO — theme styles
 * Part of the BOATPRO WordPress theme.
 * Author: BoatPro
 *
 * Styles for markup that WordPress generates itself (menus, breadcrumbs,
 * pagination, blog, comments, widgets, forms) plus the elements of the theme
 * that are not part of the original design system in base.css.
 * Loaded after base.css on every page.
 */

/* ------------------------------------------------------------ a11y ------ */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
	height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;
	word-wrap:normal!important;
}
.screen-reader-text:focus{
	background:#fff;clip:auto!important;clip-path:none;color:var(--ink);
	display:block;font-size:.85rem;font-weight:800;height:auto;left:16px;
	line-height:normal;padding:12px 18px;text-decoration:none;top:16px;
	width:auto;z-index:100000;border-radius:10px;box-shadow:var(--shadow);
}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;clip:auto;clip-path:none;position:fixed}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,
.ba-slider:focus-visible{outline:3px solid rgba(160,62,53,.5);outline-offset:2px}

/* --------------------------------------------------- admin bar offset --- */
body.admin-bar .topbar{top:32px}
@media (max-width:782px){
	body.admin-bar .topbar{top:46px}
}

/* ------------------------------------------------------- header menu ----- */
.navlinks .nav-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:.92rem;font-weight:750}
.navlinks .nav-menu li{margin:0;position:relative}
.navlinks .nav-menu ul{position:absolute;left:0;top:calc(100% + 10px);min-width:220px;display:none;
	list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);
	border-radius:14px;box-shadow:0 20px 50px rgba(16,32,47,.14);z-index:96}
.navlinks .nav-menu li:hover>ul,.navlinks .nav-menu li:focus-within>ul{display:block}
.navlinks .nav-menu ul a{display:block;padding:9px 11px;border-radius:9px;font-size:.88rem;font-weight:700}
.navlinks .nav-menu ul a:hover{background:#f4f6f7}
.navlinks .menu-item-has-children>a:after{content:"›";display:inline-block;margin-left:6px;color:var(--orange);font-weight:900;transform:rotate(90deg)}

/* Sticky header state and anchor offset. */
.topbar.is-scrolled{box-shadow:0 12px 30px rgba(16,32,47,.09);border-bottom-color:rgba(7,47,84,.12)}
:target{scroll-margin-top:110px}

/* Mobile panel uses the same visual language as the design. */
@media (max-width:920px){
	.navlinks .nav-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;font-size:.95rem}
	.navlinks .nav-menu li{width:100%}
	.navlinks .nav-menu a,
	.navlinks .nav-menu ul a{display:flex;align-items:center;min-height:48px;padding:0 13px;border-radius:11px;color:#304455;font-weight:800}
	.navlinks .nav-menu a:hover,.navlinks .nav-menu ul a:hover{background:#f6f7f8}
	.navlinks .nav-menu ul{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0}
	.navlinks .menu-item-has-children>a:after{transform:none}
	.navlinks .language-dropdown{margin-top:8px}
}

/* ---------------------------------------------------------- breadcrumbs - */
.breadcrumbs{margin:0 0 22px;font-size:.8rem;font-weight:700;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li+li:before{content:"›";color:#b6c2cc}
.breadcrumbs a{text-decoration:none;color:var(--muted)}
.breadcrumbs a:hover{color:var(--orange)}
.portfolio-hero .breadcrumbs,.service-detail-hero .breadcrumbs,.blog-hero .breadcrumbs{color:rgba(255,255,255,.72)}
.portfolio-hero .breadcrumbs a,.service-detail-hero .breadcrumbs a,.blog-hero .breadcrumbs a{color:rgba(255,255,255,.72)}
.portfolio-hero .breadcrumbs a:hover,.service-detail-hero .breadcrumbs a:hover{color:#fff}

/* ------------------------------------------------------------ layout ---- */
.page-layout,.single-layout{max-width:900px;margin:0 auto;padding:56px 0 72px}
.archive-layout{padding:26px 0 80px}
.page-media img,.post-media img{width:100%;height:auto;border-radius:var(--radius);display:block}
.entry-content{font-size:1.02rem;line-height:1.72}
.entry-content>*+*{margin-top:1.15em}
.entry-content h2{color:var(--navy);font-size:1.85rem;letter-spacing:-.03em;margin:1.8em 0 .5em}
.entry-content h3{color:var(--navy);font-size:1.35rem;letter-spacing:-.02em;margin:1.6em 0 .4em}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li+li{margin-top:.35em}
.entry-content img{border-radius:16px;height:auto;max-width:100%}
.entry-content a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.entry-content blockquote{
	margin:1.6em 0;padding:18px 22px;border-left:4px solid var(--orange);
	background:var(--paper);border-radius:0 14px 14px 0;color:var(--navy);font-weight:600
}
.entry-content table{width:100%;border-collapse:collapse;font-size:.94rem}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.entry-content th{background:var(--paper);color:var(--navy);font-weight:800}
.entry-content pre{background:#0d1b26;color:#e8eef3;padding:18px;border-radius:14px;overflow:auto;font-size:.86rem}
.entry-content code{background:#eef1f4;padding:2px 6px;border-radius:6px;font-size:.88em}
.entry-content pre code{background:none;padding:0}
.wp-block-image figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
.alignwide{width:min(100%,1180px);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignleft{float:left;margin:0 22px 14px 0}
.alignright{float:right;margin:0 0 14px 22px}
.wp-block-button__link,.wp-block-file__button{
	display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:12px;
	background:var(--orange);color:#fff;font-weight:800;text-decoration:none;border:0
}
.wp-block-button__link:hover,.wp-block-file__button:hover{background:var(--orange-dark);color:#fff}

/* -------------------------------------------------------- pagination ---- */
.pagination{margin-top:34px}
.pagination ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;justify-content:center}
.pagination a,.pagination span{
	display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
	padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
	text-decoration:none;font-weight:800;color:var(--navy);font-size:.9rem
}
.pagination a:hover{border-color:var(--orange);color:var(--orange)}
.pagination .current{background:var(--orange);border-color:var(--orange);color:#fff}

/* ------------------------------------------------------------- blog ----- */
.blog-hero{
	background:linear-gradient(120deg,#16222e,#22475f 55%,rgba(160,62,53,.9));
	color:#fff;padding:56px 0 62px;margin-bottom:44px
}
.blog-hero h1{margin:10px 0 12px;color:#fff;font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.04em}
.blog-hero p{margin:0;color:rgba(255,255,255,.82);max-width:720px}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;padding-bottom:80px}
body.no-sidebar .blog-layout{grid-template-columns:minmax(0,1fr)}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s ease}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfdae3}
.post-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card-title{margin:0;font-size:1.2rem;letter-spacing:-.02em;color:var(--navy)}
.post-card-title a{text-decoration:none}
.post-card-title a:hover{color:var(--orange)}
.post-card-excerpt{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.post-card-more{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:850;text-decoration:none;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.post-card-more .icon{width:16px;height:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--orange)}
.blog-hero .post-meta{color:#f0c9c4}
.blog-hero .post-meta a{color:inherit;text-decoration:none}
.blog-sidebar{position:sticky;top:96px;display:grid;gap:22px}
.widget{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.widget-title{margin:0 0 14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.widget a{text-decoration:none;color:var(--ink)}
.widget a:hover{color:var(--orange)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0}
.post-nav-link{border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;display:grid;gap:4px;background:#fff}
.post-nav-link span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:900}
.post-nav-link strong{color:var(--navy);font-size:.98rem}
.post-nav-link.next{text-align:right}
.post-tags{margin-top:26px;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.post-tags a{background:var(--paper);border-radius:999px;padding:6px 12px;color:var(--navy);text-decoration:none;font-weight:700}

/* --------------------------------------------------------- comments ----- */
.comments-area{margin-top:46px;border-top:1px solid var(--line);padding-top:34px}
.comments-title{font-size:1.25rem;color:var(--navy)}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.comment-list .children{list-style:none;margin:18px 0 0;padding-left:26px}
.comment-body{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}
.comment-meta{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:.85rem;color:var(--muted)}
.comment-author img{border-radius:50%}
.comment-form{display:grid;gap:14px;margin-top:26px}
.comment-form label{font-size:.79rem;font-weight:850;color:#334a5d}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],
.comment-form textarea{width:100%;border:1px solid #ccd8e0;border-radius:11px;padding:13px 14px}
.comment-form .form-submit{margin:0}

/* ---------------------------------------------------------- search ------ */
.search-form{display:flex;gap:10px;flex-wrap:wrap}
.search-field{flex:1;min-width:200px;border:1px solid #ccd8e0;border-radius:11px;padding:13px 14px}
.search-again,.error-search{margin-top:24px;max-width:520px}
.no-results{background:var(--paper);border-radius:var(--radius);padding:34px;text-align:center}
.no-results h2{color:var(--navy);margin-top:0}
.no-results-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ----------------------------------------------------------- contact ---- */
.contact-section{padding:60px 0 20px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.contact-card{
	display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	padding:26px;text-decoration:none;transition:.25s ease
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfdae3}
.contact-card-icon{width:46px;height:46px;border-radius:14px;background:var(--paper);display:grid;place-items:center;color:var(--orange)}
.contact-card-icon svg{width:22px;height:22px}
.contact-card-label{font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--orange)}
.contact-card strong{color:var(--navy);font-size:1.02rem;line-height:1.45}
.contact-content{padding:26px 0}
.contact-form-section{padding:52px 0}
.contact-form-card{
	display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;
	background:var(--paper);border-radius:var(--radius);padding:38px
}
.contact-form-copy h2{color:var(--navy);font-size:1.9rem;letter-spacing:-.03em;margin:10px 0 12px}
.contact-form-copy p{color:var(--muted);margin:0 0 22px}
.contact-form-actions{display:flex;gap:12px;flex-wrap:wrap}
.contact-form-body .boatpro-form{background:#fff;border-radius:18px;padding:24px}
.contact-form-body .form-foot{align-items:center;gap:14px}
.contact-map-section{padding:0 0 70px}
.contact-map{width:100%;height:420px;border:0;border-radius:var(--radius);display:block}

/* ------------------------------------------------------- work detail ---- */
.work-detail-body{padding:46px 0 30px}
.work-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start}
.work-detail-media .ba-comparison{aspect-ratio:16/10}
.work-detail-side{display:grid;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.work-detail-side .work-details{grid-template-columns:1fr}
.work-detail-actions{display:flex;gap:12px;flex-wrap:wrap}
.work-service-card{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;font-weight:800;color:var(--navy)
}
.work-service-card:hover{border-color:var(--orange);color:var(--orange)}
.work-related{padding-top:20px}

/* -------------------------------------------------------- footer bits --- */
.footer-widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:40px 0 10px}
.footer-widgets .widget{background:transparent;border:0;padding:0;color:#c9d6e0}
.footer-widgets .widget-title{color:#fff}
.footer-widgets a{color:#c9d6e0}
.footer-legal{margin-left:auto}
.footer-legal-menu{display:flex;gap:16px;list-style:none;margin:0;padding:0;font-size:.8rem}
.footer-legal-menu a{text-decoration:none;color:inherit;opacity:.85}
.footer-legal-menu a:hover{opacity:1;color:#fff}

/* ------------------------------------------------------------ forms ----- */
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--muted);font-weight:600;line-height:1.45}
.form-consent input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin-top:2px;border-radius:5px;padding:0}
.field.has-error input,.field.has-error textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.form-status{margin:12px 0 0;font-size:.85rem;font-weight:700}
.form-status.is-error{color:#b03a2e}
.modal-card .success{margin:22px 32px 30px}
.btn.is-busy{opacity:.72;pointer-events:none}
.btn.is-busy .icon{animation:boatproSpin 1s linear infinite}
@keyframes boatproSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.language-current-flag.flag-fallback,.language-menu .flag-fallback{background:#dfe5ea}
.language-menu .lang-btn span{white-space:nowrap}

/* Hide the plain text status line when the design conversation is used. */
.form-status:empty{display:none}

/* --------------------------------------------------------- takeover ----- */
.error-hero{padding-bottom:80px}
.error-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ------------------------------------------------------ responsive ------ */
@media (max-width:1100px){
	.blog-layout{grid-template-columns:minmax(0,1fr);gap:34px}
	.blog-sidebar{position:static}
	.contact-grid{grid-template-columns:repeat(2,1fr)}
	.work-detail-grid{grid-template-columns:minmax(0,1fr)}
	.footer-widgets{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
	.post-grid,.contact-grid,.contact-form-card{grid-template-columns:1fr}
	.post-nav{grid-template-columns:1fr}
	.post-nav-link.next{text-align:left}
	.contact-form-card{padding:24px}
	.alignleft,.alignright{float:none;margin:0 0 14px}
	.page-layout{padding:38px 0 54px}
	.blog-hero{padding:40px 0 44px;margin-bottom:30px}
	.contact-map{height:320px}
	.modal-card .success{margin:18px 22px 24px}
}
/* Promo modal: what the free diagnostic covers. */
.promo-list{margin:18px 0 22px}
.promo-modal .mini-item{color:#344958}
.promo-modal .mini-list{grid-template-columns:1fr}

/* Contact links on the "Contact us" process step. */
.process-actions{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px}
.process-action{display:inline-flex;align-items:center;gap:8px;color:inherit;font-weight:700;font-size:.95rem;opacity:.85;text-decoration:none;transition:opacity .18s ease,color .18s ease}
.process-action:hover{opacity:1;color:var(--orange)}
.process-action .icon{width:18px;height:18px}

/* Portfolio listing: two projects per row, like the original design. */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
@media (max-width:980px){.portfolio-grid{grid-template-columns:1fr}}

/* Card titles are links, but the design keeps them looking like headings. */
.work-card h3 a,
.service h3 a,
.post-card h3 a{color:inherit;text-decoration:none}
.work-card h3 a:hover,
.service h3 a:hover,
.post-card h3 a:hover{color:var(--orange)}
/* ---------------------------------------------------------------------------
   "View all work" under the work cards on the front page: the same red pill as
   the button in the header, centred.
   --------------------------------------------------------------------------- */

.work-actions{
  display:flex;
  justify-content:center;
  margin-top:46px;
}

.work-actions .btn{
  min-height:48px;
  padding:0 26px;
  border-radius:999px;
}

/* Flags of the translation plugin that the theme fills in with its own images
   (the plugin has no drawing for every country, and Windows prints "HR" instead
   of the flag emoji). Same size as the flags the plugin draws itself. */
.wptm-flag-image{
  display:inline-flex;
  align-items:center;
}
.wptm-flag-image img{
  display:block;
  width:1.15em;
  height:auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(16,32,47,.12);
}