/*
Theme Name: Daniele Manca Theme
Theme URI: https://danielemanca.co.uk
Author: Daniele Manca
Author URI: https://danielemanca.co.uk
Description: Business-first website strategy — strategic design & development for professional service firms and e-commerce businesses.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daniele-manca-theme
Tags: full-site-editing, block-theme
*/

/* =============================================
   DESIGN TOKENS — mirrors theme.json values
   ============================================= */
:root {
  --bg-color: #000000;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --border-color: rgba(255, 255, 255, 0.1);
  --accent-color: #ffffff;
  --color-accent-green: #4ade80;
  --fluid-9:    clamp(0.5625rem,  0.55rem  + 0.05vw, 0.59375rem);
  --fluid-9-5:  clamp(0.59375rem, 0.58rem  + 0.06vw, 0.625rem);
  --fluid-10:   clamp(0.625rem,   0.61rem  + 0.08vw, 0.6875rem);
  --fluid-11:   clamp(0.6875rem,  0.67rem  + 0.1vw,  0.75rem);
  --fluid-xs:   clamp(0.75rem,    0.73rem  + 0.1vw,  0.8125rem);
  --fluid-sm:   clamp(0.875rem,   0.84rem  + 0.16vw, 0.9375rem);
  --fluid-base: clamp(1rem,       0.97rem  + 0.16vw, 1.0625rem);
  --fluid-lg:   clamp(1.125rem,   1.08rem  + 0.22vw, 1.25rem);
  --fluid-xl:   clamp(1.25rem,    1.17rem  + 0.38vw, 1.5rem);
  --fluid-2xl:  clamp(1.5rem,     1.37rem  + 0.62vw, 1.875rem);
  --fluid-3xl:  clamp(1.875rem,   1.66rem  + 1.04vw, 2.5rem);
  --fluid-4xl:  clamp(2.125rem,   1.87rem  + 1.24vw, 2.875rem);
  --fluid-5xl:  clamp(2.5rem,     2.16rem  + 1.64vw, 3.5rem);
  --fluid-6xl:  clamp(2.875rem,   2.45rem  + 2.06vw, 4.125rem);
  --fluid-7xl:  clamp(3.25rem,    2.72rem  + 2.58vw, 4.8125rem);
  --fluid-8xl:  clamp(3.75rem,    3.1rem   + 3.12vw, 5.75rem);
  --fluid-lg-xl:    clamp(1.125rem, 1.01rem + 0.56vw, 1.5rem);
  --fluid-xl-2xl:   clamp(1.25rem,  1.1rem  + 0.72vw, 1.75rem);
  --fluid-3xl-4xl:  clamp(1.875rem, 1.62rem + 1.24vw, 2.75rem);
  --fluid-4xl-5xl:  clamp(2.125rem, 1.83rem + 1.44vw, 3.125rem);
  --fluid-3xl-5xl:  clamp(1.875rem, 1.53rem + 1.68vw, 3rem);
  --fluid-4xl-6xl:  clamp(2.125rem, 1.71rem + 2vw,    3.5rem);
  --fluid-5xl-7xl:  clamp(2.5rem,   2rem    + 2.4vw,  4.1875rem);
  --fluid-3xl-4xl-5xl: clamp(1.875rem, 1.56rem + 1.52vw, 3rem);
  --fluid-3xl-4xl-6xl: clamp(1.875rem, 1.48rem + 1.92vw, 3.375rem);
  --fluid-3xl-5xl-6xl: clamp(1.875rem, 1.42rem + 2.2vw,  3.5rem);
  --fluid-4xl-6xl-7xl: clamp(2.125rem, 1.55rem + 2.76vw, 4.25rem);
}

/* =============================================
   BASE
   ============================================= */
