/* ============================================================
   ANGLOFUN — full design system (child of Blocksy)
   --------------------------------------------------------------
   1.  Design tokens (CSS vars)
   2.  Base
   3.  Section wrapper (.af-section)
   4.  Typography utilities
   5.  Color & background utilities
   6.  Button utilities (.af-btn-*)
   7.  Shape utilities (.af-shape-*)
   8.  Photo placeholders (.af-ph-*)
   9.  Animations
   10. Section kits — hero, about, cours, team, testimonials,
       gallery, recruit, contact, footer
   11. Responsive
   12. Editor (Gutenberg) niceties
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
:root {
	--af-blue:       #1a3fbf;
	--af-blue-deep:  #0b2570;
	--af-rose:       #f6c9cf;
	--af-rose-deep:  #e89aa3;
	--af-cream:      #f6efe7;
	--af-ink:        #151515;
	--af-body-ink:   #2a2a2a;
	--af-paper:      #ffffff;

	--af-font-display: 'Jost', Futura, 'Century Gothic', system-ui, sans-serif;
	--af-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--af-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--af-pad-x:    clamp(20px, 5vw, 80px);
	--af-pad-y:    clamp(70px, 12vw, 140px);
	--af-radius:   4px;
	--af-pill:     999px;

	--af-rule:     1px solid rgba(21,21,21,0.07);
	--af-rule-blue: 1px solid rgba(26,63,191,0.20);
}

/* ---- 2. Base ---------------------------------------------- */
html { scroll-behavior: smooth; }
body {
	background: var(--af-cream);
	color: var(--af-ink);
	font-family: var(--af-font-body);
}
::selection { background: var(--af-rose); color: var(--af-ink); }
a { transition: opacity 150ms ease, color 150ms ease; }

/* Make Blocksy's container go edge-to-edge on Anglofun pages. */
body.anglofun-page .ct-container,
body.home .ct-container { max-width: none; padding: 0; }

/* ---- 3. Section wrapper ----------------------------------- */
.wp-block-group.af-section,
.is-style-af-section.wp-block-group {
	position: relative;
	overflow: hidden;
	padding: var(--af-pad-y) var(--af-pad-x);
	box-sizing: border-box;
	max-width: none !important;
	width: 100%;
}
.wp-block-group.af-section > *,
.is-style-af-section.wp-block-group > * { position: relative; z-index: 1; }

