/*
Theme Name: exakt Theme Travel
Theme URI: https://exakt.co.za/themes/exakt-theme-travel
Author: exakt
Author URI: https://exakt.co.za
Description: A reusable website theme for tour operators, dive & travel specialists and destination management companies. Every operator detail - company name, owner, phone, WhatsApp, email, address, opening hours and social links - is entered once in the Customizer and pulled onto the pages by [travel_*] shortcodes, so the same theme can be reused for the next operator without editing a single page. Elementor-first, WooCommerce-free, with a page-bundle importer that builds the whole site in one action.
Version: 1.0.1
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: exakt-theme-travel
Tags: custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready

exakt Theme Travel WordPress Theme, (C) 2026 exakt
exakt Theme Travel is distributed under the terms of the GNU GPL.

All colours, fonts and operator details are controlled via
Customizer > exakt Travel Theme. Pages must NEVER hardcode a phone
number, email or address - use the [travel_*] shortcodes.

This file is the BASE LAYER only: reset, typography, WordPress core
classes and form/table defaults. Every theme component (header, nav,
buttons, footer, contact blocks) lives in assets/css/theme.css, which
is enqueued after this file.
*/

/* ══════════════════════════════════════════════════════════════════
   BASE RESET
   ══════════════════════════════════════════════════════════════════ */

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

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--t-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--t-font-size-body, 17px);
    line-height: 1.65;
    color: var(--t-text, #3B3C38);
    background: var(--t-bg, #FFFFFF);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--t-font-heading, sans-serif);
    color: var(--t-heading, #123244);
    font-weight: 600;
    line-height: 1.22;
    margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.05rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; }

p {
    margin: 0 0 1.15em;
}

a {
    color: var(--t-primary, #00A9BD);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--t-primary-dark, #00879A);
}

strong, b {
    font-weight: 700;
}

small {
    font-size: 0.85em;
}

blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--t-primary, #00A9BD);
    color: var(--t-muted, #6B7A85);
    font-size: 1.06em;
}

blockquote p:last-child {
    margin-bottom: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--t-border, #D9E3E9);
    margin: 2.2em 0;
}

ul, ol {
    margin: 0 0 1.15em;
    padding-left: 1.35em;
}

li {
    margin-bottom: 0.4em;
}

code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

code {
    background: var(--t-surface, #EFF4F7);
    padding: 2px 6px;
    border-radius: 4px;
}

pre {
    background: var(--t-surface, #EFF4F7);
    padding: 16px 18px;
    border-radius: 8px;
    overflow-x: auto;
}

/* ══════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--t-text, #3B3C38);
    background: #fff;
    border: 1px solid var(--t-border, #D9E3E9);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--t-primary, #00A9BD);
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 0, 169, 189), 0.16);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--t-heading, #123244);
}

button,
input[type="submit"] {
    font-family: var(--t-font-heading, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 12px 24px;
    color: var(--t-btn-text, #fff);
    background: var(--t-btn-bg, #00A9BD);
    border: 2px solid var(--t-btn-bg, #00A9BD);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
    background: var(--t-btn-bg-hover, #00879A);
    border-color: var(--t-btn-bg-hover, #00879A);
}

/* ══════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
}

th, td {
    padding: 11px 13px;
    border: 1px solid var(--t-border, #D9E3E9);
    text-align: left;
}

th {
    background: var(--t-surface, #EFF4F7);
    font-family: var(--t-font-heading, sans-serif);
    font-weight: 600;
    color: var(--t-heading, #123244);
}

/* Long tables (booking terms, price lists) must scroll rather than
   force the page body to scroll sideways on a phone. */
.t-table-scroll {
    overflow-x: auto;
}

/* ══════════════════════════════════════════════════════════════════
   WORDPRESS CORE CLASSES
   ══════════════════════════════════════════════════════════════════ */

.alignleft {
    float: left;
    margin: 0.4em 1.5em 1em 0;
}

.alignright {
    float: right;
    margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
    display: block;
    margin: 0.6em auto 1.4em;
}

.alignwide,
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: auto;
}

.alignfull img {
    width: 100vw;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
    font-size: 0.85rem;
    color: var(--t-muted, #6B7A85);
    text-align: center;
    padding-top: 8px;
}

.sticky,
.bypostauthor {
    /* Declared for theme-check; styling is handled by the post card. */
    display: block;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.5em;
}

.gallery-item {
    flex: 1 1 180px;
    margin: 0;
}

.gallery-item img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   COMMENTS
   ══════════════════════════════════════════════════════════════════ */

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
}

.comment-list .children {
    list-style: none;
    padding-left: 24px;
}

.comment-body {
    padding: 16px 0;
    border-bottom: 1px solid var(--t-border, #D9E3E9);
}

.comment-author img {
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 9px;
}

.comment-metadata {
    font-size: 0.82rem;
    color: var(--t-muted, #6B7A85);
}

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════ */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--t-primary, #00A9BD);
    outline-offset: 2px;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}