/*
Theme Name: Multi-Page Custom Website
Theme URI: https://theictshak.com/
Author: THEICTSHAK
Author URI: https://theictshak.com/
Description: A custom multi-page block theme with responsive desktop/tablet/mobile menus and custom patterns.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: multi-page-custom-website
*/

/* ==========================================================================
   BASE RESET & TYPOGRAPHY
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
  color: #03002e;
  line-height: 1.6;
}

/* ==========================================================================
   COLOR VARIABLES
   ========================================================================== */

:root {
  --color-primary: #03002e;
  --color-secondary: #d31709;
  --color-tertiary: #0088ee;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light: #f8f8f8;

  --mq-tablet: 600px;
  --mq-desktop: 960px;

  --spacing-s: 0.75rem;
  --spacing-m: 1.25rem;
  --spacing-l: 2rem;
  --spacing-xl: 3rem;
}

/* ==========================================================================
   GLOBAL ELEMENT SPACING
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ==========================================================================
   HEADER + FOOTER LAYOUT
   ========================================================================== */

.site-header,
.site-footer {
  width: 100%;
}

.site-header-inner,
.site-footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  padding-left: var(--spacing-m);
  padding-right: var(--spacing-m);
}

/* ==========================================================================
   RESPONSIVE NAVIGATION VISIBILITY (FINAL VERSION)
   ========================================================================== */

/* --- DEFAULT: MOBILE FIRST --- */

.site-header .nav-desktop,
.site-footer .nav-desktop,
.site-header .nav-tablet,
.site-footer .nav-tablet {
  display: none !important;
}

.site-header .nav-mobile,
.site-footer .nav-mobile {
  display: block !important;
}

/* --- TABLET ≥ 600px --- */

@media (min-width: 600px) {
  .site-header .nav-mobile,
  .site-footer .nav-mobile {
    display: none !important;
  }
  .site-header .nav-tablet,
  .site-footer .nav-tablet {
    display: block !important;
  }
}

/* --- DESKTOP ≥ 960px --- */

@media (min-width: 960px) {
  .site-header .nav-mobile,
  .site-footer .nav-mobile,
  .site-header .nav-tablet,
  .site-footer .nav-tablet {
    display: none !important;
  }
  .site-header .nav-desktop,
  .site-footer .nav-desktop {
    display: block !important;
  }
}

/* ==========================================================================
   NAVIGATION (DESKTOP/TABLET) — KEEP HORIZONTAL
   ========================================================================== */

.nav-desktop .wp-block-navigation__container,
.nav-tablet .wp-block-navigation__container {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.25rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wp-block-button__link {
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 500;
}

.is-style-cta-secondary .wp-block-button__link {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.is-style-cta-secondary .wp-block-button__link:hover {
  filter: brightness(1.1);
}

/* ==========================================================================
   COVER BLOCK REFINEMENTS
   ========================================================================== */

.wp-block-cover {
  position: relative;
}

.wp-block-cover__inner-container {
  text-align: center;
}

/* ==========================================================================
   MEDIA-TEXT PATTERN TWEAKS
   ========================================================================== */

.wp-block-media-text {
  gap: 2rem;
}

.wp-block-media-text__content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-center {
  text-align: center;
}

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-tertiary { background-color: var(--color-tertiary); }

.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }

.padding-s { padding: var(--spacing-s); }
.padding-m { padding: var(--spacing-m); }
.padding-l { padding: var(--spacing-l); }
.padding-xl { padding: var(--spacing-xl); }

/* ==========================================================================
   END OF THEME
   ========================================================================== */

/* Extra Code */
/* Remove extra margin between content and footer */
.site-header,
.site-footer {
    margin: 0 !important;
}

/* Remove theme-generated spacing between groups */
.site-header + .wp-block-group,
.wp-block-group + .site-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}