/* ---- 4. Typography utilities ------------------------------ */
.af-display       { font-family: var(--af-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.af-display em    { font-style: italic; font-weight: 400; }
.af-display-hero  { font-size: clamp(56px, 9vw, 112px); line-height: 0.92; letter-spacing: -0.035em; }
.af-display-2     { font-size: clamp(44px, 7vw, 80px);  line-height: 0.95; letter-spacing: -0.030em; }
.af-display-3     { font-size: clamp(32px, 4vw, 48px);  line-height: 1.05; letter-spacing: -0.020em; }
.af-display-4     { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.015em; }

.af-mono          { font-family: var(--af-font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.af-mono-sm       { font-family: var(--af-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.af-body          { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--af-body-ink); }
.af-lede          { font-size: 20px; line-height: 1.5; color: var(--af-body-ink); }
.af-small         { font-size: 13px; }
.af-narrow        { max-width: 460px; margin-left: 0; margin-right: auto; }
.af-wide          { max-width: 820px; margin-left: 0; margin-right: auto; }

.af-italic        { font-style: italic; font-weight: 400; }
.af-underline-rose{ text-decoration-color: var(--af-rose); text-decoration-thickness: 7px; text-underline-offset: 9px; }

/* ---- 5. Color utilities ----------------------------------- */
.af-c-blue        { color: var(--af-blue) !important; }
.af-c-blue-deep   { color: var(--af-blue-deep) !important; }
.af-c-rose        { color: var(--af-rose) !important; }
.af-c-rose-deep   { color: var(--af-rose-deep) !important; }
.af-c-ink         { color: var(--af-ink) !important; }
.af-c-cream       { color: var(--af-cream) !important; }
.af-muted         { color: rgba(0,0,0,0.55); }
.af-muted-light   { color: rgba(255,255,255,0.75); }

.af-bg-blue       { background: var(--af-blue); }
.af-bg-blue-deep  { background: var(--af-blue-deep); color: var(--af-cream); }
.af-bg-rose       { background: var(--af-rose); }
.af-bg-cream      { background: var(--af-cream); }
.af-bg-ink        { background: var(--af-ink); color: var(--af-cream); }
.af-bg-paper      { background: var(--af-paper); }

/* ---- 6. Buttons (.af-btn-*) ------------------------------- */
.wp-block-buttons.af-cta-row { gap: 14px; flex-wrap: wrap; }

.wp-block-button.af-btn .wp-block-button__link,
a.af-btn {
	display: inline-flex; align-items: center; gap: 8px;
	border-radius: var(--af-pill);
	padding: 16px 30px;
	font-size: 16px; font-weight: 600;
	font-family: var(--af-font-body);
	text-decoration: none; border: 0;
	white-space: nowrap;
	transition: transform 150ms ease, opacity 150ms ease, background 150ms ease, color 150ms ease;
}
.wp-block-button.af-btn .wp-block-button__link:hover,
a.af-btn:hover { transform: translateY(-1px); }

.wp-block-button.af-btn-blue       .wp-block-button__link, a.af-btn-blue           { background: var(--af-blue) !important; color: #fff !important; }
.wp-block-button.af-btn-ink        .wp-block-button__link, a.af-btn-ink            { background: var(--af-ink) !important; color: var(--af-cream) !important; }
.wp-block-button.af-btn-rose       .wp-block-button__link, a.af-btn-rose           { background: var(--af-rose) !important; color: var(--af-ink) !important; }
.wp-block-button.af-btn-ghost      .wp-block-button__link, a.af-btn-ghost          { background: transparent !important; color: var(--af-ink) !important; border: 2px solid var(--af-ink) !important; padding: 14px 28px; }
.wp-block-button.af-btn-outline    .wp-block-button__link, a.af-btn-outline        { background: transparent !important; color: var(--af-ink) !important; border: 1.5px solid var(--af-ink) !important; padding: 12px 22px; font-size: 14px; }
.wp-block-button.af-btn-outline-light .wp-block-button__link, a.af-btn-outline-light { background: transparent !important; color: var(--af-cream) !important; border: 2px solid var(--af-cream) !important; padding: 12px 22px; font-size: 14px; }

/* ---- 7. Shape utilities ----------------------------------- */
.af-shape { display: inline-block; pointer-events: none; vertical-align: middle; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.af-shape-circle    { width: 44px; height: 44px; border-radius: 50%; }
.af-shape-square    { width: 44px; height: 44px; border-radius: 8px; }
.af-shape-triangle  { width: 0; height: 0;
                      border-left: 22px solid transparent;
                      border-right: 22px solid transparent;
                      border-bottom: 44px solid currentColor;
                      background: transparent !important; }
.af-shape-half-top  { width: 44px; height: 22px; border-radius: 44px 44px 0 0; }
.af-shape-pill      { width: 56px; height: 28px; border-radius: 999px; }

.af-fill-blue       { background: var(--af-blue); }
.af-fill-blue-deep  { background: var(--af-blue-deep); }
.af-fill-rose       { background: var(--af-rose); }
.af-fill-rose-deep  { background: var(--af-rose-deep); }
.af-fill-ink        { background: var(--af-ink); }
.af-fill-cream      { background: var(--af-cream); }
.af-shape-triangle.af-fill-blue       { color: var(--af-blue);      background: transparent; }
.af-shape-triangle.af-fill-blue-deep  { color: var(--af-blue-deep); background: transparent; }
.af-shape-triangle.af-fill-rose       { color: var(--af-rose);      background: transparent; }
.af-shape-triangle.af-fill-rose-deep  { color: var(--af-rose-deep); background: transparent; }
.af-shape-triangle.af-fill-ink        { color: var(--af-ink);       background: transparent; }

/* ---- 8. Photo placeholders -------------------------------- */
.af-ph {
	display: flex; align-items: flex-end;
	padding: 12px;
	font-family: var(--af-font-mono); font-size: 11px; letter-spacing: 0.05em;
	color: rgba(0,0,0,0.5);
	min-height: 200px;
}
.af-ph-blue { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(40,70,180,0.22) 10px 11px), #e6ecfb; }
.af-ph-rose { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(220,140,150,0.30) 10px 11px), #fae6e8; }
.af-ph-ink  { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.10) 10px 11px), #1a1a1a; color: rgba(255,255,255,0.55); }

/* ---- 9. Animations ---------------------------------------- */
@keyframes af-float    { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }
@keyframes af-fade-up  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.af-shape, [class*="af-anim-"] { animation: none !important; transition: none !important; }
}

/* ============================================================
   10. Section kits
   ============================================================ */

/* ---- HERO ---- */
.af-hero { background: var(--af-cream); min-height: 760px; padding-top: 80px; padding-bottom: 100px; }
.af-hero .af-shape-cluster { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.af-hero .af-shape-cluster .af-shape { position: absolute; }
.af-hero:hover .af-shape-circle   { transform: translate(-14px,12px) rotate(14deg); }
.af-hero:hover .af-shape-triangle { transform: rotate(28deg);          transition-delay: .08s; }
.af-hero:hover .af-shape-half-top { transform: translateY(-18px);      transition-delay: .16s; }
.af-hero:hover .af-shape-square   { transform: rotate(-10deg);         transition-delay: .24s; }
.af-ticker {
	margin-top: 100px !important;
	font-family: var(--af-font-mono); font-size: 12px !important; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--af-blue) !important;
	border-top: var(--af-rule-blue);
	padding-top: 24px;
	display: flex; flex-wrap: wrap; gap: 40px;
}

/* ---- ABOUT ---- */
.af-about { background: var(--af-paper); }
.af-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px !important; }
.af-stat-n { font-family: var(--af-font-display); font-size: 48px !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1 !important; color: var(--af-blue); }
.af-stat-l { font-size: 14px !important; color: #555 !important; margin: 4px 0 0 !important; }

.af-pillars { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.af-pillar {
	background: var(--af-cream);
	padding: 40px 32px !important;
	border-radius: var(--af-radius);
	position: relative; overflow: hidden; min-height: 280px;
}
.af-pillar h3 { margin: 0 0 24px !important; }
.af-pillar h4 { margin: 0 0 12px !important; }
.af-pillar p  { font-size: 15px; color: #444; line-height: 1.55; margin: 0; max-width: 280px; }
.af-pillar::before {
	content: ''; position: absolute; top: -30px; right: -30px;
	width: 140px; height: 140px; pointer-events: none;
}
.af-pillar-a::before { background: var(--af-blue);  border-radius: 50%; }
.af-pillar-b::before { background: var(--af-rose);  border-radius: 20px; }
.af-pillar-c::before {
	background: transparent; width: 0; height: 0;
	border-left: 70px solid transparent; border-right: 70px solid transparent;
	border-bottom: 140px solid var(--af-ink);
}

/* ---- COURS ---- */
.af-cours-section { background: var(--af-cream); }
.af-age-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
.af-age-card {
	background: var(--af-paper);
	padding: 40px 32px !important;
	border-radius: var(--af-radius);
	position: relative; overflow: hidden; min-height: 360px;
}
.af-age-card h3 { margin: 0 0 8px !important; }
.af-age-card h4 { margin: 100px 0 8px !important; }
.af-age-card p  { font-size: 14px; color: #555; line-height: 1.5; max-width: 280px; margin: 0; }
.af-age-card::before {
	content: ''; position: absolute; top: -30px; right: -30px;
	width: 140px; height: 140px; pointer-events: none;
}
.af-age-card-a::before { background: var(--af-rose); border-radius: 50%; }
.af-age-card-b::before {
	background: transparent; width: 0; height: 0;
	border-left: 70px solid transparent; border-right: 70px solid transparent;
	border-bottom: 140px solid var(--af-blue);
}
.af-age-card-c::before { background: var(--af-ink); border-radius: 20px; }

.af-cours { background: var(--af-paper); border-radius: var(--af-radius); padding: 48px 32px; margin-top: 40px; }
.af-cours-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: var(--af-rule); }
.af-cours-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.af-chip {
	padding: 8px 16px; border: 1.5px solid var(--af-ink); border-radius: var(--af-pill);
	background: transparent; color: var(--af-ink);
	font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 150ms;
}
.af-chip.is-active { background: var(--af-ink); color: var(--af-cream); }
.af-cours-tablewrap { overflow-x: auto; }
.af-cours-row {
	display: grid; grid-template-columns: 70px minmax(180px,1fr) 110px 130px 120px 130px;
	gap: 12px; padding: 20px 0;
	border-top: var(--af-rule);
	align-items: center; font-size: 15px; min-width: 740px;
}
.af-cours-row.is-full { opacity: 0.55; }
.af-cours-header { font-family: var(--af-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #999; border-top: 0; padding-bottom: 4px; }
.af-cours-age    { font-family: var(--af-font-display); font-size: 22px; font-weight: 700; color: var(--af-blue); letter-spacing: -0.015em; }
.af-cours-title  { font-weight: 600; }
.af-cours-kicker { font-size: 13px; color: #888; }
.af-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: var(--af-pill); }
.af-tag-blue { color: var(--af-blue); } .af-tag-rose { color: var(--af-rose-deep); } .af-tag-grey { background: #eee; color: #888; }
.af-tag-blue .af-dot, .af-tag-rose .af-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.af-tag-blue .af-dot { background: var(--af-blue); } .af-tag-rose .af-dot { background: var(--af-rose-deep); }

/* ---- TEAM ---- */
.af-team-section { background: var(--af-paper); }
.af-founder {
	background: var(--af-cream);
	border-radius: var(--af-radius);
	padding: 40px;
	display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center;
	position: relative; overflow: hidden; margin-bottom: 32px;
}
.af-founder-photo { position: relative; height: 300px; border-radius: var(--af-radius); overflow: hidden; }
.af-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-founder-quote { font-size: 17px; line-height: 1.6; color: #333; margin-top: 20px; font-style: italic; max-width: 540px; }

.af-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.af-team-card { position: relative; }
.af-team-photo-wrap { position: relative; height: 300px; overflow: hidden; }
.af-team-photo-wrap img, .af-team-photo-wrap .af-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-team-photo-wrap .af-shape { position: absolute; top: -14px; left: -14px; }
.af-team-name { margin-top: 18px; }
.af-team-role { font-size: 14px; color: var(--af-blue); margin-top: 8px; font-weight: 600; }
.af-team-tag  { font-size: 13px; color: #555; margin-top: 4px; font-style: italic; }

/* ---- TESTIMONIALS ---- */
.af-testimonials-section { background: var(--af-rose); padding: 80px var(--af-pad-x) 100px; }
.af-testimonial-stage { position: relative; min-height: 280px; }
.af-testimonial { position: absolute; inset: 0; opacity: 0; transform: translateY(20px); transition: opacity 500ms, transform 500ms; pointer-events: none; margin: 0; }
.af-testimonial.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
.af-quote { margin: 0; font-family: var(--af-font-display); font-size: clamp(28px, 4.5vw, 60px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; max-width: 950px; font-style: italic; }
.af-cite { margin-top: 32px; display: flex; align-items: center; gap: 16px; font-style: normal; }
.af-carousel-controls { margin-top: 56px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.af-carousel-dots { display: flex; gap: 10px; align-items: center; }
.af-carousel-dots .af-dot { width: 10px; height: 10px; border-radius: 5px; background: rgba(11,37,112,0.27); border: 0; padding: 0; cursor: pointer; transition: all 300ms; }
.af-carousel-dots .af-dot.is-active { width: 44px; background: var(--af-blue-deep); }
.af-carousel-nav { margin-left: auto; display: flex; gap: 12px; }
.af-icon-btn { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--af-ink); background: transparent; cursor: pointer; font-size: 18px; }
.af-icon-btn.is-primary { background: var(--af-ink); color: var(--af-cream); border-color: var(--af-ink); }

/* ---- GALLERY ---- */
.af-gallery-section { background: var(--af-paper); }
.af-ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; grid-auto-rows: 160px; margin-top: 40px; }
.af-ig-tile { position: relative; overflow: hidden; display: block; transition: transform 200ms; }
.af-ig-tile.span-2 { grid-column: span 2; }
.af-ig-tile.row-2  { grid-row: span 2; }
.af-ig-tile:hover  { transform: scale(0.985); }
.af-ig-tile .af-ph { width: 100%; height: 100%; }
.af-ig-mark { position: absolute; top: 10px; right: 10px; color: #333; opacity: 0.6; }

/* ---- RECRUITMENT ---- */
.af-recruit-section { background: var(--af-cream); }
.af-recruit-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 64px; }
.af-recruit-card { background: var(--af-paper); padding: 28px 24px !important; border-radius: var(--af-radius); }
.af-recruit-roles { background: var(--af-paper); border-radius: var(--af-radius); padding: 40px !important; }
.af-recruit-head { padding-bottom: 24px; border-bottom: var(--af-rule); margin-bottom: 16px; }
.af-role-row {
	display: grid !important;
	grid-template-columns: 1fr 160px 200px 60px;
	gap: 24px; align-items: center;
	padding: 24px 0;
	border-top: var(--af-rule);
	text-decoration: none; color: var(--af-ink);
	transition: background 150ms;
}
.af-role-row:first-of-type { border-top: 0; }
.af-role-row:hover { background: rgba(246,239,231,0.5); }
.af-role-row > span:nth-child(2) { font-size: 14px; color: #666; }
.af-role-row > span:nth-child(3) { font-family: var(--af-font-mono); font-size: 13px; color: #666; letter-spacing: 0.05em; }
.af-role-row > span:last-child   { text-align: right; font-size: 18px; }

/* ---- CONTACT ---- */
.af-contact-section { background: var(--af-blue-deep); color: var(--af-cream); padding-bottom: 60px; }
.af-contact-section h2, .af-contact-section h3 { color: var(--af-cream); }
.af-contact-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; }
.af-contact-card { padding: 36px !important; border-radius: var(--af-radius); position: relative; overflow: hidden; }
.af-contact-card--glass { background: rgba(255,255,255,0.06); border: 1px solid rgba(246,239,231,0.13); backdrop-filter: blur(8px); }
.af-contact-card--rose  { background: var(--af-rose); color: var(--af-ink); }
.af-contact-card--rose h3 { color: var(--af-ink); line-height: 1.15; margin: 16px 0 8px !important; }

.af-campus-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px !important; margin-top: 40px !important; }
.af-campus-card { background: rgba(255,255,255,0.04); padding: 32px !important; border-radius: var(--af-radius); border: 1px solid rgba(246,239,231,0.13); position: relative; }
.af-campus-card h3 { color: var(--af-cream); margin: 0 0 6px !important; }

/* ---- FOOTER (used by Blocksy footer builder OR custom group) ---- */
.af-footer-section { background: var(--af-ink); color: var(--af-cream); padding: 80px var(--af-pad-x) 40px; }
.af-footer-section a { color: var(--af-cream); text-decoration: none; }
.af-footer-section a:hover { opacity: 0.7; }

/* ============================================================
   11. Responsive
   ============================================================ */
@media (max-width: 1180px) {
	.af-pillars, .af-age-cards, .af-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.af-recruit-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.af-contact-grid, .af-campus-grid { grid-template-columns: 1fr !important; }
	.af-founder { grid-template-columns: 1fr; }
	.af-founder-photo { height: 240px; }
	.af-role-row { grid-template-columns: 1fr auto; gap: 12px; }
	.af-role-row > span:nth-child(2), .af-role-row > span:nth-child(3) { grid-column: 1 / -1; opacity: 0.7; }
	.af-ig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.af-pillars, .af-age-cards, .af-team-grid, .af-recruit-grid { grid-template-columns: 1fr !important; }
	.af-stats { grid-template-columns: 1fr 1fr; }
	.af-ticker { gap: 16px; font-size: 11px !important; }
	.af-hero { min-height: 0; padding-top: 60px; }
	.af-hero .af-shape-cluster { opacity: 0.45; }
	.af-ig-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}

/* ============================================================
   12. Editor (Gutenberg) niceties
   ============================================================ */
.editor-styles-wrapper { background: var(--af-cream); }
.editor-styles-wrapper .wp-block-group.af-section,
.editor-styles-wrapper .is-style-af-section.wp-block-group {
	box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
	border-radius: var(--af-radius);
	padding: 60px 40px !important;
}
.editor-styles-wrapper .af-hero { min-height: 0; }
.editor-styles-wrapper .af-hero .af-shape-cluster { opacity: 0.25; }