/*
Theme Name: Red 14 Plastics
Theme URI: https://red14plastics.com/
Author: Red 14 Plastics Ltd
Description: Rebuild of the Red 14 Plastics website. On activation it creates the Home, Services, Boat Screens & Tanks, Projects and Contact pages with the original content, sets up the menu and makes Home the front page. All text and images are editable under Pages. Phone numbers, email, address and homepage video are under Appearance > Customize > Red 14 Details.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: red14
*/

:root {
  --r14-red: #c21e25;
  --r14-red-dark: #a80000;
  --r14-bright: #ed1c24;
  --r14-text: #626262;
  --r14-heading: #c21e25;
  --r14-light: #f7f7f7;
  --r14-footer: #2b2b2b;
  --r14-wrap: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--r14-text);
  background: #fff;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--r14-red); text-decoration: none; }
a:hover { color: var(--r14-red-dark); }
h1, h2, h3, h4, h5, h6 { color: var(--r14-heading); font-weight: 300; line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: 64px; }
h2 { font-size: 44px; }
h3 { font-size: 30px; }
h4 { font-size: 22px; font-weight: 400; }
h6 { font-size: 26px; font-weight: 400; color: var(--r14-red-dark); }
.r14-wrap { max-width: var(--r14-wrap); margin: 0 auto; padding: 0 20px; }

/* Top bar */
.r14-topbar { background: #fff; font-size: 16px; }
.r14-topbar .r14-wrap { display: flex; align-items: center; gap: 22px; min-height: 44px; flex-wrap: wrap; }
.r14-topbar .r14-tag { color: #555; }
.r14-topbar a { display: inline-flex; gap: 6px; align-items: center; }
.r14-topbar .r14-social { margin-left: auto; color: #555; }

/* Header */
.r14-header { background: var(--r14-red); }
.r14-header .r14-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 120px; }
.r14-logo img { width: 95px; height: auto; }
.r14-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.r14-nav li { position: relative; }
.r14-nav a { display: block; color: #fff; font-size: 18px; padding: 14px 12px; border-bottom: 3px solid transparent; }
.r14-nav a:hover, .r14-nav .current-menu-item > a, .r14-nav .current_page_item > a { color: #fff; border-bottom-color: #fff; }
.r14-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 230px; box-shadow: 0 6px 18px rgba(0,0,0,.12); flex-direction: column; gap: 0; z-index: 20; }
.r14-nav li:hover > .sub-menu { display: flex; }
.r14-nav .sub-menu a { color: #444; font-size: 15px; border: 0; }
.r14-nav .sub-menu a:hover { background: var(--r14-light); color: var(--r14-red); }
.r14-burger { display: none; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; }

/* Front page hero */
.r14-hero { background: var(--r14-light); padding: 40px 0 70px; }
.r14-hero .r14-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.r14-hero h1 { text-align: center; margin-top: 10px; }
.r14-hero h1 strong { font-weight: 700; }
.r14-hero .r14-icons { margin: 40px auto 0; max-width: 500px; }
.r14-hero video { width: 100%; max-width: 420px; background: #000; }

/* Content */
.r14-content { padding: 60px 0; }
.r14-content .wp-block-columns { gap: 30px; }
.r14-content p { margin: 0 0 1.1em; }
.r14-content hr, .r14-content .wp-block-separator { border: 0; border-top: 1px solid #e5e5e5; margin: 20px 0; }
.r14-page-title { background: var(--r14-light); padding: 40px 0; }
.r14-page-title h1 { font-size: 48px; margin: 0; }

.r14-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.r14-cards figure { margin: 0; }
.r14-cards h4 { margin-top: 14px; text-align: center; }

.r14-btn, .wp-block-button__link {
  display: inline-block; background: var(--r14-red); color: #fff !important; padding: 10px 22px;
  border-radius: 3px; font-size: 16px; border: 0; cursor: pointer; font-family: inherit;
}
.r14-btn:hover, .wp-block-button__link:hover { background: var(--r14-red-dark); }

.r14-service { padding: 30px 0; border-bottom: 1px solid #eee; }

.r14-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.r14-projects figure { margin: 0; background: var(--r14-light); }
.r14-projects img { width: 100%; aspect-ratio: 960/750; object-fit: cover; }
.r14-projects figcaption { padding: 12px 14px; color: #333; font-size: 17px; text-align: center; }
.r14-noimg { aspect-ratio: 960/750; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; background: #ececec; }

/* Contact form */
.r14-form { display: grid; gap: 14px; max-width: 640px; }
.r14-form input, .r14-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; font: inherit; color: #333; }
.r14-form textarea { min-height: 150px; }
.r14-form .r14-hp { position: absolute; left: -9999px; }
.r14-notice { padding: 12px 16px; margin-bottom: 16px; background: #eef8ee; color: #256029; }
.r14-notice.err { background: #fdeeee; color: #8a1c1c; }

/* Footer */
.r14-footer { background: var(--r14-red); color: #fff; padding: 50px 0 20px; }
.r14-footer h4 { color: #fff; }
.r14-footer a { color: #fff; }
.r14-footer ul { list-style: none; padding: 0; margin: 0; }
.r14-footer li { margin-bottom: 6px; }
.r14-footer .r14-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.r14-footer .r14-btn-white { background: #fff; color: var(--r14-red-dark) !important; }
.r14-copy { border-top: 1px solid rgba(255,255,255,.25); margin-top: 30px; padding-top: 16px; font-size: 14px; }

/* Cookie bar */
.r14-cookie { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.1); padding: 14px 20px; text-align: center; z-index: 50; display: none; }
.r14-cookie button { margin-left: 10px; background: var(--r14-bright); color: #fff; border: 0; padding: 6px 12px; cursor: pointer; }

@media (max-width: 900px) {
  h1 { font-size: 42px; } h2 { font-size: 34px; }
  .r14-hero .r14-wrap, .r14-cards, .r14-projects, .r14-footer .r14-cols { grid-template-columns: 1fr; }
  .r14-burger { display: block; }
  .r14-nav { display: none; position: absolute; top: 164px; left: 0; right: 0; background: var(--r14-red); z-index: 30; }
  .r14-nav.open { display: block; }
  .r14-nav ul { flex-direction: column; padding: 10px 20px; }
  .r14-nav .sub-menu { position: static; display: flex; background: transparent; box-shadow: none; }
  .r14-nav .sub-menu a { color: #fff; }
}