/*
Theme Name: Venetian Iron Design
Theme URI: https://venetianirondesign.ca/
Author: Kinex Media
Author URI: https://kinexmedia.com/
Description: Custom classic theme for Venetian Iron Design Inc., carrying the Figma design system (Raleway/Urbanist type scale, brand palette, fluid 1511px content grid) as Tailwind v4 tokens. Edit src/tailwind.css and rebuild the compiled stylesheet with `npm run build`.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venetian-child
Tags: custom-menu, featured-images, translation-ready, block-styles, wide-blocks, threaded-comments, custom-logo
*/

/* ------------------------------------------------------------------
   This file exists for the theme header above and for the small set of
   rules that must load even if the Tailwind build has not been run.
   Everything else lives in src/tailwind.css → assets/css/theme.css.

   These resets MUST stay inside @layer base. The compiled sheet puts all
   of its own rules in cascade layers, and an unlayered declaration beats
   every layered one no matter how specific it is — so an unlayered
   `img { max-width: 100% }` here would defeat `.frame > img
   { max-width: none }` and collapse every cropped image in the design,
   and an unlayered `button { background: none }` would strip .btn of its
   brand fill. Naming the layer puts them back where they belong: before
   the components and utilities that are meant to override them.
   ------------------------------------------------------------------ */

@layer base {
	html { -webkit-text-size-adjust: 100%; }
	body { margin: 0; }
	img, svg { display: block; max-width: 100%; height: auto; }
	a { color: inherit; text-decoration: none; }
	button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
}

/* ==================================================================
   Site overrides
   ------------------------------------------------------------------
   Rules below are deliberately NOT in a layer, so they beat everything
   in the compiled sheet — that is what makes this a useful override
   file. Keep them narrow for the same reason: a broad element selector
   here outranks every utility in the design system.

   Redeclaring a token below re-flows every utility built from it, which
   is usually a smaller change than overriding the rules one by one.
   ================================================================== */

/* ---- Token overrides -------------------------------------------- */
:root {
	/* Example: nudge the brand red without touching the Tailwind source.
	--color-brand: #b40000;
	--color-brand-hover: #e02b2b; */
}

/* ---- Component overrides ---------------------------------------- */





.serve-cell{
	padding: 15px;
}
#home-choice p {
  padding-right: 10px;
}
.mail-p {
	margin-left:12px;
}
li:nth-child(2) > .filter-btn {
    border-left: 1px solid var(--color-hairline);
  }
li:nth-child(3) > .filter-btn {
    border-left: 1px solid var(--color-hairline);
  }
.text-brand::after {
  display: block;
  width: 100%;
  transform: scaleX(1);
}
header{
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


/* Responsive Start */



@media (max-width: 1320px){
	#primaryNav{
		margin-left: clamp(0px,11.25vw,386px);
	}
}

@media (max-width: 1024px){
	.column-divide {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
	.f-link-divide{
		grid-template-columns: repeat(4,minmax(0,1fr));
	}
	.hero-dots.swiper-pagination-bullets {
    bottom: 0;
  }
	.serve-cell:nth-child(3){
		border-left: 0;
	}
	.serve-cell:nth-child(5){
		border-left: 0;
	}
	 #primaryNav {
    margin-left: 0;
  }
	#home-review p{
		max-width:100%;
	}
	#contact .img-fx{
		margin:0px;
	}
	#rail-advantages .grid.max-tab\:gap-y-7{
		gap:0px;
	}
}

@media (max-width: 850px){
	.f-link-divide{
		grid-template-columns: repeat(4,minmax(0,1fr));
	}
}
@media (max-width: 768px){
	.f-link-divide{
		grid-template-columns: repeat(1,minmax(0,1fr));
	}
	#footer-get-touch {
  padding-top: 15px;
  padding-bottom: 20px;
		gap: 15px;
 }
	.column-divide {
    gap: 18px;
  }
	#footer-get-touch h2 {
  font-size: 20px;
		line-height: 30px;
 }
	#footer-get-touch h2 br{
		display:none;
	}
	#home-service .serve-cell img {
    margin-bottom: -11px;
  }
	.serve-divide {
  margin-top: -12px;
 }
	#top-bar-divide{
		justify-content:space-between;
	}
	.mail-icon {
  margin-bottom: -5px;
}
}
@media (max-width: 600px){
	.column-divide {
  grid-template-columns: repeat(1,minmax(0,1fr));
 }
	  .mail-icon {
    margin-bottom: -2px;
  }
	#copywrite p {
  line-height: 24px;
}
}