/* Theme Information */
/*
Theme Name: WingsForum
Theme URI: http://themetailor.co.za
Author: ThemeTailor
Author URI: http://themetailor.co.za
Description: Webanchor Boiler Plate Theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: themetailor
Tags: editor-style
*/

@font-face { font-family: 'Library3amsoft'; src: url('fonts/Library3am-soft.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Library3am'; src: url('fonts/Library3am.woff2') format('woff2'); font-weight: normal; font-style: normal; }

:root { --primary: #d95d65; --secondary: #edb735; --grey: #2e2e2e; --white: #FFF; }

.wp-block-columns { margin-bottom: 0; gap: 0; }
.wp-block-column .wp-block-image { margin-bottom: 0; }

.has-white-color { color: var(--white); }
.has-white-background-color { background-color: var(--white); }
.wp-block-button .has-white-color { color: var(--white); }


.has-primary-color { color: var(--primary); }
.has-primary-background-color { background-color: var(--primary); }
.wp-block-button .has-primary-color { color: var(--primary); }

.has-secondary-color { color: var(--secondary); }
.has-secondary-background-color { background-color: var(--secondary); }
.wp-block-button .has-secondary-color { color: var(--secondary); }

.has-grey-color { color: var(--grey); }
.has-grey-background-color { background-color: var(--grey); }
.wp-block-button .has-grey-color { color: var(--grey); }

/* Reset */
html { scroll-behavior: smooth; }
body { background-color: var(--grey); font-family: "proxima-nova", sans-serif; }
body { margin: 0; padding: 0; color: var(--white); font-size: 1.0625rem; line-height: 1.5; font-weight: 400; }


h1, h2, h3, h4, h5, h6 { font-family: Library3am, Arial Black, sans-serif; font-weight: 400; line-height: 1.15; margin: 1.25rem 0; padding: 0; color: var(--secondary); text-transform: uppercase; }
h1 { font-size: 3rem; text-transform: none; }
h2 { font-size: 2.5rem; }
h3 { font-family: "PT Sans Narrow", sans-serif; font-weight: 400; line-height: 1.27; font-size: 1.625rem; color: var(--secondary); letter-spacing: .13rem; }
p, ul, ol { margin: 0 0 0.9375rem 0; padding: 0; }
ul, ol { list-style: inside; margin: 0 0 .5rem 1rem; }
ul li, ol li { margin: 0 0 .3rem 0; }
img { width: 100%; height: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; padding: 0; }
.alignwide { width: 90vw; max-width: 75rem; margin: 0 auto; }
.aligncenter { text-align: center; }
.wp-block-post-excerpt__excerpt { margin-bottom: 0.9375rem; }
.wp-block-post-excerpt__more-link { font-weight: 600; }

a { transition: opacity 0.25s ease, transform 0.25s ease; }
a:hover { opacity: 0.85; transform: none; }

p a { color: var(--secondary);transition: color 0.3s; }
p a:hover, a:focus { opacity: .8; }

    .desklogo { display: block; }
    .mobilogo { display: none; }  

header { background: url('img/bg.png'); background-size: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.3125rem solid var(--secondary); }
header h1 { margin: 0; }
header h1 a { display: block; }
header h1 a:hover { color: var(--primary); text-decoration: none; opacity: .9; }
header h1 img { width: 70%; height: auto; margin: 0 auto; display: block; }
header p { margin: 0; }
header.page-header { padding: 0.625rem 1.875rem; background: var(--accent); }
header.page-header h1 { color: var(--white); }
header .container { background-color: var(--grey); padding: 0.625rem 0; display: block; }

.site-branding { display: flex; align-items: center; }
.site-branding p { text-transform: uppercase; }

nav { margin: 1.25rem 0; }
nav ul { list-style: none; margin: 0; text-align: center; }
nav li { display: inline-block; margin-left: 1.25rem; }

nav a { text-decoration: none; font-family: "PT Sans Narrow", sans-serif; font-weight: 700; line-height: 1.27; font-size: 1.2rem; font-optical-sizing: auto; color: var(--white);  letter-spacing: .1rem; }
nav li.current-menu-item a, nav a:hover { color: var(--secondary); }

aside { box-sizing: border-box; margin-left: 4%; width: 21%; }
aside ul, aside ul li { list-style: none; margin: 0; padding: 0; }

section.description { padding: 1.875rem; font-size: 1.125rem; background: var(--grey); box-shadow: 0.0625rem 0.0625rem 0.3125rem 0 rgba(0,0,0,0.1); margin-bottom: 3.125rem; }

.container { max-width: 75rem; margin: 0 auto; display: flex; }
.content-area { width: 75%; }
.content-archive { max-width: 80%; margin: 0 auto; }
.widget { margin-bottom: 1.25rem; }
.widget-title { font-size: 1.125rem; margin-bottom: 0.625rem; }

.entry-header h1, .entry-header h2 { font-size: 1.5rem; margin-bottom: 0.625rem; }
.entry-content { font-size: 1rem; line-height: 1.8; margin-bottom: 2.5rem; }
.more-link { background-color: #0073aa; border-radius: 0.1875rem; color: var(--white); display: inline-block; padding: 0.3125rem 0.9375rem; transition: background-color 0.3s; }
.more-link:hover { background-color: #005177; }

footer#colophon { font-size: 1rem; width: 100%; max-width: 100%; margin: 0 auto; background: url('img/bg.png'); background-size: 100%; color: var(--white); border-top: 0.3125rem solid var(--secondary); }
footer a { color: var(--secondary); }
footer .container { display: block; background: var(--grey); max-width: 80rem; }


footer .footbox { display: flex; padding: 3.125rem 5rem; align-content: space-between; gap: 1.4rem; }


footer .footfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-weight: 500;
  background: #1f1e1c;
  padding: 0.8rem 6.25rem;
  gap: 2rem;
}

footer .footfoot a { color: var(--secondary); }

.footfoot .left {
  flex: 1;
}

.footfoot p.links {
  margin-bottom: 15px; font-size:.9rem; padding-bottom:0; margin:0;
}

.footfoot p.location {
  font-size: .7rem;
  margin-bottom: .4rem;
}

.footfoot .right {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.75rem;
  flex-shrink: 0;
}

.footfoot .right a {
  display: block;
  line-height: 0;
}

.footfoot .right a img,
.footfoot .right a svg {
  display: block;
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  footer .footfoot {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .footfoot .right {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }
}


footer h2 { color: var(--secondary); font-size: 2.875rem; margin: 0; }
footer .social { display: flex; height: 2.625rem; }
footer a.btn-round { text-decoration: none; background: transparent; border: 0.125rem solid var(--primary); display: block; border-radius: 3.125rem; margin-bottom: 1.25rem; padding: 0.625rem 0.9375rem; font-weight: 500; color: var(--primary); text-transform: uppercase; font-size: 0.875rem; width: fit-content; letter-spacing: .05rem; transition: all 0.25s easy; }
footer a.btn-round:hover { opacity: 0.85; background: var(--primary); color: var(--grey); transition: background-color 0.5s ease; }
footer a.btn-icon { background: transparent; border: 0.125rem solid var(--white); border-radius: 100%; font-weight: 500; color: var(--white); margin-right: 0.625rem; padding: 0.625rem; transition: opacity 0.25s ease, transform 0.25s ease; }
footer a.btn-icon svg { font-size: 1.25rem; display: inline-block; width: 1.25rem; height: 1.25rem; fill: white; stroke: white; transition: all .2s ease-in-out; }
footer a.btn-icon:hover {  transition: background-color: .5s ease, opacity: .5s ease; background: var(--white); color: var(--grey); }
footer a.btn-icon:hover svg { fill: var(--grey); stroke: var(--grey); }
footer .box-1 { width: 20%;  }
footer .box-2 { width: 42%; padding-right: 5%; }
footer .box-3 { width: 30%; }
footer a { text-decoration: none; }

.gform_wrapper.gravity-theme .gform_footer input,
.gform_wrapper.gravity-theme .gform_footer button { text-decoration: none; background: transparent!important; border: 0.125rem solid var(--primary); display: block; border-radius: 3.125rem; margin-bottom: 1.25rem; padding: 0.625rem 0.9375rem; font-weight: 500; color: var(--primary)!important; text-transform: uppercase; font-size: 0.875rem; width: fit-content; letter-spacing: .05rem; transition: all 0.25s easy; cursor:pointer; }

.gform_wrapper.gravity-theme .gform_footer input:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover { opacity: 0.85; background: var(--primary); color: var(--grey); transition: background-color 0.5s ease; }

.gform_wrapper a { color: var(--white); }
.gform_wrapper.gravity-theme .gfield_required { color: var(--primary)!important; }
.gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select { background-color: #CECECE; border: none; }

.form_saved_message h2 { font-family: "PT Sans Narrow", sans-serif, sans-serif!important; font-size: 2rem; }

#content { align-content: space-evenly; display: flex; }

article { margin-bottom: 2.5rem; overflow: hidden; display: flex; flex-direction: column; }
.archive article .entry-content { display: flex; }
.archive article .entry-content .entry-text { width: 70%; display: flex; flex-direction: column; justify-content: space-between; }
.archive article .entry-content .entry-text h2 { margin-bottom: 0.625rem; }
.archive article .thumb { width: 28%; margin-left: 2%; }
.archive article img { width: 100%; height: auto; }
.archive article { border-bottom: 0.0625rem solid var(--grey); background: var(--grey); padding: 1.875rem; box-shadow: 0.0625rem 0.0625rem 0.3125rem 0 rgba(0,0,0,0.1); }
.archive article .tags { text-transform: uppercase; font-size: 0.75rem; margin-top: 1.25rem; }
.archive article .tags a { color: var(--primary); }
.archive article .tags a:hover { color: var(--accent); }
.archive section.letter-section { padding: 0.3125rem 1.875rem; background: var(--accent-3); margin-bottom: 2.5rem; }
.archive section.letter-section h2 { color: var(--white); }
.archive .letter-navigation { color: var(--grey); letter-spacing: 0.0625rem; }
.archive .letter-navigation a { color: var(--white); font-weight: 600; }

a.btn-read-more { margin-top: 0.625rem; font-size: 0.75rem; background: var(--primary); color: var(--white); padding: 0.125rem 0.5rem; display: block; width: fit-content; transition: opacity 0.25s ease, transform 0.25s ease; }
a.btn-read-more:hover { background-color: var(--accent); opacity: 0.85; transform: translateY(-0.125rem);  }

.single .entry-content img { max-width: 26.875rem; margin-bottom: 1.875rem; margin-right: 1.875rem; float: left; }
.single .entry-header { padding: 0.625rem 1.875rem; background: var(--accent); border: none; margin-bottom: 1.875rem; }
.single .entry-header h1 { color: var(--white); margin: 0; padding: 0; }
.single .tags { display: block; color: var(--white); background: var(--primary); text-transform: uppercase; font-size: 0.75rem; padding: 0.3125rem 0.625rem; width: fit-content; }
.single .tags a { color: var(--white); }
.single .tags a:hover { opacity: .8; }

.eventbox { margin-bottom: 1.25rem; }
.post-type-archive-event .content-area { width: 56.25rem; }

/* FIX 1: max-width not fixed width — allows alignfull children to break out correctly */
section.page-content { width: 100%; max-width: 75rem; margin: 0 auto; box-sizing: border-box; /* padding: 0 2rem; */ }
section.page-content img { width: 100%; height: auto; }


/* Gutenberg block fixes */
.wp-block-column .colright { padding: 1rem 2rem 1rem 3rem; }
.wp-block-column .colleft { padding: 1rem 3rem 1rem 2rem; }
/* .has-white-background-color { padding: 2rem 0; } */
/* .has-white-background-color h2, .has-white-background-color h3 { color: var(--primary); } */
.has-white-background-color p { color: var(--grey); }
/* .has-secondary-background-color { padding: 2rem 0; } */
.has-secondary-background-color h2 { color: var(--grey); }
.wp-block-columns .wp-block-column .wp-block-image { margin: 0; }
.wp-block-columns .wp-block-column .wp-block-image img { display: block; }

.btn-see-more a { background: var(--primary); color: #FFF; padding: 0.625rem 1.25rem; }
.postblock { padding: 1.875rem; box-shadow: 0.0625rem 0.0625rem 0.3125rem 0 rgba(0,0,0,0.1); }
.postblock img { margin: 1.25rem 0; display: block; }
.postblock h2 { font-size: 1.25rem; }

.colright { box-sizing: border-box; }
.colleft { box-sizing: border-box; }


.wp-block-button .wp-element-button {  font-weight: 500; line-height: 1.27; font-size: 1rem;  letter-spacing: .05rem; transition: all 0.25s ease; }
.wp-block-button .wp-element-button:hover { background-color: var(--primary); color: var(--grey); transition: all .2s ease; }
.wp-block-button .wp-element-button.has-white-color:hover { background-color: var(--white); color: var(--secondary)!important; transition: all .2s ease; } 
.wp-block-button .wp-element-button.has-secondary-color:hover { background-color: var(--secondary); color: var(--grey); }
.wp-block-button .wp-element-button.has-grey-color:hover { background-color: var(--grey); color: var(--primary); }


.wp-block-pullquote { margin: 0 auto; padding: 0; border: none; text-align: left; }
.wp-block-pullquote blockquote { margin: 0; padding: 2.875rem 6.25rem; border:none; background: transparent; }
.wp-block-pullquote blockquote p { font-family: "PT Sans Narrow", sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5; color: var(--white); font-style: italic; margin: 0 0 0.2rem 0; text-align: center; }
.wp-block-pullquote blockquote cite { font-size: 0.75rem; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); opacity: 0.8; }

/* TABLE */

.wp-block-table table.has-fixed-layout thead tr td {background:var(--secondary); color:var(--grey); font-weight:600;}
.wp-block-table table.has-fixed-layout tr td {background:var(--grey); color:var(--white); font-weight:600;}

.wp-block-table table.has-fixed-layout tbody tr td[colspan="2"] {background:#fff; color:var(--grey); font-weight:600;}

.wp-block-table table.has-fixed-layout {border:none;}
.wp-block-table table.has-fixed-layout td, 
.wp-block-table table.has-fixed-layout th {border:none;}
.wp-block-table table.has-fixed-layout td {border-bottom:1px solid #fff;}
.wp-block-table table.has-fixed-layout tr:last-child td {border-bottom:none;}

/* =============================================
   MOBILE NAV
   ============================================= */

.mobi-toggle { display: none; }

@media only screen and (max-width: 767px) {
    nav#site-navigation .menu-header { display: none; }
    .mobi-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.3125rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0.125rem solid var(--primary); background: transparent; cursor: pointer; padding: 0; margin-left: auto; flex-shrink: 0; top: 39px; position: absolute; right: 15px; }
    .mobi-toggle span { display: block; width: 1.125rem; height: 0.125rem; background: var(--white); border-radius: 0.125rem; transition: all 0.3s ease; }
    .mobi-toggle.is-active span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
    .mobi-toggle.is-active span:nth-child(2) { opacity: 0; }
    .mobi-toggle.is-active span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }
    nav#site-navigation .menu-header ul { flex-direction: column; }
    nav#site-navigation .menu-header li { display: block; margin: 0; border-top: 0.0625rem solid rgba(255,255,255,0.1); }
    nav#site-navigation .menu-header a { display: block; padding: 0.75rem 1rem; }
    .support .wp-block-image img { aspect-ratio: auto!important; margin-bottom: 15px; }
    .wp-block-pullquote blockquote { padding: 2.875rem 1rem; }
}


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

/* Mobile Phones (Portrait) — up to 480px */
@media only screen and (max-width: 480px) {
    body { font-size: 1rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    .container { flex-direction: column; }
    .content-area { width: 100%; }
    .content-archive { max-width: 100%; }
    aside { width: 100%; margin-left: 0; margin-top: 2rem; }
    header { flex-direction: column; align-items: flex-start; padding: 0.75rem 1rem; }
    header h1 img { width: 75%; }
    header .container { padding: 0.5rem 1rem; position: relative; }
    nav { margin: 0.75rem 0; }
    nav li { display: block; margin: 0.25rem 0; }
    nav a { font-size: 1rem; }
    #content { flex-direction: column; }
    .archive article { padding: 1rem; }
    .archive article .entry-content { flex-direction: column; }
    .archive article .entry-content .entry-text { width: 100%; }
    .archive article .thumb { width: 100%; margin-left: 0; margin-top: 1rem; }
    .single .entry-content img { max-width: 100%; float: none; margin-right: 0; }
    .single .entry-header { padding: 0.625rem 1rem; }
    footer .footbox { flex-direction: column; padding: 2rem 1rem; }
    footer .footfoot { padding: 0.625rem 1rem; }
    footer .box-1, footer .box-2, footer .box-3 { width: 100%; padding-right: 0; margin-bottom: 1.5rem; }
    footer h2 { font-size: 2rem; }
    section.page-content { padding: 0 1rem; }
    .post-type-archive-event .content-area { width: 100%; }
    .wp-block-column .colright, .wp-block-column .colleft { padding: 1.25rem; }
    .wp-block-columns { flex-direction: column !important; }
    .wp-block-columns .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .wp-block-columns.switch { flex-direction: column-reverse !important; }
    .wp-block-spacer { height: 1.25rem !important; }
    .wp-block-image img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
    .desklogo { display: none; }
    .mobilogo { display: block; }

}

/* Mobile Phones (Landscape) — 481px to 767px */
@media only screen and (min-width: 481px) and (max-width: 767px) {
    body { font-size: 1rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.375rem; }
    .container { flex-direction: column; padding: 0 1.25rem; }
    .content-area { width: 100%; }
    .content-archive { max-width: 100%; }
    aside { width: 100%; margin-left: 0; margin-top: 1.5rem; }
    header { flex-direction: column; align-items: flex-start; padding: 0.75rem 1.25rem; }
    header h1 img { width: 40%; }
    header .container { padding: 0.5rem 1.25rem; }
    nav li { margin-left: 0.75rem; }
    nav a { font-size: 1rem; }
    #content { flex-direction: column; }
    .archive article { padding: 1.25rem; }
    .archive article .entry-content { flex-direction: column; }
    .archive article .entry-content .entry-text { width: 100%; }
    .archive article .thumb { width: 60%; margin-left: 0; margin-top: 1rem; }
    .single .entry-content img { max-width: 100%; float: none; margin-right: 0; }
    footer .footbox { flex-direction: column; padding: 2rem 1.25rem; }
    footer .footfoot { padding: 0.625rem 1.25rem; }
    footer .box-1, footer .box-2, footer .box-3 { width: 100%; padding-right: 0; margin-bottom: 1.5rem; }
    footer h2 { font-size: 2rem; }
    section.page-content { padding: 0 1.25rem; }
    .post-type-archive-event .content-area { width: 100%; }
    .wp-block-column .colright, .wp-block-column .colleft { padding: 1.25rem; }
    .wp-block-columns { flex-direction: column !important; }
    .wp-block-columns .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .wp-block-columns.switch { flex-direction: column-reverse !important; }
    .wp-block-spacer { height: 1.25rem !important; }
    .wp-block-image img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
    .desklogo { display: none; }
    .mobilogo { display: block; }    
}

/* Tablets (Portrait) — 768px to 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body { font-size: 1rem; }
    h2 { font-size: 1.875rem; }
    .container { padding: 0 1.5rem; }
    .content-area { width: 65%; }
    aside { width: 30%; margin-left: 5%; }
    header { padding: 0.75rem 1.5rem; }
    header h1 img { width: 60%; }
    header .container { padding: 0.5rem 1.5rem; }
    nav a { font-size: 1.0625rem; }
    .archive article .entry-content .entry-text { width: 60%; }
    .archive article .thumb { width: 38%; }
    footer .footbox { padding: 2.5rem; }
    footer .footfoot { padding: 0.625rem 2.5rem; }
    footer .box-1 { width: 25%; }
    footer .box-2 { width: 45%; }
    footer .box-3 { width: 30%; }
    footer h2 { font-size: 2.25rem; }
    section.page-content { padding: 0 1.5rem; box-sizing: border-box; }
    .post-type-archive-event .content-area { width: 100%; }
    .wp-block-column .colright, .wp-block-column .colleft { padding: 1.5rem 2rem; }
    .wp-block-spacer { height: 1.25rem !important; }
    .wp-block-columns { flex-direction: column !important; }
    .wp-block-columns .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
    .wp-block-columns.switch { flex-direction: column-reverse !important; }
    .wp-block-image img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
    .desklogo { display: none; }
    .mobilogo { display: block; }      
}

/* Tablets (Landscape) — 1025px to 1280px */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .container { padding: 0 1.5rem; }
    footer .footbox { padding: 3rem; }
    footer .footfoot { padding: 0.625rem 3rem; }
    section.page-content { padding: 0 1.5rem; box-sizing: border-box; }
    .wp-block-column .colright, .wp-block-column .colleft { padding: 2rem 2.5rem; }
    .wp-block-image img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
    .desklogo { display: block; }
    .mobilogo { display: none; }      
}

/* Desktops — 1281px and up */
@media only screen and (min-width: 1281px) {
    /* Styles here */
}

/* High-resolution Devices (like Retina Displays) */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    /* Styles for high-resolution displays here */
}

/* Orientation */
@media (orientation: landscape) { /* Landscape styles here */ }
@media (orientation: portrait) { /* Portrait styles here */ }

/* Print */
@media print {
    nav, aside, footer { display: none; }
    body { font-size: 0.875rem; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}