/*
 * Voip4all theme for Grav.
 * Rebuilt from the Genesis "Executive Pro" child theme used on the WordPress site:
 * same palette, font, widths and component styling, with flex/grid instead of floats.
 */

@font-face {
    font-family: 'opensans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --voip4all-navy: #1e326f;
    --voip4all-navy-hover: #27408f;
    --voip4all-navy-translucent: rgba(30, 50, 111, 0.9);
    --voip4all-green: #00971d;
    --voip4all-green-dark: #004b0e;
    --voip4all-page-background: #f2f2f2;
    --voip4all-text: #222;
    --voip4all-heading: #333;
    --voip4all-content-width: 1140px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--voip4all-page-background);
    color: var(--voip4all-text);
    font-family: opensans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--voip4all-navy); text-decoration: none; transition: all .1s ease-in-out; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; border: 0; }

p { margin: 0 0 24px; padding: 0; }

h1, h2, h3, h4, h5, h6 {
    color: var(--voip4all-heading);
    font-family: opensans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    padding: 0;
}
h1 { font-size: 38px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }

.wrap { max-width: var(--voip4all-content-width); margin: 0 auto; }

/* ---------- Buttons ---------- */

a.cta-button,
.form-wrapper .buttons .button,
.form-wrapper button[type="submit"] {
    display: inline-block;
    background: linear-gradient(var(--voip4all-green), var(--voip4all-green-dark));
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
}
a.cta-button:hover,
.form-wrapper .buttons .button:hover,
.form-wrapper button[type="submit"]:hover {
    background: linear-gradient(#00a820, #005c11);
    color: #fff;
    text-decoration: none;
}

/* ---------- Checklist ---------- */

ul.checklist { margin: 0; padding: 0; }
ul.checklist li,
.entry-content ul.checklist li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 30px;
    position: relative;
}
ul.checklist li::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: -5px;
    color: var(--voip4all-green);
    font-size: 20px;
}
ul.checklist li p { display: inline; margin: 0; }

/* ---------- Top bar ---------- */

.before-header {
    background-color: var(--voip4all-navy);
    color: #fff;
    padding: 5px 16px;
}
.before-header .wrap { text-align: right; }
.before-header a { color: #fff; }
.before-header .fa { font-size: 20px; margin: 0 10px 0 30px; vertical-align: -2px; }

/* ---------- Header and menu ---------- */

.site-header { background-color: #fff; }
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 16px;
}
.site-title { margin: 0; line-height: 0; }
.site-title img { display: block; margin: 10px 0; }

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--voip4all-navy);
    cursor: pointer;
    font-size: 20px;
    padding: 10px;
}

.nav-header .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav-header .menu-item { margin: 0; padding: 0; }
.nav-header .menu-item a {
    display: block;
    color: #000;
    padding: 38px 12px 40px;
    line-height: 1.5;
}
.nav-header .menu-item:last-child a { padding-right: 0; }
.nav-header .menu-item a:hover { color: var(--voip4all-navy); text-decoration: none; }
.nav-header .current-menu-item > a { color: var(--voip4all-navy); font-weight: bold; }

/* ---------- Messages ---------- */

