/* ============================================
   ILFORD inCOLOUR 2026 — custom.css
   Global base — loads on every page
   ============================================ */

:root {
  --ic-red:    #e8362d;
  --ic-teal:   #17a2a2;
  --ic-green:  #52ae32;
  --ic-orange: #f2941a;
  --ic-yellow: #f5c518;
  --ic-purple: #7b3f9d;
  --ic-navy:   #1b1b6b;
  --ic-cream:  #f7f4ee;

  --ic-max: 1200px;
  --ic-pad: 80px;
  --ic-radius: 10px;
}

/* ============================================
   GLOBAL FONTS
   ============================================ */
body,
input, button, select, textarea,
p, a, li, span, div,
nav a, .menu a, .main-navigation a,
footer, footer a {
  font-family: 'Mulish', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .page-title {
  font-family: 'Mulish', sans-serif !important;
}

/* ============================================
   GLOBAL RESET / LAYOUT
   ============================================ */
body { overflow-x: hidden; }

/* full-bleed sections, no vertical margin */
.ic-section {
  position: relative;
  padding: var(--ic-pad) 20px;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 0 calc(50% - 50vw) !important;
}

.ic-section * { box-sizing: border-box; }

.ic-section h1, .ic-section h2, .ic-section h3,
.ic-section h4, .ic-section p,
.ic-section ul, .ic-section li { margin: 0; padding: 0; }

.ic-section ul { list-style: none; }
.ic-section img { max-width: 100%; display: block; }

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

/* ============================================
   KILL GAPS — WPBakery + Gutenberg
   ============================================ */
.wp-block-html { margin: 0 !important; }

.wpb_wrapper > .ic-section { margin-bottom: 0 !important; }

.wpb_content_element,
.wpb_text_column,
.wpb_raw_code,
.wpb_raw_html { margin-bottom: 0 !important; }

.vc_row,
.vc_row-fluid { margin-bottom: 0 !important; }

.vc_column_container,
.vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

.vc_row:has(.ic-section) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* stray wpautop paragraphs / breaks */
.wpb_wrapper > p:empty,
.wpb_wrapper > br,
.entry-content > p:empty,
.entry-content > br,
.page-content > p:empty,
.page-content > br { display: none !important; }

.entry-content > *,
.page-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }

.entry-content,
.page-content,
.site-content,
.content-area { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ============================================
   GLOBAL HEADINGS
   ============================================ */
.ic-section h2,
.ic-section h3 {
  color: var(--ic-navy);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

/* section titles */
.ic-section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: -.5px;
  margin-bottom: 18px !important;
}

/* sub / label headings */
.ic-section h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: 1.5px;
  margin-bottom: 30px !important;
}

.ic-section h2.ic-center,
.ic-section h3.ic-center { text-align: center; }

.ic-heading {
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ic-navy);
  margin-bottom: 40px !important;
}

/* reusable eyebrow label */
.ic-eyebrow {
  font-family: 'Fredoka', sans-serif !important;
  font-size: .85rem !important;
  letter-spacing: 2.5px;
  color: var(--ic-red);
  margin-bottom: 10px !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.ic-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: opacity .2s;
}
.ic-btn:hover { opacity: .85; }
.ic-btn--yellow { background: var(--ic-yellow); color: var(--ic-navy); }
.ic-btn--white  { background: #fff; color: var(--ic-navy); }
.ic-btn--navy   { background: var(--ic-navy); color: #fff; }

@media (max-width: 768px) {
  :root { --ic-pad: 50px; }
}

/* ============================================
   SECTION EYEBROW — shared
   ============================================ */
.ic-eyebrow {
  display: block;
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.4;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ic-navy);
  margin: 0 0 14px !important;
}

@media (max-width: 560px) {
  .ic-eyebrow { font-size: .75rem; letter-spacing: 2px; margin-bottom: 10px !important; }
}


/* ============================================
   PAINT DECOR — drips + splats (shared)
   ============================================ */
/* Host section needs: position: relative; overflow: hidden;
   and its content wrapper needs position: relative; z-index: 1; */

.ic-drip {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--drip-h, 70px);
  z-index: 2;
  pointer-events: none;
  background: url('/wp-content/uploads/2026/07/drip.png') repeat-x left top / auto 100%;
}

/* hangs down from the top edge of its section */
.ic-drip--top { top: 0; }

/* rises from the bottom edge — flipped copy of the same strip */
.ic-drip--bottom {
  bottom: 0;
  transform: scaleY(-1);
}

@media (max-width: 900px) { .ic-drip { --drip-h: 48px; } }
@media (max-width: 520px) { .ic-drip { --drip-h: 34px; } }

/* ---------- Splats ---------- */
/* size, rotation and opacity ride custom properties so placement
   lives in the page CSS, not here */
.ic-splat {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--splat-w, 240px);
  height: var(--splat-h, 240px);
  opacity: var(--splat-o, .45);
  transform: rotate(var(--splat-r, 0deg));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ic-splat--yellow { background-image: url('/wp-content/uploads/2026/07/s1.png'); }
.ic-splat--purple { background-image: url('/wp-content/uploads/2026/07/s2.png'); }
.ic-splat--red    { background-image: url('/wp-content/uploads/2026/07/s3.png'); }
.ic-splat--green  { background-image: url('/wp-content/uploads/2026/07/s4.png'); }
.ic-splat--orange { background-image: url('/wp-content/uploads/2026/07/s5.png'); }
.ic-splat--teal { background-image: url('/wp-content/uploads/2026/07/s6.png'); }

@media (prefers-reduced-motion: no-preference) {
  .ic-splat { will-change: auto; }
}