/*
Theme Name: Design Eleven Theme
Theme URI: https://designeleven.co.uk
Author: Design Eleven Ltd
Author URI: https://designeleven.co.uk
Description: Custom FSE block theme for Design Eleven - data visualization and design agency.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.0.0
Text Domain: design11-theme
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========================================
   GLOBAL STYLES
   ======================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */

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

.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   WORDPRESS BLOCK SPACING RESET
   ======================================== */

.wp-block-post-content > *,
.wp-block-group > *,
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

:where(.wp-block-group) > :first-child {
  margin-top: 0;
}

:where(.wp-block-group) > :last-child {
  margin-bottom: 0;
}

.wp-block-spacer {
  margin-block-start: 0;
  margin-block-end: 0;
}

article .wp-block-post-content > *,
article .wp-block-group > *,
article .wp-site-blocks > * {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

/* ========================================
   INTERACTION ENHANCEMENTS
   ======================================== */

a,
button,
.wp-block-button__link {
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ========================================
   SERVICE ICONS
   ======================================== */

.service-icons-horizontal {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.service-icon-link {
  transition: transform 0.3s ease;
}

.service-icon-link:hover {
  transform: scale(1.1);
}

/* ========================================
   SERVICE PAGE BACKGROUNDS (10% darker)
   ======================================== */

.service-page-header.has-infographics-background-color {
  background-color: #6ab8d5 !important; /* 10% darker than #85ceed */
}

.service-page-header.has-digital-background-color {
  background-color: #9bc02e !important; /* 10% darker than #add036 */
}

.service-page-header.has-animation-background-color {
  background-color: #db6a1f !important; /* 10% darker than #f3792a */
}

.service-page-header.has-branding-background-color {
  background-color: #e3a519 !important; /* 10% darker than #fcb824 */
}

.service-page-header.has-data-viz-background-color {
  background-color: #d38ea5 !important; /* 10% darker than #e8a2b7 */
}

.service-portfolio.has-infographics-background-color {
  background-color: #6ab8d5 !important;
}

.service-portfolio.has-digital-background-color {
  background-color: #9bc02e !important;
}

.service-portfolio.has-animation-background-color {
  background-color: #db6a1f !important;
}

.service-portfolio.has-branding-background-color {
  background-color: #e3a519 !important;
}

.service-portfolio.has-data-viz-background-color {
  background-color: #d38ea5 !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 992px) {
  /* WordPress columns on tablets should be 2 columns */
  .service-cards-section .wp-block-columns {
    flex-wrap: wrap;
  }

  .service-cards-section .wp-block-column {
    flex-basis: calc(50% - 12px) !important;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  /* WordPress columns on mobile should be single column */
  .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Reduce spacing on mobile */
  .alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}