.site-messages { max-width: var(--voip4all-content-width); margin: 20px auto 0; }
.site-message { background: #fff; border-left: 4px solid var(--voip4all-navy); padding: 12px 20px; margin-bottom: 10px; }
.site-message-error { border-left-color: #d03343; }

/* ---------- Page layout (content + sidebar) ---------- */

.site-inner {
    max-width: var(--voip4all-content-width);
    margin: 0 auto;
    clear: both;
}

.content-sidebar .site-inner { padding-top: 20px; }

.content-sidebar-wrap {
    display: grid;
    grid-template-columns: minmax(0, 780px) 340px;
    gap: 20px;
    padding-bottom: 20px;
}

.content .entry {
    background-color: #fff;
    padding: 40px 60px;
    margin: 0 0 2em;
}

.entry-title { font-size: 42px; line-height: 1; margin-bottom: 20px; }
.entry-title a { color: var(--voip4all-heading); }
.entry-title a:hover { color: var(--voip4all-navy-hover); text-decoration: none; }

.entry-meta { color: #777; font-size: 12px; text-transform: uppercase; margin: -10px 0 24px; }
.entry-back { margin: 0; }

.entry-content::after { content: ""; display: table; clear: both; }
.entry-content ol,
.entry-content p,
.entry-content ul { margin-bottom: 26px; padding: 0; }
.entry-content ol li,
.entry-content ul li { margin-left: 40px; }
.entry-content ol > li { list-style-type: decimal; }
.entry-content ul > li { list-style-type: disc; }
.entry-content ol ol,
.entry-content ul ul { margin-bottom: 0; }
.entry-content h2 { font-size: 30px; }
.entry-content h3 { font-size: 24px; }
.entry-content h4 { font-size: 20px; }

.alignright { float: right; margin: 0 0 24px 24px; }
.alignleft { float: left; margin: 0 24px 12px 0; }
.aligncenter { display: block; clear: both; margin: 0 auto 24px; }

/* FAQ */
.faq-index { margin-bottom: 30px; }
.faq-item h4 .fa { color: var(--voip4all-navy); margin-right: 6px; }
.faq-item { margin-bottom: 30px; }
.faq-item .faq-top { font-size: 14px; }

/* Contact details on the contact page */
.contact-list { list-style: none; }
.entry-content .contact-list li { list-style: none; margin-left: 0; }
.contact-list .fa { color: var(--voip4all-green); width: 24px; }

.map-embed iframe { display: block; width: 100%; height: 220px; border: 0; }
.entry-content .map-embed { max-width: 300px; margin-bottom: 26px; }

/* ---------- After-entry contact box ---------- */

.after-entry {
    background-color: #fff;
    border: 2px solid #ccc;
    color: var(--voip4all-navy);
    margin: 0 0 20px;
    text-align: center;
}
.after-entry-title {
    background-color: var(--voip4all-navy);
    color: #fff;
    font-size: 30px;
    margin: 0;
    padding: 20px 20px 10px;
}
.after-entry-intro {
    background-color: var(--voip4all-navy);
    color: #fff;
    padding: 0 20px 20px;
}
.after-entry-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 30px; gap: 20px; }
.after-entry-action { color: var(--voip4all-navy); font-size: 20px; overflow-wrap: anywhere; }
.after-entry-action:hover { text-decoration: none; color: var(--voip4all-navy-hover); }
.after-entry-action .fa { color: var(--voip4all-green); display: block; font-size: 60px; margin-bottom: 6px; }

/* ---------- Sidebar ---------- */

.sidebar .widget {
    background-color: #fff;
    margin: 0 0 20px;
    padding: 30px 40px;
    overflow-wrap: break-word;
}
.widget-title { font-size: 16px; text-transform: uppercase; margin-bottom: 20px; }
.sidebar .widget-title {
    background-color: var(--voip4all-navy);
    color: #fff;
    margin: -30px -40px 20px;
    padding: 15px 40px;
}
.sidebar ul { margin: 0; padding: 0; }
.sidebar li { margin-bottom: 6px; padding-bottom: 6px; }
.widget-news-item { margin-bottom: 16px; }
.widget-news-title { font-size: 16px; margin-bottom: 6px; }
.widget-news-title a { color: var(--voip4all-heading); }
.widget-news-item p { margin-bottom: 0; }
.more-from-category { margin: 10px 0 0; }
.more-from-category a {
    background: url(../images/icon-li.png) no-repeat 0 7px;
    background-size: 8px 8px;
    padding-left: 16px;
}

/* ---------- News archive ---------- */

.archive-description { background-color: #fff; padding: 40px 60px 10px; margin-bottom: 20px; }
.archive-title { text-transform: none; font-size: 30px; }

.archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.content .archive-entry {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 480px;
    padding: 40px;
}
.archive-entry .entry-title { font-size: 24px; line-height: 1.2; }
.archive-entry .entry-content { flex: 1; }
.archive-entry .entry-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    margin: 0 0 10px;
}
.archive-entry .entry-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px dotted #ddd;
    padding-top: 10px;
    font-size: 14px;
}
.archive-entry .entry-footer time { color: var(--voip4all-navy); }

.archive-pagination { padding: 20px 0; }
.archive-pagination ul { list-style: none; margin: 0; padding: 0; }
.archive-pagination li { display: inline; }
.archive-pagination li a {
    background-color: var(--voip4all-navy);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 2;
    margin-bottom: 4px;
    padding: 8px 20px;
    text-transform: uppercase;
}
.archive-pagination li a:hover,
.archive-pagination li.active a { background-color: var(--voip4all-navy-hover); text-decoration: none; }

/* ---------- Home ---------- */

.home .site-inner { background-color: #fff; }

.home-slider {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 40%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}
.home-slider-widget {
    background-color: var(--voip4all-navy-translucent);
    color: #fff;
    max-width: 325px;
    padding: 40px;
}
.home-slider-widget .widget-title { color: #fff; }
.home-slider-text p { margin-bottom: 16px; }
.home-slider-widget a { color: #fff; text-decoration: underline; }

.home-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 5.6%;
    padding: 60px 50px 20px;
}
.home-service { display: flex; flex-direction: column; margin-bottom: 40px; }
.home-service .entry-image { display: block; width: 100%; margin-bottom: 10px; }
.home-service p { margin: 0; }
.home-service .more-link { display: block; margin-top: 30px; }

.home-cta {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    color: #ddd;
    padding: 40px 60px;
}
.home-cta .widget-title { color: #fff; font-size: 24px; margin-bottom: 6px; text-transform: none; }
.home-cta-body { display: flex; align-items: center; gap: 30px; }
.home-cta-text { flex: 1; }
.home-cta-text p { margin: 0; color: #ddd; }

.home-middle {
    display: grid;
    grid-template-columns: 65.8% 31.6%;
    gap: 2.6%;
    padding: 60px;
}
.home-middle .widget-title { text-transform: none; }
.home-middle-checklist .checklist li { margin-bottom: 6px; }

.home-bottom { padding: 40px 60px; border-top: 3px solid var(--voip4all-page-background); }

.home-news { padding: 40px 60px; border-top: 3px solid var(--voip4all-page-background); }
.home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6%; }
.home-news-item .entry-image {
    display: block;
    width: 100%;
    aspect-ratio: 300 / 135;
    object-fit: cover;
    margin-bottom: 16px;
}
.home-news-item .entry-title { font-size: 18px; }
.home-news .more-from-category a {
    background: linear-gradient(var(--voip4all-green), var(--voip4all-green-dark));
    padding: 10px 20px;
}

/* ---------- Forms (Grav form plugin) ---------- */

.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper input[type="tel"],
.form-wrapper textarea {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: 1px 1px 3px #eee inset;
    color: #222;
    font-family: inherit;
    font-size: 16px;
    padding: 16px;
    width: 100%;
}
.form-wrapper input:focus,
.form-wrapper textarea:focus { border: 1px solid #999; outline: 0; }
.form-wrapper textarea { min-height: 160px; }
.form-wrapper .form-field { margin-bottom: 16px; }
.form-wrapper .form-label label { font-weight: 700; }
.form-wrapper .required { color: #790000; }
.form-wrapper .form-input-wrapper label.inline { font-size: 14px; }
.form-wrapper .buttons { margin-top: 10px; }

.home-slider-widget .form-wrapper .form-field { margin-bottom: 10px; }
.home-slider-widget .form-wrapper input[type="text"],
.home-slider-widget .form-wrapper input[type="email"],
.home-slider-widget .form-wrapper input[type="tel"] { border-radius: 5px; padding: 10px; }
.home-slider-widget .form-wrapper .form-input-wrapper label.inline { color: #fff; font-size: 13px; }
.home-slider-widget .form-wrapper .buttons .button { width: 100%; padding: 12px 0; }

/* ---------- Footer ---------- */

.footer-widgets {
    background-color: var(--voip4all-navy);
    color: #fff;
    max-width: var(--voip4all-content-width);
    margin: 0 auto;
}
.footer-widgets .wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 5.6%;
    padding: 3em 30px 1em;
}
.footer-widget { margin-bottom: 30px; overflow-wrap: break-word; }
.footer-widgets .widget-title { color: #fff; }
.footer-widgets a { color: #fff; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-contact-links { margin-top: 24px !important; }
.footer-contact-links .fa { font-size: 20px; margin: 0 15px 0 0; width: 20px; }

.site-footer {
    background-color: #fff;
    color: var(--voip4all-navy);
    font-size: 11px;
    max-width: var(--voip4all-content-width);
    margin: 0 auto;
    padding: 10px 16px;
    text-align: center;
    text-transform: uppercase;
}
.site-footer a { color: var(--voip4all-navy); }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 1024px) {
    .before-header .wrap { text-align: center; }
    .site-header .wrap { justify-content: center; }
    .nav-header { width: 100%; }
    .nav-header .menu { justify-content: center; }
    .nav-header .menu-item a,
    .nav-header .menu-item:last-child a { padding: 16px; }

    .site-inner { max-width: 768px; }
    .content-sidebar-wrap { grid-template-columns: minmax(0, 1fr); }
    .footer-widgets, .site-footer { max-width: 768px; }

    .home-top { grid-template-columns: 1fr 1fr; }
    .home-cta-body { flex-direction: column; align-items: stretch; }
    .home-middle { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 768px) {
    .before-header-item { display: block; margin-bottom: 5px; }
    .before-header .fa { margin-left: 0; }

    .site-header .wrap { justify-content: space-between; }
    .menu-toggle { display: block; }
    .nav-header { display: none; }
    .nav-header.is-open { display: block; }
    .nav-header .menu { flex-direction: column; }
    .nav-header .menu-item a,
    .nav-header .menu-item:last-child a { padding: 16px; border-top: 1px solid #f2f2f2; }

    .content .entry { padding: 40px 30px 10px; }
    .archive-description { padding: 30px 30px 10px; }
    .archive-grid { grid-template-columns: 1fr; }
    .content .archive-entry { min-height: 0; }

    .home-slider { justify-content: stretch; }
    .home-slider-widget { max-width: none; width: 100%; }
    .home-top { padding: 40px 30px 0; }
    .home-middle, .home-bottom, .home-news, .home-cta { padding: 30px; }
    .home-news-grid { grid-template-columns: 1fr; gap: 30px; }
    .home-bottom a.cta-button, .home-cta a.cta-button { display: block; }

    .footer-widgets .wrap { grid-template-columns: 1fr; }
    .after-entry-actions { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 425px) {
    .home-top { grid-template-columns: 1fr; }
    .alignright, .alignleft { float: none; margin: 0 0 24px; }
    .entry-title { font-size: 32px; }
}