/**
 * additions.css
 *
 * Design token system for The Frestonian Gallery theme.
 * This is the single source of truth for colours, spacing, typography,
 * and button styles. Edit here to update the whole site.
 *
 * Contents:
 *   1. Design Tokens (:root)
 *   2. CTA Button Classes (.primary-cta, .secondary-cta, .clear-cta)
 *   3. Slick Slider overrides
 *   4. Media Query stubs
 */

/* ---------------------------------------------------------------
   1. Design Tokens
--------------------------------------------------------------- */

:root {

	/* --- Colours --- */
	--yellow:        #fbdb29;
	--yellow-hover:  #e8d520;
	--black:         #1d1d1d;
	--main-color: #1d1d1d;
	--white:         #ffffff;
	--grey-light:    #f2f2f2;   /* subtle section backgrounds */
	--grey-mid:      #cccccc;   /* borders, dividers */
	--grey-dark:     #888888;   /* secondary labels */
	--grey-border:   #e0e0e0;   /* lighter borders */
	--grey: rgba(0, 0, 0, 0.75);
	--blue:rgba(77, 77, 255, 1);
	--bg-grey: rgba(179, 179, 179, 0.2);
	--btn-grey:rgba(179, 179, 179, 1);

	/* --- Section Spacing --- */
	--section-pad-y:      80px;
	--section-pad-x:      40px;
	--section-pad:        var(--section-pad-y) var(--section-pad-x);
	--section-max-w:      1400px;

	/* --- Type Scale --- */
	--text-xs:       11px;   /* uppercase labels */
	--text-sm:       13px;   /* buttons, captions, meta */
	--text-base:     15px;   /* body copy */
	--text-md:       17px;   /* slightly larger body */
	--text-lg:       22px;   /* card titles, standfirsts */
	--heading-sm:    clamp(28px, 3vw, 44px);
	--heading-md:    clamp(36px, 4.5vw, 64px);
	--heading-lg:    clamp(40px, 6vw, 80px);

	/* --- Button Base --- */
	--btn-pad:           16px 28px;
	--btn-font-size:     14px;
	--btn-font-weight:   700;
	--btn-tracking:      0em;
	--btn-transition:    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}




/* ---------------------------------------------------------------
   2. CTA Button Classes

   .primary-cta   — yellow fill  → hover: black fill / white text
   .secondary-cta — black fill   → hover: white fill / black text
   .clear-cta     — outline only → hover: yellow fill / black text

   All three share the same base shape, size, and transition.
   Override padding/font-size per context in the module stylesheet.
--------------------------------------------------------------- */

.primary-cta,
.secondary-cta,
.clear-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: var(--btn-pad);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-tracking);
	/*text-transform: uppercase;*/
	text-decoration: none;
	line-height: 1;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
	transition: var(--btn-transition);
	-webkit-appearance: none;
	appearance: none;
}

/* Primary — yellow fill */
.primary-cta {
	background-color: var(--yellow);
	color: var(--black);
	border-color: var(--yellow);
}

.primary-cta:hover,
.primary-cta:focus-visible {
	background-color: var(--black);
	color: var(--white);
	border-color: var(--black);
}

/* Secondary — black fill */
.secondary-cta {
	background-color: var(--black);
	color: var(--white);
	border-color: var(--black);
}

.secondary-cta:hover,
.secondary-cta:focus-visible {
	background-color: var(--white);
	color: var(--black);
	border-color: var(--black);
}

/* Clear — outline only */
.clear-cta {
	background-color: transparent;
	color: var(--black);
	border-color: var(--black);
}

.clear-cta:hover,
.clear-cta:focus-visible {
	background-color: var(--yellow);
	color: var(--black);
	border-color: var(--yellow);
}

/* Focus ring for keyboard nav */
.primary-cta:focus-visible,
.secondary-cta:focus-visible,
.clear-cta:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 3px;
}
.home-banner__btn.home-banner__btn--outline.clear-cta:hover {
	border:var(--white)
}

/* CTA arrow icon — inherits text colour via currentColor */
.cta-arrow {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	width: 17px;
	height: 12px;
	transition: transform 0.2s ease;
}

a:hover .cta-arrow,
button:hover .cta-arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------
   3. Slick Slider overrides
--------------------------------------------------------------- */

.slick-prev { left: calc(50% + 40px); background-image: url(../../../img/slick-left.svg); transform: rotate(135deg); }
.slick-next { right: calc(50% - 182px); background-image: url(../../../img/slick-right.svg); transform: rotate(-45deg); }
.events_module .slick-prev:hover,
.events_module .slick-next:hover { border: solid 1px var(--black); opacity: 1; }
.events_module .slick-prev.slick-disabled { opacity: 0.1; border: solid 1px var(--yellow) !important; pointer-events: none; cursor: default; }



/* ---------------------------------------------------------------
   Sub header — "01   INTRODUCTION" with ruled underline
--------------------------------------------------------------- */
.introduction-module__subheader {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--black);
	margin-bottom: 20px;
	min-width: 260px; /* line extends past the text */
}

.introduction-module__subheader-text {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--black);
	letter-spacing:1%;
}
.introduction-module__subheader-num {
    margin-right:12px
}

/* ---------------------------------------------------------------
   Heading (WYSIWYG — editor applies bold/uppercase in content)
--------------------------------------------------------------- */
.introduction-module__heading {
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.8px;
	text-transform: uppercase;
	color: var(--black);
}

.introduction-module__heading p {
	margin: 0;
}

.introduction-module__heading h1,
.introduction-module__heading h2,
.introduction-module__heading h3 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
}
/* ---------------------------------------------------------------
   4. Media Query stubs
--------------------------------------------------------------- */

@media (max-width: 1536px) {}
@media (max-width: 1366px) {}
@media (max-width: 1280px) {}
@media (max-width: 1080px) {}
@media (max-width: 992px) {

	.introduction-module__subheader-text {
		font-size: 12px;
	}

	.introduction-module__heading {
		line-height: 1;
	}

	.introduction-module__subheader {
		margin-bottom: 15px;
	}
}

@media (max-width: 768px) {}
@media (max-width: 600px) {}