body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: var(--fluid-base);
  font-weight: 400;
  overflow-x: hidden;
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
.nav-link, .mobile-nav-link,
button, .btn, .btn-primary,
input[type="submit"], input[type="button"],
.mobile-nav-btn,
.desktop-nav a[href*="book-strategy-call"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

/* =============================================
   FLUID TYPOGRAPHY OVERRIDES
   ============================================= */
.text-\[9px\]    { font-size: var(--fluid-9)    !important; }
.text-\[9\.5px\] { font-size: var(--fluid-9-5)  !important; }
.text-\[10px\]   { font-size: var(--fluid-10)   !important; }
.text-\[11px\]   { font-size: var(--fluid-11)   !important; }
.text-xs         { font-size: var(--fluid-xs)   !important; }
.text-sm         { font-size: var(--fluid-sm)   !important; }
.text-base       { font-size: var(--fluid-base) !important; }
.text-lg         { font-size: var(--fluid-lg)   !important; }
.text-xl         { font-size: var(--fluid-xl)   !important; }
.text-2xl        { font-size: var(--fluid-2xl)  !important; }
.text-3xl        { font-size: var(--fluid-3xl)  !important; }
.text-4xl        { font-size: var(--fluid-4xl)  !important; }
.text-5xl        { font-size: var(--fluid-5xl)  !important; }
.text-6xl        { font-size: var(--fluid-6xl)  !important; }
.text-7xl        { font-size: var(--fluid-7xl)  !important; }
.text-8xl        { font-size: var(--fluid-8xl)  !important; }

.text-lg.md\:text-xl   { font-size: var(--fluid-lg-xl)    !important; }
.text-xl.md\:text-2xl  { font-size: var(--fluid-xl-2xl)   !important; }
.text-3xl.md\:text-4xl { font-size: var(--fluid-3xl-4xl)  !important; }
.text-4xl.md\:text-5xl { font-size: var(--fluid-4xl-5xl)  !important; }
.text-3xl.md\:text-5xl { font-size: var(--fluid-3xl-5xl)  !important; }
.text-4xl.md\:text-6xl { font-size: var(--fluid-4xl-6xl)  !important; }
.text-5xl.md\:text-7xl { font-size: var(--fluid-5xl-7xl)  !important; }
.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--fluid-3xl-4xl-5xl) !important; }
.text-3xl.md\:text-4xl.lg\:text-6xl { font-size: var(--fluid-3xl-4xl-6xl) !important; }
.text-3xl.md\:text-5xl.lg\:text-6xl { font-size: var(--fluid-3xl-5xl-6xl) !important; }
.text-4xl.md\:text-6xl.lg\:text-7xl { font-size: var(--fluid-4xl-6xl-7xl) !important; }

/* =============================================
   ENTRY CONTENT (Blog / Portfolio)
   ============================================= */
.entry-content > h2 { font-size: var(--fluid-3xl) !important; }
.entry-content > h3 { font-size: var(--fluid-2xl) !important; }
.entry-content > h4,
.entry-content > blockquote { font-size: var(--fluid-xl) !important; }
.entry-content > figure > figcaption { font-size: var(--fluid-sm) !important; }

/* =============================================
   LAYOUT COMPONENTS
   ============================================= */
.bg-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 10vw 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-gradient {
  background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.08) 0%, transparent 70%);
}

.nav-blur {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

.btn-primary {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  border: 1px solid var(--border-color);
  border-radius: 20px !important;
}

.wp-block-button.is-style-dm-light .wp-block-button__link,
.wp-block-button.is-style-dm-dark .wp-block-button__link {
  border-radius: 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: var(--fluid-11) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em;
  padding: 0.625rem 1.5rem;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}

.wp-block-button.is-style-dm-light .wp-block-button__link {
  background: #ffffff !important;
  border: 1px solid #ffffff;
  color: #000000 !important;
}

.wp-block-button.is-style-dm-light .wp-block-button__link:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7;
  transform: translateY(-2px);
}

.wp-block-button.is-style-dm-dark .wp-block-button__link {
  background: #000000 !important;
  border: 1px solid #000000;
  color: #ffffff !important;
}

.wp-block-button.is-style-dm-dark .wp-block-button__link:hover {
  background: #27272a !important;
  border-color: #27272a;
  transform: translateY(-2px);
}

.content-section { display: block; opacity: 1; }

/* =============================================
   NAVIGATION
   ============================================= */
.nav-link { position: relative; cursor: pointer; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0%; height: 1px; background: white;
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

#mobile-menu { display: none; opacity: 0; z-index: 100; }

@media (max-width: 1024px) {
  .desktop-nav  { display: none !important; }
  .mobile-trigger { display: flex !important; }
}

/* =============================================
   ANIMATIONS
   ============================================= */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal-dark { opacity: 0; transform: translateY(30px); }

@keyframes pulseLine {
  0%   { opacity: 0.1; }
  50%  { opacity: 0.3; }
  100% { opacity: 0.1; }
}
.pulse-bar { animation: pulseLine 4s infinite ease-in-out; }

/* =============================================
   UTILITY / ACCENT COLOURS
   ============================================= */
.text-accent-green { color: var(--color-accent-green); }
.text-accent-red   { color: #ef4444; }

/* =============================================
   WYSIWYG LIST STYLING
   ============================================= */
.custom-bullet-list ul { list-style: none; padding-left: 0; margin: 0; }
.custom-bullet-list li {
  position: relative; display: flex; align-items: center;
  margin-bottom: 0.5rem; color: white; font-size: var(--fluid-base);
}
.custom-bullet-list li::before {
  content: ''; display: block; width: 4px; height: 4px;
  background-color: white; border-radius: 50%;
  margin-right: 0.75rem; flex-shrink: 0;
}

/* =============================================
   BLOCK EDITOR — remove default WP padding
   ============================================= */
.wp-site-blocks { padding: 0 !important; }
.wp-block-post-content { padding: 0 !important; }

/* =============================================
   FLUENT FORMS OVERRIDES
   ============================================= */
.ff-el-form-control {
  background-color: black; color: white; padding: 10px;
  border-radius: 10px; border: 1px solid white;
  cursor: pointer; transition: all 0.3s ease;
}
.ff-el-form-control:hover { background-color: white; color: black; border: 1px solid black; }

/* Select arrow */
.contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}